5.1 Właściwość line-height
Parametry tekstu, takie jak line-height, letter-spacing i word-spacing, odgrywają ważną rolę w stylizacji tekstu na
stronach internetowych. Pozwalają kontrolować interlinię (odległość między wierszami), odstępy między literami i
odstępy między słowami. Przyjrzyjmy się bliżej każdej z tych właściwości.
Właściwość line-height określa wysokość wiersza tekstu. Ustawia odległość między liniami bazowymi
sąsiednich wierszy tekstu, co wpływa na gęstość i czytelność tekstu.
Wartości:
- Wartość liczbowa: wartość względna bez jednostek (na przykład 1.5), która jest mnożona przez bieżący rozmiar czcionki
- Wartość procentowa: wartość względna w procentach względem bieżącego rozmiaru czcionki (na przykład 150%)
- Wartość absolutna: wartość w stałych jednostkach (na przykład w pikselach) (na przykład 24px)
- Słowo kluczowe
normal: wartość domyślna, zwykle równa 1.2
Przykład użycia:
.normal {
line-height: normal;
}
.one-point-five {
line-height: 1.5;
}
.double {
line-height: 2;
}
<body>
<p class="normal">To jest tekst z normalną wysokością linii. To jest tekst z normalną wysokością linii.</p>
<p class="one-point-five">To jest tekst z wysokością linii 1.5. To jest tekst z wysokością linii 1.5.</p>
<p class="double">To jest tekst z podwójną wysokością linii. To jest tekst z podwójną wysokością linii.</p>
</body>
5.2 Właściwość letter-spacing
Właściwość letter-spacing określa odstępy między literami, czyli dodatkową przestrzeń między symbolami
tekstu. Może być używana do poprawy czytelności lub tworzenia efektów wizualnych.
Wartości:
- Wartość absolutna: wartość w stałych jednostkach (na przykład w pikselach — 2px)
- Wartość ujemna: zmniejsza odstępy między symbolami (na przykład -1px)
- Słowo kluczowe
normal: wartość domyślna, równa 0 (bez dodatkowej przestrzeni)
Przykład użycia:
.normal {
letter-spacing: normal;
}
.wide {
letter-spacing: 2px;
}
.narrow {
letter-spacing: -1px;
}
<body>
<p class="normal">To jest tekst z normalnym odstępem między literami.</p>
<p class="wide">To jest tekst z zwiększonym odstępem między literami.</p>
<p class="narrow">To jest tekst z zmniejszonym odstępem między literami.</p>
</body>
5.3 Właściwość word-spacing
Właściwość word-spacing określa odstępy między słowami w tekście. Dodaje lub usuwa
przestrzeń między słowami, co może być używane do poprawy czytelności lub tworzenia efektów wizualnych.
Wartości:
- Wartość absolutna: wartość w stałych jednostkach (na przykład w pikselach) (na przykład 4px)
- Wartość ujemna: zmniejsza odstępy między słowami (na przykład -2px)
- Słowo kluczowe
normal: wartość domyślna, równa standardowemu odstępowi między słowami (zwykle 0)
Przykład użycia:
.normal {
word-spacing: normal;
}
.wide {
word-spacing: 4px;
}
.narrow {
word-spacing: -2px;
}
<body>
<p class="normal">To jest tekst z normalnym odstępem między słowami.</p>
<p class="wide">To jest tekst z zwiększonym odstępem między słowami.</p>
<p class="narrow">To jest tekst z zmniejszonym odstępem między słowami.</p>
</body>
GO TO FULL VERSION