Kurs HTML

Wprowadzenie: Linie ozdobne tekstu

Właściwość text-decoration w CSS służy do dodawania linii dekoracyjnych do tekstu, takich jak podkreślenie, nadkreślenie czy przekreślenie. Jest to właściwość zbiorcza (shorthand), która kontroluje kilka bardziej szczegółowych właściwości związanych z dekoracją tekstu.

Najczęstszym zastosowaniem jest stylizowanie linków (usuwanie domyślnego podkreślenia lub dodawanie go w stanie :hover) oraz wizualne wyróżnianie lub oznaczanie tekstu.

Właściwość zbiorcza text-decoration

Właściwość text-decoration jest skrótem dla następujących właściwości składowych:

• text-decoration-line: Określa typ linii (np. underline, overline, line-through).
• text-decoration-color: Określa kolor linii.
• text-decoration-style: Określa styl linii (np. solid, wavy, dotted, dashed, double).
• text-decoration-thickness: Określa grubość linii.

W najprostszej formie, text-decoration przyjmuje głównie wartości określające typ linii (text-decoration-line).

Podstawowe wartości dla text-decoration (i text-decoration-line):

• none: Brak jakichkolwiek linii dekoracyjnych. Używane np. do usuwania domyślnego podkreślenia linków. Jest to wartość domyślna dla większości elementów (poza np. <a>).
• underline: Dodaje linię pod tekstem (podkreślenie). Domyślna dla linków (<a>).
• overline: Dodaje linię nad tekstem (nadkreślenie).
• line-through: Dodaje linię przez środek tekstu (przekreślenie). Podobne do efektu elementów <s> i <del>.

Można również łączyć wiele typów linii, oddzielając je spacjami, np. text-decoration: underline overline;.

a {
  /* Usunięcie domyślnego podkreślenia linków */
  text-decoration: none; 
}

a:hover {
  /* Dodanie podkreślenia po najechaniu myszką */
  text-decoration: underline;
}

.przekreslony {
  text-decoration: line-through;
}

.naglowek-specjalny {
  text-decoration: underline overline dotted red 2px; /* Przykład użycia wielu wartości */
  /* Powyższe jest równoważne: */
  /* text-decoration-line: underline overline; */
  /* text-decoration-style: dotted; */
  /* text-decoration-color: red; */
  /* text-decoration-thickness: 2px; */
}

Szczegółowe właściwości dekoracji tekstu

Chociaż właściwość zbiorcza text-decoration jest często wystarczająca, czasami chcemy kontrolować poszczególne aspekty linii dekoracyjnej niezależnie.

• text-decoration-line:
  • Wartości: none, underline, overline, line-through (można łączyć spacjami).
• text-decoration-color:
  • Określa kolor linii. Może przyjmować dowolną wartość koloru CSS (nazwa, HEX, RGB, HSL, currentColor itp.).
  • Domyślnie linia przyjmuje kolor tekstu (jakby miała wartość currentColor).

  a.specjalny {
    text-decoration: underline;
    text-decoration-color: orange; /* Podkreślenie będzie pomarańczowe, nawet jeśli tekst jest inny */
  }

• text-decoration-style:
  • Określa styl linii.
  • Wartości: solid (ciągła - domyślna), double (podwójna), dotted (kropkowana), dashed (przerywana), wavy (falowana).

  .wazne-ostrzezenie {
    text-decoration: underline;
    text-decoration-style: wavy;
    text-decoration-color: red;
  }

• text-decoration-thickness:
  • Określa grubość linii.
  • Wartości: auto (domyślna), wartość długości (np. 2px, 0.1em), procent (względem 1em).

  h2 {
    text-decoration: underline;
    text-decoration-thickness: 3px; /* Grube podkreślenie */
  }

Kolejność wartości w skróconej właściwości text-decoration:

Zalecana kolejność to: <text-decoration-line> || <text-decoration-style> || <text-decoration-color> || <text-decoration-thickness>. Można pominąć dowolne wartości (przyjmą wtedy wartości domyślne), ale przynajmniej text-decoration-line jest zazwyczaj potrzebne, aby linia była widoczna (chyba że ustawiamy tylko kolor/styl/grubość dla linii dziedziczonej).

Dziedziczenie i Zastosowanie

Właściwości text-decoration-* **nie są dziedziczone**. Oznacza to, że jeśli ustawisz text-decoration: underline; dla diva, tekst bezpośrednio w divie będzie podkreślony, ale tekst w zagnieżdżonych paragrafach już nie (chyba że one same mają ustawione podkreślenie).

Jednak linie dekoracyjne są rysowane dla całego elementu, w tym dla jego potomków. Jeśli podkreślisz diva, linia będzie biegła pod całą jego zawartością, włączając w to zagnieżdżone elementy.

Uwaga: Domyślne podkreślenie linków (<a>) jest często uważane za ważny wskaźnik interaktywności i dostępności. Całkowite usuwanie podkreślenia linków (text-decoration: none;) bez zapewnienia innego, wyraźnego wizualnego wyróżnienia (np. kolorem o wysokim kontraście, zmianą wyglądu po najechaniu) może utrudnić użytkownikom identyfikację linków.