Få mere at vide om CSS

  • 4 minutter

Lad os udforske flere måder, som CSS kan gøre det nemmere at administrere dit indhold på, og dit indhold mere interessant for læserne.

Kommentarer

Som med ethvert computersprog understøtter CSS kommentarer. Hvis du vil kommentere i et afsnit af CSS, skal du bruge /* comment */. I /* identificeres starten af kommentaren, og */ markerer slutningen. En CSS-kommentar kan dække flere tekstlinjer. Kommentarer er en god måde at skrive noter til dig selv eller andre udviklere på eller tage noter, mens du lærer sproget.

Vigtig

CSS-kommentarer er offentlige og tilgængelige for både browseren og brugerne af dit websted. Gem ikke følsomme oplysninger i kommentarer.

CSS-kommentarer formateres anderledes end HTML-kommentarer. Kommentarer i HTML bruger <!--comment-->-syntaksen.

Indstilling af skrifttyper

Du kan bruge CSS til at fortælle browseren, hvilken skrifttype du vil bruge til bestemt tekst. Nogle gange vil du bruge Arial til læsbarhed eller noget, der er mere lyst til stil. På følgende billede vises noget tekst i Arial og anden tekst i en skrifttype kaldet "Impact".

Skærmbillede af browsergengivelse af H T M L-tekst i to skrifttyper.

Den mest almindelige indstilling for angivelse af den skrifttype, der skal bruges på en side, er font-family. font-family er typisk angivet til en liste over skrifttyper, hvilket gør det muligt for browseren at bruge den første skrifttype, der er angivet, som understøttes. For eksempel en indstilling af Tahoma, Verdana, sans-serif forsøg på at bruge Tahoma, efterfulgt af Verdana, og til sidst en generisk sans serif-skrifttype.

Du kan også bruge andre indstillinger, f.eks. typografi, vægt og dekoration. font-style bruges til at kursivisere tekst ved at angive værdien til italic. font-weight understøtter forskellige indstillinger for fed, hvor bold er den mest almindelige. Og endelig bruges text-decoration til at underline, overlineeller line-through tekst.

CSS Resultat
font-weight: bold; demo
font-style: italic; demo
text-decoration: line-through; demo

text-decoration kan føles anderledes end de andre indstillinger, der bruges til at ændre en skrifttypes skærm. Den vigtigste forskel er, at text-decoration bruges til at anvende typografi omkring eller på teksten, men ikke ændrer selve skrifttypen. Fed og kursiv ændrer skrifttypen.

Seddel

Brug af understregning på en webside bør typisk undgås, fordi teksten kan se ud til at være et hyperlink.

Størrelse på skrifttyper

Med font-size kan du angive den skriftstørrelse, du vil bruge. CSS giver mulighed for at bruge absolut eller relativ størrelse. Absolut størrelse indstilles typisk i pixel og bruger altid den angivne størrelse. Relativ størrelse kan baseres på browserens standardstørrelse og måles i procent eller baseret på størrelsen af referenceelementet.

Seddel

Standardskriftstørrelsen for mange browsere er 16 pixel.

Absolut størrelse kan måles i pixel og angives i CSS ved hjælp af px. Hvis du vil angive en skrifttype til at være 14 pixel, kan du bruge direktivet font-size: 14px;.

Relativ størrelse for skrifttyper måles typisk ved hjælp af em eller rem. em er kort for elementet og er i forhold til enten den overordnede (em) eller roden (rem). Roden er elementet html. 1em eller 1rem er lig med størrelsen på det overordnede element eller rodelementet, mens 2em eller 2em ville være dobbelt så stor. Da skærmstørrelser kan variere, er det typisk bedst at bruge relativ størrelse, når det er muligt.

Se følgende HTML og CSS som et eksempel:

<html>
    <body>  
        <div>Sample text</div>
    </body>
</html>

html {
    font-size: 18px;
}
div {
    font-size: 14px;
}

Hvis div elementet 1em er 14 pixels, fordi den overordnede er div og sat til 14px, mens 1rem det ville være 18 pixel, fordi roden er indstillet til .html18px

1.5em for elementet div er 21 pixel (14 * 1,5 = 21), og 1.5rem vil være 27 pixel (18 * 1,5 = 27). Du kan bruge em og rem til at sikre, at resten af siden skaleres, når du opdaterer de overordnede størrelser eller rodstørrelserne.

Farver

Skriftfarven kan angives ved hjælp af egenskaben color. color kan angives til RGB-værdier (rød, grøn, blå) eller til en af mange navngivne farver, f.eks. black eller lightgray.

RGB-værdier i CSS kan være heksadecimale værdier med et præfiks med en #eller værdier på 0 til 255 i funktionen rgb. Hvis du vil angive farven til standardskyggen brun, skal du bruge color: brown;. Hvis du vil have en brugerdefineret mørklilla nuance, kan du bruge color: #7462e0.

/* named value */
div {
    color: brown;
}

/* RGB hex value */
h1 {
    color: #7462e0;
}

/* RGB function */
h2 {
    color: rgb(105, 6, 19);
}

Vigtig

Farvevalg bør altid overveje dem, der har en farvesynsmangel. Du kan bruge værktøjer som Color Safe til at hjælpe med at vælge kontrastfarver for at sikre, at dit websted er tilgængeligt for alle brugere.

Som du måske har mistanke om, er der snesevis af tilgængelige navngivne farver, og RGB-værdier tilbyder et uendeligt sæt indstillinger. Editorer som vscode.dev eller Visual Studio Code- kan hjælpe med at identificere de tilgængelige farveværdier. Begge redaktører viser en farveprøve i din CSS. Hvis du holder musen over farveprøven, får du vist en farvevælger, som du kan bruge til at indstille den ønskede farve.

Skærmbillede af farvevælger fra Visual Studio Code.