CSS text-decoration

Słownik kwalifikacji INF.03 - Tworzenie i administrowanie stronami i aplikacjami internetowymi oraz bazami danych

CSS `text-decoration`

text-decoration to właściwość CSS służąca do dodawania dekoracji tekstu, najczęściej linii: podkreślenia dolnego, nadkreślenia, przekreślenia lub usunięcia dekoracji.

W pytaniach egzaminacyjnych najważniejsze jest skojarzenie: podkreślenie tekstu = text-decoration.

Najczęstsze wartości

underline - podkreślenie dolne,
overline - linia nad tekstem,
line-through - przekreślenie tekstu,
none - brak dekoracji, często używane do usuwania podkreślenia linków.

Przykład użycia

p {
  text-decoration: underline;
}

h2 {
  text-decoration: overline;
}

a {
  text-decoration: none;
}

W tym przykładzie akapity będą podkreślone, nagłówki h2 będą miały linię nad tekstem, a linki nie będą domyślnie podkreślone.

Wersja rozbudowana

W nowszym CSS można precyzyjniej określić wygląd dekoracji tekstu:

span {
  text-decoration-line: underline;
  text-decoration-color: red;
  text-decoration-style: wavy;
}

Oznacza to czerwone, faliste podkreślenie.

Czego nie mylić?

text-decoration nie służy do wyrównywania tekstu, wcinania akapitu ani zmiany wielkości liter. Do tego używa się innych właściwości CSS, np. text-align, text-indent i text-transform.