Lære Teknikker for Tekstformatering for Lesbarhet

line-height

Egenskapen line-height definerer høyden på en linje og brukes ofte for å justere avstanden mellom tekstlinjer. Som standard avhenger line-height av tekstens skrifttype og bestemmes av nettleseren.

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

multiplier er en verdi uten enheter (f.eks. 1.5). I dette tilfellet vil linjehøyden være verdien som er 1.5 ganger større enn verdien for font-size;
value in px er en spesifikk verdi (f.eks. 24px) som linjehøyden vil være lik;
value in em er en verdi (f.eks. 1.4em) som fungerer på samme måte som multiplier. Nettleseren vil sjekke verdien for font-size, multiplisere denne verdien med 1.4, og dette resultatet vil være linjehøyden;
percent er en verdi (f.eks. 120%) som fungerer som en multiplier. Verdien for font-size vil bli multiplisert med 1.2, noe som bestemmer linjehøyden.

index.html

styles.css

Utdata

letter-spacing

Egenskapen letter-spacing angir horisontal avstand mellom tegn i teksten.

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

normal er standardavstanden mellom tegn;
value in px er en spesifikk verdi som legger til ekstra mellomrom mellom tegn;
value in em fungerer på samme måte som px, men avstanden er relativ til font-size.

index.html

styles.css

Utdata

word-spacing

Egenskapen word-spacing definerer avstanden mellom ordene i teksten. Den øker mellomrommet mellom ordene. Hvis det finnes skilletegn i teksten, og de er skrevet sammen med ordene, vil de fortsatt stå sammen, siden det ikke er noe mellomrom mellom dem.

word-spacing: value | inherit | normal

value er en spesifikk verdi som angir avstanden mellom ordene;
inherit arver ordavstanden fra overordnet element;
normal er standard avstand mellom ordene.

index.html

styles.css

Utdata

text-shadow

Egenskapen text-shadow legger til en skygge på teksten.

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

X set justerer den horisontale plasseringen av skyggen. Positive verdier flytter skyggen til høyre, og negative verdier flytter den til venstre;
Y set justerer den vertikale plasseringen av skyggen. Positive verdier flytter skyggen nedover, og negative verdier flytter den oppover;
blur radius definerer hvor uklar skyggen fremstår. Høyere verdier gjør skyggen mykere og mer diffus. Standardverdien er 0 hvis ikke spesifisert;
color angir skyggefargen i et hvilket som helst gyldig fargeformat. Hvis ikke spesifisert, brukes tekstfargen som standard.

index.html

styles.css

Utdata

Merk

Ved tekstformatering finnes det ingen strenge regler som bestemmer hvilke verdier som må brukes i bestemte situasjoner. Valg av tekstformateringsegenskaper og -verdier avhenger av de unike kravene til hvert prosjekt og det visuelle designet.

1. Hvilken CSS-egenskap brukes for å lage en visuell effekt som legger til skygge på tekst?

2. Hvilken CSS-egenskap justerer avstanden mellom ord i en tekst?

Alt var klart?

Takk for tilbakemeldingene dine!

Seksjon 2. Kapittel 2

Spør AI

Spør om hva du vil, eller prøv ett av de foreslåtte spørsmålene for å starte chatten vår

Suggested prompts:

Can you explain the difference between line-height, letter-spacing, and word-spacing?

How do I choose the right values for these text properties in my project?

Can you show more examples of using text-shadow with different colors or effects?

Awesome!

Completion rate improved to 2.56

Sveip for å vise menyen

line-height

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

multiplier er en verdi uten enheter (f.eks. 1.5). I dette tilfellet vil linjehøyden være verdien som er 1.5 ganger større enn verdien for font-size;
value in px er en spesifikk verdi (f.eks. 24px) som linjehøyden vil være lik;
value in em er en verdi (f.eks. 1.4em) som fungerer på samme måte som multiplier. Nettleseren vil sjekke verdien for font-size, multiplisere denne verdien med 1.4, og dette resultatet vil være linjehøyden;
percent er en verdi (f.eks. 120%) som fungerer som en multiplier. Verdien for font-size vil bli multiplisert med 1.2, noe som bestemmer linjehøyden.

index.html

styles.css

Utdata

letter-spacing

Egenskapen letter-spacing angir horisontal avstand mellom tegn i teksten.

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

normal er standardavstanden mellom tegn;
value in px er en spesifikk verdi som legger til ekstra mellomrom mellom tegn;
value in em fungerer på samme måte som px, men avstanden er relativ til font-size.

index.html

styles.css

Utdata

word-spacing

word-spacing: value | inherit | normal

value er en spesifikk verdi som angir avstanden mellom ordene;
inherit arver ordavstanden fra overordnet element;
normal er standard avstand mellom ordene.

index.html

styles.css

Utdata

text-shadow

Egenskapen text-shadow legger til en skygge på teksten.

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

X set justerer den horisontale plasseringen av skyggen. Positive verdier flytter skyggen til høyre, og negative verdier flytter den til venstre;
Y set justerer den vertikale plasseringen av skyggen. Positive verdier flytter skyggen nedover, og negative verdier flytter den oppover;
blur radius definerer hvor uklar skyggen fremstår. Høyere verdier gjør skyggen mykere og mer diffus. Standardverdien er 0 hvis ikke spesifisert;
color angir skyggefargen i et hvilket som helst gyldig fargeformat. Hvis ikke spesifisert, brukes tekstfargen som standard.

index.html

styles.css

Utdata

Merk

Ved tekstformatering finnes det ingen strenge regler som bestemmer hvilke verdier som må brukes i bestemte situasjoner. Valg av tekstformateringsegenskaper og -verdier avhenger av de unike kravene til hvert prosjekt og det visuelle designet.

1. Hvilken CSS-egenskap brukes for å lage en visuell effekt som legger til skygge på tekst?

2. Hvilken CSS-egenskap justerer avstanden mellom ord i en tekst?

Alt var klart?

Takk for tilbakemeldingene dine!

Seksjon 2. Kapittel 2