W lekcji dotyczącej tekstu nauczysz się jak go formatować:
Wyrównanie
Wyrównanie tekstu ustalamy za pomocą text-align.
selektor { text-align: wartość; }Możemy zastosować wartości:
- left – wyrównanie do lewej (domyślne)
- right – wyrównanie do prawej
- center – wyśrodkowanie
- justify – justowanie (wyrównanie do lewego i prawego marginesu)
p { text-align: right; }Przykład
Tekst będzie wyrównany do prawej.
Wcięcie
Wcięcie akapitu ustalamy za pomocą text-indent.
selektor { text-indent: wartość; }p { text-indent: 40px; }Przykład
W tym akapicie pierwszy wiersz ma wcięcie ustalone na 40px. Dodanie właściwości text-indent sprawia, że łatwiej odszukać poszczególne akapity.
Transformacja
Wielkość liter w tekście ustalamy za pomocą text-transform.
selektor { text-transform: wartość; }Możemy zastosować wartości:
- capitalize – pierwsza litera każdego wyrazu będzie duża
- uppercase – wszystkie litery będą duże
- lowercase – wszystkie litery będą małe
- none – bez efektu transformacji
p { text-transform: uppercase; }Przykład
W tym zdaniu wszystkie litery będą duże.
Dekoracja
Dekorację tekstu ustalamy za pomocą text-decoration.
selektor { text-decoration: wartość; }Możemy zastosować wartości:
- underline – podkreślenie
- overline – linia nad tekstem
- line-through – przekreślenie
- blink – miganie
- none – bez efektu dekoracji tekstu
p { text-decoration: underline; }Przykład
Zdanie podkreślone.
Cień
Cień czcionki ustalamy za pomocą text-shadow.
selektor { text-shadow: wartość; }W przypadku cienia wartość ma postać:
selektor { text-shadow: a b c d; }- a – położenie w poziomie
- b – położenie w pionie
- c – rozmycie
- d – kolor
p { text-shadow: 2px 2px 1px silver; }Przykład
Zdanie z zastosowaniem cienia.
Odstęp pomiędzy literami
Odstęp pomiędzy literami ustalamy za pomocą letter-spacing.
selektor { letter-spacing: wartość; }p { letter-spacing: 5px; }Przykład
Odstęp pomiędzy znakami o wartości 5px.
Odstęp pomiędzy wyrazami
Odstęp pomiędzy wyrazami ustalamy za pomocą word-spacing.
selektor { word-spacing: wartość; }p { word-spacing: 15px; }Przykład
Odstęp pomiędzy wyrazami o wartości 15px.