3

kurs

css

Lekcja 5: Tekst

css

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.

comments powered by Disqus

Do góry