Cascading Style Sheets (CSS) er et stilarksprog, der bruges til at beskrive præsentationen af et dokument skrevet i et opmærkningssprog som HTML. CSS er en hjørnesten i moderne webudvikling, da det giver udviklere mulighed for at adskille indhold (HTML) fra dets visuelle præsentation (CSS). Før CSS blev udbredt, var mange visuelle egenskaber indlejret direkte i HTML-opmærket, hvilket gjorde websider svære at vedligeholde, inkonsekvente og mindre tilgængelige.
- Hvorfor bruge CSS? Adskillelse af Indhold og Præsentation
- Grundlæggende CSS-syntaks
- Forstå Selektorer
- Cascading og Specificitet
- Arv (Inheritance)
- Positionering og Layout
- Fordele ved at bruge CSS
- Begrænsninger ved CSS
- Browserunderstøttelse og Kompatibilitet
- CSS Frameworks og Designmetoder
- Ofte Stillede Spørgsmål om CSS
Hvorfor bruge CSS? Adskillelse af Indhold og Præsentation
Den primære fordel ved CSS er adskillelsen af indhold fra præsentation. Dette betyder, at HTML-dokumentet udelukkende fokuserer på strukturen og betydningen af indholdet, mens CSS-filen definerer, hvordan dette indhold skal se ud (farver, skrifttyper, layout, afstand osv.). Denne adskillelse medfører en række fordele:
- Lettere vedligeholdelse: Ændringer i designet kan foretages i én central CSS-fil i stedet for at skulle redigere hver enkelt HTML-side.
- Ensartethed: Sikrer et konsistent udseende på tværs af hele webstedet.
- Reduceret filstørrelse: HTML-dokumenter bliver mindre, da de ikke indeholder præsentationsmarkering.
- Bedre ydeevne: Browsere kan cache eksterne CSS-filer, hvilket fremskynder indlæsningstiderne for efterfølgende sider.
- Forbedret tilgængelighed: Indholdet forbliver læsbart og struktureret, selv hvis stilarkene ikke indlæses eller deaktiveres.
- Responsivt design: CSS gør det muligt at tilpasse layout og stil til forskellige skærmstørrelser og enheder.
Grundlæggende CSS-syntaks
Et CSS-stilark består af en liste af regler. Hver regel består af en eller flere selektorer og en deklarationsblok.
En deklarationsblok er omkranset af krøllede parenteser ({}) og indeholder en semikolon-separeret liste af deklarationer. Hver deklaration består af en egenskab (property), et kolon (:) og en værdi. Valgfrit mellemrum kan bruges for læsbarhed.
selector { egenskab: værdi; anden-egenskab: anden-værdi; }
Eksempel:
p { color: blue; font-size: 16px; }
Her er p selektoren, og color: blue; og font-size: 16px; er deklarationer.
Forstå Selektorer
Selektorer er kernen i CSS, da de bestemmer, hvilke HTML-elementer en stilregel skal anvendes på. Selektorer matcher elementer baseret på deres type, attributter, relationer til andre elementer og mere.
Typer af Selektorer
- Element-selektorer: Anvender stil på alle elementer af en bestemt type (f.eks.
p,h2,div). - ID-selektorer: Anvender stil på det ene element med et specifikt ID (f.eks.
#myid). ID'er skal være unikke i dokumentet. - Klasse-selektorer: Anvender stil på alle elementer med en bestemt klasse (f.eks.
.myclass). En klasse kan anvendes på flere elementer. - Attribut-selektorer: Anvender stil baseret på et elements attributter (f.eks.
[type="text"],[href^="https"]). - Universel selektor: Anvender stil på alle elementer (f.eks.
*).
Pseudo-klasser og Pseudo-elementer
Pseudo-klasser og pseudo-elementer giver mulighed for at style elementer baseret på information, der ikke er direkte tilgængelig i dokumenttræet.
- Pseudo-klasser: Vælger elementer baseret på deres tilstand (f.eks.
:hover,:visited,:first-child). De bruger et enkelt kolon (:). - Pseudo-elementer: Vælger dele af et element (f.eks.
::first-line,::before,::after). De bruger typisk et dobbelt kolon (::), selvom enkelt kolon også accepteres for bagudkompatibilitet med ældre pseudo-elementer.
Kombinatorer
Kombinatorer bruges til at kombinere flere simple selektorer for at vælge elementer baseret på deres relation til hinanden i dokumenttræet:
- Efterkommer-kombinator (mellemrum): Vælger et element, der er en efterkommer af et andet (f.eks.
div pvælger allep-elementer inde idiv-elementer). - Barn-kombinator (
>): Vælger et element, der er et direkte barn af et andet (f.eks.ul > livælger alleli-elementer, der er direkte børn af etul-element). - Adjacent sibling-kombinator (
+): Vælger et element, der er umiddelbart efter et andet element (f.eks.h2 + pvælger detp-element, der kommer lige efter eth2-element). - General sibling-kombinator (
~): Vælger et element, der er efter et andet element, men ikke nødvendigvis umiddelbart efter (f.eks.h2 ~ pvælger allep-elementer, der kommer efter eth2-element, inden for samme forælder).
Her er en opsummering af nogle almindelige selektor-syntakser:
| Mønster | Matcher | Introduceret i CSS |
|---|---|---|
E |
Et element af type E | 1 |
E:link |
Et E-element, der er kildeanker for et hyperlink, hvis mål enten ikke er besøgt (:link) eller allerede besøgt (:visited) | 1 |
E:visited |
1 | |
E:active |
Et E-element under visse brugerhandlinger | 1 |
E:hover |
2 | |
E:focus |
2 | |
E::first-line |
Den første formaterede linje af et E-element | 1 |
E::first-letter |
Den første formaterede bogstav af et E-element | 1 |
.c |
Alle elementer med class="c" | 1 |
#myid |
Elementet med id="myid" | 1 |
E.warning |
Et E-element, hvis klasse er "warning" | 1 |
E#myid |
Et E-element med ID lig med "myid" | 1 |
.c#myid |
Elementet med class="c" og ID lig med "myid" | 1 |
E F |
Et F-element, der er efterkommer af et E-element | 1 |
* |
Ethvert element | 2 |
E[foo] |
Et E-element med en "foo"-attribut | 2 |
E[foo="bar"] |
Et E-element, hvis "foo"-attributværdi præcist er lig med "bar" | 2 |
E[foo~="bar"] |
Et E-element, hvis "foo"-attributværdi er en liste af mellemrums-separerede værdier, hvoraf én præcist er lig med "bar" | 2 |
E[foo|="en"] |
Et E-element, hvis "foo"-attribut har en bindestregs-separeret liste af værdier, der begynder med "en" | 2 |
E:first-child |
Et E-element, første barn af dets forælder | 2 |
E:lang(fr) |
Et element af type E på sproget "fr" | 2 |
E::before |
Genereret indhold før et E-elements indhold | 2 |
E::after |
Genereret indhold efter et E-elements indhold | 2 |
E > F |
Et F-element, der er barn af et E-element | 2 |
E + F |
Et F-element, der umiddelbart er forudgået af et E-element | 2 |
E[foo^="bar"] |
Et E-element, hvis "foo"-attributværdi præcist begynder med strengen "bar" | 3 |
E[foo$="bar"] |
Et E-element, hvis "foo"-attributværdi præcist ender med strengen "bar" | 3 |
E[foo*="bar"] |
Et E-element, hvis "foo"-attributværdi indeholder understrengen "bar" | 3 |
E:root |
Et E-element, rod af dokumentet | 3 |
E:nth-child(n) |
Et E-element, det n-te barn af dets forælder | 3 |
E:nth-last-child(n) |
Et E-element, det n-te barn af dets forælder, tællende fra den sidste | 3 |
E:nth-of-type(n) |
Et E-element, det n-te søskende af dets type | 3 |
E:nth-last-of-type(n) |
Et E-element, det n-te søskende af dets type, tællende fra den sidste | 3 |
E:last-child |
Et E-element, sidste barn af dets forælder | 3 |
E:first-of-type |
Et E-element, første søskende af dets type | 3 |
E:last-of-type |
Et E-element, sidste søskende af dets type | 3 |
E:only-child |
Et E-element, eneste barn af dets forælder | 3 |
E:only-of-type |
Et E-element, eneste søskende af dets type | 3 |
E:empty |
Et E-element, der ikke har nogen børn (inklusive tekstnoder) | 3 |
E:target |
Et E-element, der er mål for den refererende URI | 3 |
E:enabled |
Et brugergrænsefladeelement E, der er aktiveret | 3 |
E:disabled |
Et brugergrænsefladeelement E, der er deaktiveret | 3 |
E:checked |
Et brugergrænsefladeelement E, der er markeret (f.eks. en radiobutton eller checkbox) | 3 |
E:not(s) |
Et E-element, der ikke matcher den simple selektor s | 3 |
E ~ F |
Et F-element, der er forudgået af et E-element | 3 |
E:has(s) |
Et E-element, der indeholder et element, der matcher den simple selektor s | 4 |
Cascading og Specificitet
Navnet "Cascading Style Sheets" henviser til den proces, hvor browseren bestemmer, hvilke stilregler der skal anvendes på et element, når flere regler potentielt kan matche. Denne proces kaldes cascading.
Stilarter kan komme fra flere kilder:
- Browserens standardstilark.
- Brugerens brugerdefinerede stilark (hvis opsat).
- Forfatterens stilark (webudviklerens CSS).
Regler fra kilder med højere prioritet tilsidesætter regler fra kilder med lavere prioritet. Inden for samme kilde (f.eks. forfatterens stilark) bestemmes prioriteten af to faktorer: specificitet og rækkefølge.
CSS Prioritetsskema (Højeste til Laveste)
| Prioritet | CSS Kilde Type | Beskrivelse |
|---|---|---|
| 1 | Importance | !important-annotationen tilsidesætter de foregående prioritetstyper |
| 2 | Inline | En stil anvendt direkte på et HTML-element via HTML "style"-attributten |
| 3 | Media Type | En egenskabsdefinition gælder for alle medietyper, medmindre der er defineret medie-specifik CSS |
| 4 | User defined | De fleste browsere har en tilgængelighedsfunktion: en brugerdefineret CSS |
| 5 | Selector specificity | En specifik kontekstuel selektor (#heading p) tilsidesætter generisk definition |
| 6 | Rule order | Den seneste regeldeklaration har højere prioritet |
| 7 | Parent inheritance | Hvis en egenskab ikke er specificeret, arves den fra et forældreelement |
| 8 | CSS property definition in HTML document | CSS-regel eller CSS inline-stil tilsidesætter en standard browser-værdi |
| 9 | Browser default | Den laveste prioritet: browserens standardværdi bestemmes af W3C's initialværdi-specifikationer |
Specificitet
Specificitet er et mål for, hvor præcis en selektor er. Mere specifikke selektorer har højere prioritet end mindre specifikke. Specificitet beregnes ved at tælle antallet af ID-selektorer, klasse-selektorer (inklusive attribut-selektorer og pseudo-klasser) og element-selektorer (inklusive pseudo-elementer) i selektoren.
Beregningsregler (fra højeste til laveste vægt):
- Inline styles (1,0,0,0)
- Antal ID'er i selektoren (0,1,0,0 for hvert ID)
- Antal klasser, attributter og pseudo-klasser (0,0,1,0 for hver)
- Antal elementer og pseudo-elementer (0,0,0,1 for hver)
Eksempel på specificitet:
| Selektorer | Specificitet |
|---|---|
h1 |
0,0,0,1 |
p em |
0,0,0,2 |
.grape |
0,0,1,0 |
p.bright |
0,0,1,1 |
p.bright em.dark |
0,0,2,2 |
#id218 |
0,1,0,0 |
style=" " |
1,0,0,0 |
Den regel med den højeste specificitet vinder. Hvis specificiteten er den samme, vinder den regel, der står sidst i stilarket (rækkefølge).
Arv (Inheritance)
Arv er en vigtig funktion i CSS, der baserer sig på forælder-efterkommer-relationen i dokumenttræet. Visse egenskaber arves automatisk af efterkommer-elementer, hvis de ikke er eksplicit defineret for efterkommeren.
Typiske egenskaber, der arves, er tekst-relaterede, såsom color, font-family, font-size, text-align, line-height osv. Egenskaber relateret til boksmodellen (som margin, padding, border, width, height) arves generelt ikke.
Eksempel:
p { color: pink; }
Hvis du har HTML som dette:
<p>Dette er for at <em>illustrere</em> arv</p>
Da em-elementet er inde i p-elementet, og color er en arvelig egenskab, vil teksten inde i em-elementet også blive lyserød, medmindre der er en specifik regel for em, der tilsidesætter farven.
Positionering og Layout
CSS giver kraftfulde værktøjer til at styre elementers placering og layout på siden.
Positioneringsskemaer
CSS 2.1 definerer tre positioneringsskemaer:
- Normal flow: Elementer placeres i den rækkefølge, de optræder i HTML-koden. Inline-elementer flyder vandret, blok-elementer stables lodret.
- Floats: Et element tages ud af normal flow og flyttes til venstre eller højre. Andre elementer flyder omkring det.
- Absolut positionering: Et element tages helt ud af normal flow og placeres i forhold til dets nærmeste positionerede forfader (eller dokumentets krop, hvis ingen forfader er positioneret). Det påvirker ikke placeringen af andre elementer.
Egenskaben position
Egenskaben position styrer elementets positioneringsskema. Den kan have følgende værdier:
static: Standardværdien. Elementet er i normal flow.top,bottom,left,righthar ingen effekt.relative: Elementet er i normal flow, men kan forskydes fra sin normale position ved hjælp aftop,bottom,left,right. Andre elementer placeres, som om elementet ikke var flyttet.absolute: Elementet tages ud af normal flow og placeres i forhold til dets nærmeste positionerede forfader.fixed: Elementet er absolut positioneret i en fast position i visningsporten (browserens vindue), selv når siden scrolles.sticky: En hybrid afrelativeogfixed. Elementet er i normal flow, indtil det rammer en bestemt position i visningsporten, hvorefter det bliver fast.
Float og Clear
Egenskaben float bruges til at placere et element til venstre eller højre for det omgivende indhold. Værdierne er left, right eller none (standard).
Egenskaben clear bruges til at kontrollere, om et element skal flyde under et flydende element. Værdierne er left, right, both eller none (standard). Hvis et element har clear: both;, vil det flytte sig ned under eventuelle flydende elementer til både venstre og højre.
Fordele ved at bruge CSS
Som nævnt tidligere, har brugen af CSS markante fordele:
- Adskillelse af indhold og præsentation: Gør koden mere organiseret, lettere at læse og vedligeholde.
- Webstedets konsistens: Definer stilarter ét sted og anvend dem på tværs af flere sider, hvilket sikrer et ensartet udseende og branding.
- Båndbreddebesparelse: Mindre HTML-kode og cachelagring af CSS-filer reducerer mængden af data, der skal overføres.
- Nemmere sideformatering: Hele webstedets udseende kan ændres ved at redigere en enkelt CSS-fil.
- Forbedret tilgængelighed: Giver mulighed for at tilpasse visningen for brugere med særlige behov (f.eks. større tekst, høj kontrast) og sikrer, at indholdet forbliver tilgængeligt, selv uden styling.
Begrænsninger ved CSS
På trods af sine mange styrker har CSS også visse begrænsninger i sin nuværende form:
- Kan ikke eksplicit erklære nyt scope uafhængigt af position: Egenskaber som
z-indexafhænger af et elements positionering (f.eks.position: relativeellerabsolute), hvilket kan skabe uønskede afhængigheder. - Begrænset kontrol over pseudo-klassers dynamiske adfærd: Selvom pseudo-klasser som
:hoverer nyttige, er der ingen indbygget måde at deaktivere eller begrænse deres effekter på. - Kan ikke navngive regler: Der er ingen måde at give en CSS-regel et navn, hvilket kunne være nyttigt for scripts, der skal referere til specifikke stilregler.
- Svært at inkludere stilarter fra én regel i en anden: Ofte skal de samme stildeklarationer gentages i flere regler. Dette problem afhjælpes dog ofte ved brug af CSS-præprocessorer som Sass eller Less.
- Kan ikke målrette specifik tekst uden at ændre opmærkningen: Med undtagelse af
::first-letterer det svært at style specifikke tekststykker uden at indpakke dem i ekstra HTML-elementer (f.eks.<span>).
Browserunderstøttelse og Kompatibilitet
Historisk set har browserunderstøttelse for CSS været en udfordring. Forskellige browsere (og forskellige versioner af samme browser) har haft varierende grad af understøttelse for CSS-funktioner, især nye funktioner i CSS3 og fremefter. Dette har ført til behovet for omfattende test på tværs af browsere og brug af teknikker som CSS-hacks eller polyfills (JavaScript-kode, der tilføjer understøttelse for moderne funktioner i ældre browsere) for at sikre et konsistent udseende.
Moderne CSS-standarder inkluderer dog funktioner som @supports-reglen (feature queries), der giver udviklere mulighed for at teste, om browseren understøtter en bestemt CSS-funktion, og kun anvende stilarter, hvis understøttelsen er til stede. Dette gør det lettere at skrive robust CSS, der fungerer godt i moderne browsere, samtidig med at ældre browsere får en grundlæggende, men stadig brugbar, visning.
CSS Frameworks og Designmetoder
For større projekter kan det være en fordel at bruge CSS frameworks eller følge specifikke designmetoder for at organisere og administrere CSS-koden. Frameworks som Bootstrap eller Foundation tilbyder prædefinerede komponenter og layouts, der kan accelerere udviklingsprocessen. Designmetoder som BEM (Block, Element, Modifier), SMACSS (Scalable and Modular Architecture for CSS) eller OOCSS (Object-Oriented CSS) giver retningslinjer for navngivning og strukturering af CSS-klasser og -regler for at forbedre vedligeholdelighed og samarbejde i et team.
Ofte Stillede Spørgsmål om CSS
Her er svar på nogle almindelige spørgsmål om CSS:
-
Hvad er forskellen på en klasse-selektor og en ID-selektor?
En ID-selektor (startende med
#) bruges til at vælge et enkelt unikt element i HTML-dokumentet. En klasse-selektor (startende med.) bruges til at vælge et eller flere elementer, der deler den samme klasse. ID'er skal være unikke; klasser kan genbruges. -
Hvad betyder cascading i CSS?
Cascading er processen, hvor browseren bestemmer, hvilke stilregler der skal anvendes på et element, når flere regler er i konflikt. Den tager højde for kildens prioritet (browser, bruger, forfatter), specificitet af selektoren og rækkefølgen af reglerne i stilarket.
-
Hvorfor er eksterne stilark bedre end inline-stilarter?
Eksterne stilark (
.css-filer) giver den bedste adskillelse af indhold og præsentation. De kan genbruges på tværs af flere sider, cachelagres af browseren for bedre ydeevne, og gør det nemt at opdatere hele webstedets design fra ét sted. Inline-stilarter bør kun bruges sparsomt, typisk til specifikke, lokale tilsidesættelser, da de har høj specificitet og er svære at vedligeholde. -
Arver alle CSS-egenskaber?
Nej. Kun visse egenskaber, primært tekst- og font-relaterede, arves automatisk af efterkommer-elementer. Egenskaber relateret til boksmodellen (som margin, padding, border) arves ikke.
Hvis du vil læse andre artikler, der ligner Forstå CSS: Stilark for Webdesign, kan du besøge kategorien Fotografi.