Lära Textformateringstekniker för läsbarhet

line-height

Egenskapen line-height definierar höjden på en textrad och används ofta för att justera avståndet mellan rader av text. Som standard beror line-height på textens typsnitt och bestäms av webbläsaren.

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

multiplier är ett värde utan enheter (t.ex. 1.5). I detta fall kommer radhöjden att vara värdet som är 1.5 gånger större än värdet för font-size;
value in px är ett specifikt värde (t.ex. 24px) som radhöjden kommer att motsvara;
value in em är ett värde (t.ex. 1.4em) som fungerar liknande som multiplier. Webbläsaren kontrollerar värdet för font-size, multiplicerar det med 1.4, och detta resultat blir radhöjden;
percent är ett värde (t.ex. 120%) som fungerar som en multiplier. Värdet för font-size multipliceras med 1.2, vilket bestämmer radhöjdens värde.

index.html

styles.css

Utdata

letter-spacing

Egenskapen letter-spacing anger det horisontella avståndet mellan tecken i text.

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

normal är standardavståndet mellan tecken;
value in px är ett specifikt värde som lägger till extra utrymme mellan tecken;
value in em fungerar på liknande sätt som px, men avståndet är relativt till font-size.

index.html

styles.css

Utdata

word-spacing

Egenskapen word-spacing definierar avståndet mellan ord i texten. Den ökar utrymmet mellan orden. Om det finns skiljetecken i texten, och de är skrivna tillsammans med ord, kommer de fortfarande att stå ihop, eftersom det inte finns något mellanrum mellan dem.

word-spacing: value | inherit | normal

value är ett specifikt värde som anger avståndet mellan ord;
inherit ärver ordavståndet från överordnat element;
normal är standardavståndet mellan ord.

index.html

styles.css

Utdata

text-shadow

Egenskapen text-shadow lägger till en skugga på texten.

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

X set justerar skuggans horisontella position. Positiva värden flyttar skuggan åt höger, och negativa värden flyttar den åt vänster;
Y set justerar skuggans vertikala position. Positiva värden flyttar skuggan nedåt, och negativa värden flyttar den uppåt;
blur radius definierar hur suddig skuggan ser ut. Högre värden gör skuggan mjukare och mer diffus. Standardvärdet är 0 om inget anges;
color anger skuggans färg i valfritt giltigt färgformat. Om inget anges används textfärgen som standard.

index.html

styles.css

Utdata

Obs

Vid textformatering finns det inga strikta regler som bestämmer vilka värden som måste användas i specifika situationer. Valet av textformateringsegenskaper och värden beror på projektets unika krav och designvisionen.

1. Vilken CSS-egenskap används för att skapa en visuell effekt som lägger till en skugga på text?

2. Vilken CSS-egenskap justerar avståndet mellan ord i en text?

Var allt tydligt?

Tack för dina kommentarer!

Avsnitt 2. Kapitel 2

Fråga AI

Fråga vad du vill eller prova någon av de föreslagna frågorna för att starta vårt samtal

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

Svep för att visa menyn

line-height

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

multiplier är ett värde utan enheter (t.ex. 1.5). I detta fall kommer radhöjden att vara värdet som är 1.5 gånger större än värdet för font-size;
value in px är ett specifikt värde (t.ex. 24px) som radhöjden kommer att motsvara;
value in em är ett värde (t.ex. 1.4em) som fungerar liknande som multiplier. Webbläsaren kontrollerar värdet för font-size, multiplicerar det med 1.4, och detta resultat blir radhöjden;
percent är ett värde (t.ex. 120%) som fungerar som en multiplier. Värdet för font-size multipliceras med 1.2, vilket bestämmer radhöjdens värde.

index.html

styles.css

Utdata

letter-spacing

Egenskapen letter-spacing anger det horisontella avståndet mellan tecken i text.

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

normal är standardavståndet mellan tecken;
value in px är ett specifikt värde som lägger till extra utrymme mellan tecken;
value in em fungerar på liknande sätt som px, men avståndet är relativt till font-size.

index.html

styles.css

Utdata

word-spacing

word-spacing: value | inherit | normal

value är ett specifikt värde som anger avståndet mellan ord;
inherit ärver ordavståndet från överordnat element;
normal är standardavståndet mellan ord.

index.html

styles.css

Utdata

text-shadow

Egenskapen text-shadow lägger till en skugga på texten.

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

X set justerar skuggans horisontella position. Positiva värden flyttar skuggan åt höger, och negativa värden flyttar den åt vänster;
Y set justerar skuggans vertikala position. Positiva värden flyttar skuggan nedåt, och negativa värden flyttar den uppåt;
blur radius definierar hur suddig skuggan ser ut. Högre värden gör skuggan mjukare och mer diffus. Standardvärdet är 0 om inget anges;
color anger skuggans färg i valfritt giltigt färgformat. Om inget anges används textfärgen som standard.

index.html

styles.css

Utdata

Obs

Vid textformatering finns det inga strikta regler som bestämmer vilka värden som måste användas i specifika situationer. Valet av textformateringsegenskaper och värden beror på projektets unika krav och designvisionen.

1. Vilken CSS-egenskap används för att skapa en visuell effekt som lägger till en skugga på text?

2. Vilken CSS-egenskap justerar avståndet mellan ord i en text?

Var allt tydligt?

Tack för dina kommentarer!

Avsnitt 2. Kapitel 2