Lära Textformateringstekniker för Läsbarhet

line-height

line-height styr det vertikala avståndet mellan textrader. Webbläsare sätter ett standardvärde baserat på typsnittet, men det kan anpassas med flera format:

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

multiplier enhetslöst värde som 1.5 multiplicerar font-size;
value in px specifik höjd, t.ex. 24px;
value in em relativt värde, liknande multiplier (1.4em = font-size × 1.4);
percent fungerar som multiplier (120% = font-size × 1.2).

index.html

styles.css

Utdata

letter-spacing

letter-spacing anger horisontellt avstånd mellan tecken.

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

normal: standardavstånd;
value in px: fast extra avstånd;
value in em: avstånd relativt till font-size.

index.html

styles.css

Utdata

word-spacing

word-spacing justerar avståndet mellan ord.

word-spacing: value | inherit | normal

value: anpassat avstånd;
inherit: använder föräldraelementets avstånd;
normal: standardavstånd.

index.html

styles.css

Utdata

text-shadow

text-shadow lägger till skuggor på text. Den accepterar fyra värden:

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

X set: horisontell förskjutning;
Y set: vertikal förskjutning;
blur radius: mjukhet på skuggan (0 = skarp);
color: valfri giltig färg, standard är aktuell textfärg.

index.html

styles.css

Utdata

Observera

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 designvision.

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

Svep för att visa menyn

line-height

line-height styr det vertikala avståndet mellan textrader. Webbläsare sätter ett standardvärde baserat på typsnittet, men det kan anpassas med flera format:

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

multiplier enhetslöst värde som 1.5 multiplicerar font-size;
value in px specifik höjd, t.ex. 24px;
value in em relativt värde, liknande multiplier (1.4em = font-size × 1.4);
percent fungerar som multiplier (120% = font-size × 1.2).

index.html

styles.css

Utdata

letter-spacing

letter-spacing anger horisontellt avstånd mellan tecken.

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

normal: standardavstånd;
value in px: fast extra avstånd;
value in em: avstånd relativt till font-size.

index.html

styles.css

Utdata

word-spacing

word-spacing justerar avståndet mellan ord.

word-spacing: value | inherit | normal

value: anpassat avstånd;
inherit: använder föräldraelementets avstånd;
normal: standardavstånd.

index.html

styles.css

Utdata

text-shadow

text-shadow lägger till skuggor på text. Den accepterar fyra värden:

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

X set: horisontell förskjutning;
Y set: vertikal förskjutning;
blur radius: mjukhet på skuggan (0 = skarp);
color: valfri giltig färg, standard är aktuell textfärg.

index.html

styles.css

Utdata

Observera

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