Udforsk CSS-begreber

  • 4 minutter

CSS-struktur

Hvis html-siden skal vise al tekst mellem h1-mærker med farven orange, kan du bruge den CSS-kode, der følger efter.

h1 {
    color: orange;
}

Ovenstående CSS-kode starter med (h1), der vælger den HTML-kode, du vil formatere. Den h1 i eksemplet kaldes en selektor.

Bemærk koden i krøllede klammeparenteser, color: orange;t deklarerer, hvordan det valgte h1-mærke skal formateres. CSS-koden i krøllede klammeparenteser { }, f.eks. color: orange; kaldes en erklæring.

Eksempelerklæringen indeholder en egenskab, color, som er adskilt fra en værdi, orange, med et kolon (:), og slutningen af indstillingen er markeret med et semikolon (;).

Seddel

Der er ingen grund til at huske alle tilgængelige egenskaber og værdier i CSS. Der er mange websteder, som du kan henvise til. Værktøjer som vscode.dev eller Visual Studio Code tilbyder også autofuldførelsesmuligheder, der kan hjælpe dig, når du opretter en CSS.

Integrer en CSS-fil

En hurtig måde at tilføje typografioplysninger på er ved at placere dem i html-sidens head-koder ved hjælp af en style attribut. Denne metode betragtes ikke som bedste praksis, men er OK at bruge til læring og test.

I det følgende eksempel tilføjes <style>-mærket med formateringsoplysninger, så alle h1 vises grå. Da det er den eneste formatering, vises resten af HTML-koden med browserens standardtypografi.

<!DOCTYPE html>
<html>
    <head>
        <!-- Here's the styling information -->
        <style>
            h1 {
                color: gray;
               }
        </style>
    </head>
    <body>
        <h1>Welcome</h1>
        <p>This is my site</p>
    </body>
</html>

Når teksten "Velkommen" i <h1> vises i en browser, vises den grå.

Skærmbillede af gengivet H T M L-side viser overskriften 1 i grå.

Anvend typografier på HTML ved hjælp af CSS

Når du føjer typografier til HTML (Hypertext Markup Language), er det bedst at foretage formateringen i en separat CSS-fil. Når flere HTML-filer bruger den samme CSS, har de et ensartet udseende. Desuden er det nemmere at opdatere én CSS-fil end at skulle opdatere hver enkelt HTML-fil.

Hvis du vil referere til CSS-filen, skal du bruge elementet link.

link har to attributter, rel og href. rel bruges til at identificere den ressourcetype, du refererer til, typografiark til typografiark. href bruges til at identificere stien til CSS-filen. Hvis CSS-filen var i samme mappe som HTML-filen og havde navnet style.css, kan du bruge følgende til at referere til den fra din side:

<link rel="stylesheet" href="style.css">

Nu har du mindst to filer, en .html fil og en .css fil. Det forrige eksempel ville have en HTML-fil, der er sammenkædet med CSS.

<!DOCTYPE html>
<html>
    <head>
        <title>Welcome</title>
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
        <h1>Welcome</h1>
        <p>This is my site</p>
    </body>
</html>