Formatowanie tekstu

color: color|transparent; - Kolor tekstu
text-align: left|right|center|justify; - Wyrównanie tekstu
text-decoration: none|underline|overline|line-through; - Dekoracja tekstu
text-transform: none|capitalize|uppercase|lowercase; - Transformacja tekstu
text-indent: length; - Wcięcie
letter-spacing: normal|length; - Odległości między literami
line-height: normal|number|length; - Odległości między wierszami
direction: ltr|rtl; - Kierunek tekstu
word-spacing: word-spacing: normal|length; - Odległości między słowami
text-shadow: h-shadow v-shadow blur-radius color|none; - Cień

Kolor tekstu

  • color: red; - kolor tekstu z tabeli kolorów

Wyrównanie tekstu

  • text-align: left; - tekst od lewej

  • text-align: right; - tekst od prawej

  • text-align: center; - tekst na środku

  • text-align: justify; - tekst wyjustowany

 

Dekoracja tekstu

  • text-decoration: none; - brak kreśleń

  • text-decoration: underline; - podkreślenie

  • text-decoration: overline; - nadkreślenie

  • text-decoration: line-through; - przekreślenie

*Możliwe są wszystkie kombinacje naraz

 

Transformacja tekstu

  • text-transform: none; - Bez zmian

  • text-transform: capitalize; - Pierwsza litera duża

  • text-transform: uppercase; - Tylko duże litery

  • text-transform: lowercase; - Tylko małe litery

 

Wcięcie w pierwszym akapicie

  • text-indent: x; - Wcięcie w pierwszym wierszu o x każdego akapitu

  • text-indent: x%; - Wcięcie w pierwszym wierszu o x% szerokości tekstu

 

Zmiana odstępów między literami

  • letter-spacing: normal; - Nomalna odległość między literami

  • letter-spacing: x; - Litery odsunięte od siebie o x.

*Gdy x ma wartość ujemną, litery zbliżają się do siebie

 

Zmiana odległości między wierszami

  • line-height: normal; - Normalna odległość między wierszami

  • line-height: n; - Odległość między wierszami o n linii

  • line-height: xpx; - Odległość między wierszami o x pikseli

  • line-height: y%; - Odległość między wierszami y % normalnej odległości

 

Kierunek tekstu

  • direction: ltr; - Kierunek tekstu od lewej do prawej

  • direction: rtl; - Kierunek tekstu od prawej do lewej

 

Zmiana odległości między słowami

  • word-spacing: normal; - Nomalna odległość między słowami

  • word-spacing: x; - Słowa odsunięte od siebie o x.

*Gdy x ma wartość ujemną, słowa zbliżają się do siebie

 

Cieniowanie tekstu

  • text-shadow: none; - Brak cienia

  • text-shadow: x y promień kolor;

x: przesunięcie cienia w poziomie,
y: przesunięcie cienia w pionie,
promień: promień rozmycia cienia,
kolor - kolor cienia
* Przy wartościach dodatnich x i y cień pojawia się z prawego dołu tekstu
Gdy x i y przyjmą wartości ujemne pozycja cienia zmieni się na lewo lub u góry tekstu

reveal-a

reveal-a

×

reveal-b

reveal-b

×

reveal-c

reveal-c

×