CSS #
Når man skal ændre en skrifttype eller en farve på et website, så bruger man CSS.
Dette kapitel forklarer, hvordan man anvender CSS.
CSS er et kodesprog, som kombineres med et HTML-dokument.
CSS er en forkortelse for Cascading Stylesheets og kaldes i daglig tale stylesheets (på dansk stilark).
CSS-koden beskriver den visuelle præsentation af elementerne i HTML-dokumentet.
Visuelle præsentation kaldes også for layout eller grafisk design.
Regler #
CSS-kode består af et antal erklæringer, som man kalder regelsæt.
Der findes også andre typer erklæringer i CSS, som er udeladt for overskuelighedens skyld. Du kan finde en fuldstændig dokumentation af CSS på MDN.
Et CSS-regelsæt består af en liste af selectorer og en blok af regler.
Selectorer #
En selector matcher en regel med en eller flere HTML-elementer.
Man kan matche elementer på mange måder. Den simpleste måde er at matche på et elementnavn.
Eksempel #
body
Eksemplet matcher et body-element i et HTML-dokument.
I selector-lister adskilles hver selector med et ,.
Egenskaber #
En egenskab er lidt ligesom en attribut.
Egenskaber består af et navn og en værdi, som er adskilt med :.
Eksempel #
background-color: pink;
Eksemplet sætter en baggrundsfarve til lyserød.
Værdien af denne egenskab har typen farve.
Blokke #
En blok er en liste af CSS-egenskaber, som er adskilt med ;.
Blokke afgrænses med { og }.
Eksempel #
body {
background-color: pink;
color: white;
font-size: 22px;
-webkit-text-stroke: 4px lightblue;
}
I eksemplet er der 4 egenskaber adskilt med ;. Alle 4 egenskaber bliver
anvendt på body-elementet.
Kobling af CSS og HTML #
Man kan koble CSS til et HTML-dokument på 3 forskellige måder:
Style-attributter #
Man kan indsætte CSS-kode direkte på et element i et HTML-dokument med en style-attribut:
<p style="color: red">Et tekstafsnit.</p>
Når man kobler CSS-kode til et HTML-element på denne måde, bruger man ikke en selector.
Værdien af en style-attribut er den CSS-kode, som man ville skrive i en blok:
en liste af egenskaber.
Inline style-elementer #
Man kan indsætte CSS-kode i et style-element:
<style>
body {
color: white;
background-color: purple;
}
</style>
Eksterne CSS-filer #
Man kan linke til en separat fil som indeholder CSS-kode med et link-element:
<link rel="stylesheet" href="style.css">
Attributten rel fortæller browseren at den URL, som er angivet i attributten
href er en CSS-fil.
Man behøver ikke lukke link-elementet; det lukker af sig selv.
Kaskade og specificitet #
Kaskade og specificitet er to centrale koncepter i CSS-sproget.
Når browseren loader et website, indlæses der stylesheets fra mange forskellige kilder.
De stylesheets kan indeholde flere erklæringer, som angiver egenskaber for det samme element.
Browseren anvender en algoritme til at bestemme hvilke egenskaber, som skal anvendes.
Den algoritme kaldes en kaskaderende algoritme, fordi den minder om et vandfald som flyder ned over et antal "trin".
Hver kaskade består af erklæringer fra et stylesheet, som indlæses.
Ekstremt forsimplet fungerer kaskadealgoritmen på den måde, at når flere regler matcher det samme element, så "vinder" den regel, som indlæses sidst.