css | |
---|---|
Udvidelse | .css |
MIME -type | tekst/css |
Udvikler | CSS-arbejdsgruppe [d] |
offentliggjort | 17. december 1996 |
Formattype | Stilarkssprog |
Standard(er) |
Niveau 1 (anbefaling) Niveau 2 (anbefaling) Niveau 2 Revision 1 (anbefaling) |
Internet side |
w3.org/Style/CSS/drafts.csswg.org _ |
CSS ( /siːɛsɛs/ English Cascading Style Sheets ) er et formelt sprog til at beskrive udseendet af et dokument ( webside ) skrevet ved hjælp af et markup-sprog (oftest HTML eller XHTML ). Det kan også anvendes på ethvert XML-dokument , såsom SVG eller XUL .
CSS bruges af websideskabere til at definere farver , skrifttyper , typografier, placering af individuelle blokke og andre præsentationsaspekter af udseendet af disse websider. Hoveddesignmålet med CSS er at afskærme og adskille beskrivelsen af den logiske struktur af en webside (som er udført ved hjælp af HTML eller andre markup-sprog ) fra beskrivelsen af den pågældende websides udseende (hvilket nu gøres ved hjælp af den formelle CSS Sprog). Denne adskillelse kan øge et dokuments tilgængelighed, give større fleksibilitet og kontrol over dets præsentation og reducere kompleksitet og gentagelser i strukturelt indhold.
Derudover tillader CSS, at det samme dokument præsenteres i forskellige stilarter eller outputmetoder , såsom skærmpræsentation, trykt præsentation, stemmelæsning (med en dedikeret stemmebrowser eller skærmlæser), eller når det vises af Braille -enheder. .
CSS-regler kan findes både i selve webdokumentet , hvis udseende de beskriver, og i eksterne filer , der har filtypenavnet .css . CSS-formatet er en tekstfil, der indeholder en liste over CSS-regler og deres kommentarer.
CSS-stile kan inkluderes eller indlejres i det webdokument, de beskriver, på fire måder:
I de første to tilfælde anvendes eksterne typografier på dokumentet , og i det andet anvendes interne typografier .
For at tilføje CSS til et XML-dokument, skal sidstnævnte indeholde et særligt link til stilfilen:
<?xml-stylesheet type="text/css" href="style.css"?>I de første tre tilfælde af tilføjelse af CSS-stile til et dokument (se ovenfor), har hver CSS-regel fra filen to hoveddele - en vælger og en erklæringsblok . Vælgeren , der er placeret i venstre side af reglen før "{", bestemmer hvilke dele af dokumentet (evt. specielt markeret) reglen gælder for. Annonceblokken er placeret i højre side af reglen. Den er placeret i krøllede parenteser og består til gengæld af en eller flere erklæringer adskilt af ";". Hver erklæring er en kombination af en CSS-egenskab og en værdi adskilt af et ":". Vælgere kan grupperes på den samme linje adskilt af kommaer. I dette tilfælde anvendes ejendommen på hver af dem.
selector , selector { property: value ; ejendom: værdi ; ejendom: værdi ; }I det fjerde tilfælde af at forbinde CSS til et dokument (se listen), er CSS-reglen, som er værdien af stilattributten for det element, den gælder for, en liste over erklæringer (" CSS-egenskab : værdi ") adskilt af " ;".
Typer af vælgere Universalvælger * { margin : 0 ; polstring : 0 _ } Tagvælger p { font-familie : arial , helvetica , sans-serif ; } Klassevælger . note { farve : rød ; baggrundsfarve : gul _ font-weight : fed ; } Identifikatorvælger # paragraph1 { margin : 0 ; } Attributvælger a [ href = "http://www.somesite.com" ] { font-weight : bold ; } Descendant selector (kontekstvælger) div # afsnit 1 s . note { farve : blå ; } Børnevælger p . note > b { farve : grøn ; } . div { border : 1 px solid red ; polstring - venstre : 20px } . title { font-size : 20 px ; baggrundsfarve : rød _ } Søskendeelementvælgeren h1 + p { font-size : 24 px ; } Pseudo-klassevælger a : aktiv { farve : blå ; } Pseudo-elementvælger p :: første bogstav { font-size : 32 px ; }En klasse eller identifikator kan tildeles et HTML-element gennem elementets klasse- eller id-attributter:
<!DOCTYPE html> < html > < head > < meta http-equiv = "Content-Type" content = "text/html; charset=utf-8" > < title > Klasse- og ID-vælgere </ title > < style > s . stor { font-familie : arial , helvetica , sans-serif ; farve : rød _ } div # first { baggrundsfarve : sølv ; } </ style > </ head > < body > < div id = "first" > <!-- Dette er en grå baggrund div stylet af id --> </ div > < p class = "big" > <! -- Dette er rød tekst --> </ p > </ body > </ html >Den største forskel mellem elementklasser og elementidentifikatorer er, at en identifikator er for et enkelt element, mens en klasse normalt tildeles flere elementer på én gang. Moderne browsere har dog en tendens til korrekt at gengive flere elementer med det samme ID. Forskellen er også, at flere klasser kan eksistere (når et elements klasse består af flere ord adskilt af mellemrum). Dette er ikke muligt for identifikatorer.
Det er vigtigt at bemærke følgende forskel mellem en identifikator og en klasse: identifikatorer bruges i vid udstrækning i JavaScript til at finde et unikt element i et dokument.
Navnene på klasser og identifikatorer, i modsætning til navnene på tags og deres attributter, skelner mellem store og små bogstaver.
Egenskaberne for klasser og identifikatorer indstilles ved hjælp af de relevante vælgere. Desuden kan den indstilles som en egenskab for klassen som helhed (i dette tilfælde begynder vælgeren med ".", f.eks. ".big") eller som en egenskab for selve identifikatoren (i dette tilfælde, selector begynder med "#", for eksempel "#first" ), og egenskaben for et element i denne klasse eller med denne identifikator.
I CSS er der, udover de klasser, der er defineret af sideforfatteren, også et begrænset sæt af såkaldte pseudo -klasser , der beskriver udseendet af hyperlinks med en bestemt tilstand i dokumentet, udseendet af det element, hvorpå inputtet er fokuseret, og fremkomsten af elementer, der er de første børn af andre elementer. Der er også fire såkaldte pseudo-elementer i CSS : det første bogstav, den første linje, der anvender specielle stilarter før og efter elementet.
Anvendelse af CSS på HTML-dokumenter er baseret på principperne om arv og kaskade . Princippet om nedarvning er, at CSS-egenskaber, der er deklareret på forfædreelementer, næsten altid nedarves af efterkommerelementer.
Princippet om cascading bruges, når mere end én CSS-regel er forbundet med et HTML- element på samme tid, det vil sige, når der er en konflikt mellem værdierne af disse regler. For at løse sådanne konflikter indføres der forrangsregler.
Vælger | a, b, c, d | Nummer |
---|---|---|
span | 0, 0, 0, 1 | en |
div.klasse | 0, 0, 1, 1 | elleve |
#id .klasse | 0, 1, 1, 0 | 110 |
div span | 0, 0, 0, 2 | 2 |
.klasse | 0, 0, 1, 0 | ti |
#id span | 0, 1, 0, 1 | 101 |
Et eksempel på et typografiark (i denne form kan det enten placeres i en separat .css-fil eller indrammes med tags <style>og placeres i "headeren" på selve den webside, den fungerer på):
p { font-familie : arial , helvetica , sans-serif ; } h2 { font-size : 20 pt ; farve : rød _ baggrund : hvid _ } . note { farve : rød ; baggrundsfarve : gul _ font-weight : fed ; } p # paragraph1 { padding-left : 10 px ; } a : hover { tekst-dekoration : ingen ; } # nyheder p { farve : blå ; } [ type = "knap" ] { baggrundsfarve : grøn ; }Her er syv CSS - regler med vælgerne p, h2, .note, p#paragraph1, a:hoverog #news p.[type="button"]
Før fremkomsten af CSS blev websidestyling udelukkende udført i HTML , direkte i indholdet af et dokument. Men med fremkomsten af CSS blev det muligt grundlæggende at adskille indholdet og præsentationen af et dokument. På grund af denne innovation blev det muligt nemt at anvende en enkelt designstil til en masse lignende dokumenter samt hurtigt at ændre dette design.
Fordele:
Fejl:
CSS er en af en bred vifte af teknologier, der er godkendt af W3C og tilsammen omtalt som "webstandarder" [2] . I 1990'erne blev behovet for at standardisere nettet klart, for at skabe en form for ensartede regler, som programmører og webdesignere ville designe websteder efter. Sådan opstod HTML 4.01- og XHTML -sprogene og CSS-standarden.
I begyndelsen af 1990'erne havde forskellige browsere deres egne stile til at vise websider. HTML udviklede sig meget hurtigt og var i stand til at tilfredsstille alle de behov for informationsdesign, der eksisterede på det tidspunkt, så CSS fik ikke bred accept på det tidspunkt.
Udtrykket Cascading Style Sheets blev opfundet af Haakon Lee i 1994. Sammen med Bert Bos begyndte han at udvikle CSS.
I modsætning til mange stilsprog, der eksisterede på det tidspunkt, bruger CSS forældre-til-barn-arv, så en udvikler kan definere forskellige stilarter baseret på allerede definerede stilarter.
I midten af 1990'erne begyndte World Wide Web Consortium ( W3C ) at vise interesse for CSS, og i december 1996 blev CSS1-anbefalingen udsendt.
W3C-anbefaling, vedtaget 17. december 1996 , ændret 11. januar 1999 [3] . Blandt funktionerne i denne anbefaling:
W3C-anbefaling, vedtaget 12. maj 1998 [4] . Baseret på CSS1 og samtidig bibeholde bagudkompatibilitet med nogle få undtagelser. Tilføjelse til funktionalitet:
W3C understøtter ikke længere CSS2 og anbefaler at bruge CSS2.1
Niveau 2 revision 1 (CSS2.1)W3C-anbefaling, vedtaget 7. juni 2011 .
CSS2.1 er baseret på CSS2. Ud over at rette fejl, er nogle dele af specifikationen blevet ændret i den nye revision, og nogle[ hvad? ] og fjernes helt. De fjernede dele kan blive tilføjet til CSS3 i fremtiden.
CSS3 ( engelsk Cascading Style Sheets 3 - cascading style sheets af tredje generation ) er en aktivt udviklet CSS -specifikation . Det er et formelt sprog implementeret ved hjælp af et markup-sprog . Den største revision sammenlignet med CSS1, CSS2 og CSS2.1. Hovedtræk ved CSS3 er evnen til at skabe animerede elementer uden brug af JS [5] , understøttelse af lineære og radiale gradienter, skygger, udjævning og mere.
Det bruges primært som et middel til at beskrive og style udseendet af websider, der er skrevet ved hjælp af HTML- og XHTML -markeringssprogene , men kan også anvendes på alle XML-dokumenter , såsom SVG eller XUL .
Udviklingsversion (liste over alle moduler) [6] .
I modsætning til tidligere versioner er specifikationen opdelt i moduler, hvis udvikling og udvikling udføres uafhængigt. CSS3 bygger på CSS2.1 og udvider eksisterende egenskaber og værdier og tilføjer nye.
Innovationer, der starter med små, som afrundede hjørner af blokkene, slutter med transformation ( animation ) og muligvis indførelsen af variable [7] [8] .
Udviklet af W3C siden 29. september 2011 [9] [10] .
CSS4-moduler bygger oven på CSS3 og tilføjer nye egenskaber og værdier til dem. Alle eksisterer indtil videre i form af udkast (arbejdsudkast).
For eksempel:
De mest fuldt understøttende CSS-standarden er browsere , der kører på Gecko ( Mozilla Firefox , osv.), WebKit ( Safari , Arora , Google Chrome ) og Presto (Opera) [11] motorer.
Den tidligere mest udbredte browser [12] Internet Explorer 6 understøtter ikke fuldt ud CSS [13] .
Udgivet syv år senere forbedrede Internet Explorer 7 niveauet af CSS-understøttelse markant [14] [15] , men indeholdt stadig et betydeligt antal fejl [16] .
Internet Explorer 8 bruger en ny motor, der fuldt ud understøtter CSS 2.1 og delvist understøtter CSS 3 [17] .
For at teste browserunderstøttelse af webstandarder, herunder forskellige dele af CSS-standarden, blev Acid- testen udviklet .
CSS-standarderne fra W3C bruger en model, hvor en egenskab widthdefinerer bredden af boksens indhold uden at inkludere polstring eller kanter. Tidlige versioner af Internet Explorer (4 og 5) implementerede deres egen model, hvor bredden definerer afstanden mellem kassekanter, inklusive polstring ( padding) og grænser ( border). Ud over Internet Explorer 5 forstås denne model også af browsere Netscape 4 og Opera 7. Understøttelse af W3C-standardmodellen dukkede kun op i IE i sjette version.
Den kommende CSS3-standard introducerede en egenskab box-sizingmed værdier content-boxfor at angive brugen af W3C-standardmodellen og border-boxfor at bruge IE 5-modellen til at løse dette problem.
I Mozilla -browseren blev der med støtte fra denne egenskab under sit eget "arbejdsnavn" -moz-box-sizingintroduceret en anden værdi - padding-box, og dermed skabte en tredje boksmodel, hvori width er størrelsen af indholdet og indrykning af blokken, ikke inklusive ramme.
Forskelle i implementeringen af CSS af forskellige browsere tvinger webudviklere til at lede efter løsninger på, hvordan man får alle browsere til at gengive siden på samme måde. CSS-filtre (også ofte omtalt som CSS-hacks) giver dig mulighed for selektivt at anvende stilarter til forskellige elementer. For eksempel er Internet Explorer 6 kendt for at håndhæve regler, der bruger visningsvælgere (et filter kendt som " star html bug "). For at få W3C- og IE-boksmodellen, der kører i Quirks-tilstand, til at vise en 100px bred boks med 10px-polstring, kan du skrive kode som denne: * html селектор#someblock
/* W3C model - 80px indholdsbredde og 10px polstring på hver side */ # someblock { width : 80 px ; polstring : 10px _ _ } /* Følgende regel gælder kun for IE6. */ * html # someblock { width : 100 px ; polstring : 10px _ _ }En anden måde at selektivt håndhæve regler for Internet Explorer er betingede kommentarer .
Alle versioner af Internet Explorer, der blev understøttet i 2010, var sårbare: Når browseren behandler cascading styles (CSS), kan der forekomme uinitialiseret hukommelse, som efterfølgende bruges til at fjernstarte ondsindet kode på brugerens computer [18] .
CSS Framework (også Webdesign Framework ) er et præ-forberedt CSS-bibliotek skabt for at forenkle arbejdet for layoutdesigneren, fremskynde udviklingen og eliminere det maksimalt mulige antal layoutfejl (kompatibilitetsproblemer mellem forskellige browserversioner osv.). Ligesom biblioteker med scripting programmeringssprog, er CSS-frameworks, normalt i form af en ekstern .css-fil, "forbundet" til projektet (føjet til overskriften på websiden), hvilket tillader en programmør eller designer, der er uerfaren i forviklingerne af layout for at oprette et html-layout korrekt.
Når du lægger sider ud, skal du ofte bruge den samme værdi mange gange: den samme farve, den samme skrifttype. Og hvis denne værdi skal ændres, så skal den ændres mange steder.
For at løse disse problemer og fremskynde udviklingen er der flere udvidelser (preprocessorer) af CSS-sproget. Udvidelser i den forstand, at CSS-koden er gyldig kode for en udvidelse, men ikke omvendt. For at den "udvidede CSS"-kode kan blive til en almindelig CSS-fil, der opfattes af browseren, skal du kompilere den. Kompilering kan være af flere typer:
Eksempler på CSS-udvidelser (preprocessorer):
Stylesheet-sprog ( sammenlign , list ) | |
---|---|
Tilstande |
|
Standard | |
ikke standard |
|
World Wide Web Consortium (W3C) | |||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Produkter og standarder |
| ||||||||||||||
Organisationer |
| ||||||||||||||
PÅ |
| ||||||||||||||
Konferencer |
|
Web og hjemmesider | |
---|---|
globalt | |
Lokalt | |
Typer af websteder og tjenester |
|
Oprettelse og vedligeholdelse | |
Typer af layout, sider, websteder | |
Teknisk | |
Markedsføring | |
Samfund og kultur |
Cascading Style Sheets | |
---|---|
css |
|
Sammenligning |
|
webdesign |
|
Cascading Style Sheets |