Lære Teknikker til Tekstformatering for Læsbarhed

line-height

Egenskaben line-height definerer højden på en linje og bruges ofte til at justere afstanden mellem tekstlinjer. Som standard afhænger line-height af tekstens skrifttype og bestemmes af browseren.

line-height: multiplier | value in px | value in em | percent

multiplier er en værdi uden enhed (f.eks. 1.5). I dette tilfælde vil linjehøjden være værdien, der er 1.5 gange større end værdien af font-size;
value in px er en specifik værdi (f.eks. 24px), som linjehøjden vil være lig med;
value in em er en værdi (f.eks. 1.4em), der fungerer på samme måde som multiplier. Browseren vil tage værdien af font-size, gange den med 1.4, og dette resultat vil være linjehøjden;
percent er en værdi (f.eks. 120%), der fungerer som en multiplier. Værdien af font-size vil blive ganget med 1.2, hvilket bestemmer linjehøjden.

index.html

styles.css

Output

letter-spacing

Egenskaben letter-spacing angiver den horisontale afstand mellem teksttegn.

letter-spacing: normal | value in px | value in em

normal er standardafstanden mellem tegn;
value in px er en specifik værdi, der tilføjer ekstra afstand mellem tegn;
value in em fungerer på samme måde som px, men afstanden er relativ til font-size.

index.html

styles.css

Output

word-spacing

Egenskaben word-spacing definerer afstanden mellem ord i teksten. Den øger afstanden mellem ordene. Hvis der er tegnsætningstegn i teksten, og de er skrevet sammen med ordene, vil de stadig stå sammen, da der ikke indsættes mellemrum mellem dem.

word-spacing: value | inherit | normal

value er en specifik værdi, der angiver afstanden mellem ord;
inherit arver ordmellemrummet fra det overordnede element;
normal er standardafstanden mellem ord.

index.html

styles.css

Output

text-shadow

Egenskaben text-shadow tilføjer en skygge til teksten.

text-shadow: "X set" | "Y set" | "blur radius" | "color"

X set justerer den vandrette placering af skyggen. Positive værdier flytter skyggen til højre, og negative værdier flytter den til venstre;
Y set justerer den lodrette placering af skyggen. Positive værdier flytter skyggen nedad, og negative værdier flytter den opad;
blur radius definerer, hvor sløret skyggen fremstår. Højere værdier gør skyggen blødere og mere diffus. Standardværdien er 0, hvis ikke angivet;
color angiver skyggefarven i et hvilket som helst gyldigt farveformat. Hvis ikke angivet, bruges tekstfarven som standard.

index.html

styles.css

Output

Bemærk

Ved tekstformatering findes der ingen faste regler for, hvilke værdier der skal anvendes i bestemte situationer. Valget af tekstformateringsegenskaber og værdier afhænger af de unikke krav for hvert projekt og det ønskede design.

1. Hvilken CSS-egenskab bruges til at skabe en visuel effekt, der tilføjer en skygge til tekst?

2. Hvilken CSS-egenskab justerer afstanden mellem ord i en tekst?

Var alt klart?

Tak for dine kommentarer!

Sektion 2. Kapitel 2

Spørg AI

Spørg om hvad som helst eller prøv et af de foreslåede spørgsmål for at starte vores chat

Awesome!

Completion rate improved to 2.56

Stryg for at vise menuen

line-height

line-height: multiplier | value in px | value in em | percent

multiplier er en værdi uden enhed (f.eks. 1.5). I dette tilfælde vil linjehøjden være værdien, der er 1.5 gange større end værdien af font-size;
value in px er en specifik værdi (f.eks. 24px), som linjehøjden vil være lig med;
value in em er en værdi (f.eks. 1.4em), der fungerer på samme måde som multiplier. Browseren vil tage værdien af font-size, gange den med 1.4, og dette resultat vil være linjehøjden;
percent er en værdi (f.eks. 120%), der fungerer som en multiplier. Værdien af font-size vil blive ganget med 1.2, hvilket bestemmer linjehøjden.

index.html

styles.css

Output

letter-spacing

Egenskaben letter-spacing angiver den horisontale afstand mellem teksttegn.

letter-spacing: normal | value in px | value in em

normal er standardafstanden mellem tegn;
value in px er en specifik værdi, der tilføjer ekstra afstand mellem tegn;
value in em fungerer på samme måde som px, men afstanden er relativ til font-size.

index.html

styles.css

Output

word-spacing

word-spacing: value | inherit | normal

value er en specifik værdi, der angiver afstanden mellem ord;
inherit arver ordmellemrummet fra det overordnede element;
normal er standardafstanden mellem ord.

index.html

styles.css

Output

text-shadow

Egenskaben text-shadow tilføjer en skygge til teksten.

text-shadow: "X set" | "Y set" | "blur radius" | "color"

X set justerer den vandrette placering af skyggen. Positive værdier flytter skyggen til højre, og negative værdier flytter den til venstre;
Y set justerer den lodrette placering af skyggen. Positive værdier flytter skyggen nedad, og negative værdier flytter den opad;
blur radius definerer, hvor sløret skyggen fremstår. Højere værdier gør skyggen blødere og mere diffus. Standardværdien er 0, hvis ikke angivet;
color angiver skyggefarven i et hvilket som helst gyldigt farveformat. Hvis ikke angivet, bruges tekstfarven som standard.

index.html

styles.css

Output

Bemærk

Ved tekstformatering findes der ingen faste regler for, hvilke værdier der skal anvendes i bestemte situationer. Valget af tekstformateringsegenskaber og værdier afhænger af de unikke krav for hvert projekt og det ønskede design.

1. Hvilken CSS-egenskab bruges til at skabe en visuel effekt, der tilføjer en skygge til tekst?

2. Hvilken CSS-egenskab justerer afstanden mellem ord i en tekst?

Var alt klart?

Tak for dine kommentarer!

Sektion 2. Kapitel 2