Ostatnio edytowany:

text-decoration

Autor: Virtual Patriot

Opis właściwości text-decoration

Za pomocą właściwości text-decoration możemy określić kilka różnych cech dodatkowej linii dekoracyjnej tekstu interesującego nas elementu HTML.

Dodatkowe techniczne informacje o właściwości text-decoration

przeznaczenie

element HTML każdego typu

pozycja

dowolna

dziedziczenie

nie

wartość initial

none currentColor solid (lub none dla tych przeglądarek internetowych, które interpretują tylko wartość składnika line)

wyjątki initial

a, s, u, del, ins

animowanie

tak samo jak dla poszczególnej właściwości CSS, której wartość tworzy poszczególny składnik grupy wartości właściwości text-decoration

Interpretacja właściwości text-decoration

Firefox

tak

Google Chrome

tak

Safari

tak, lecz z przedrostkiem -webkit- (gdy chcemy podać wartość składnika color)

Nie interpretuje wartości składnika style.

Opera

tak

Internet Explorer

tak

Interpretuje tylko wartość składnika line.

Edge

tak

Interpretuje tylko wartość składnika line.

Zobacz więcej informacji o interpretacji właściwości .

Opis wartości właściwości text-decoration

grupa wartości

Opis

Za pomocą właściwości text-decoration oraz z góry zdefiniowanej grupy wartości możemy określić kilka różnych cech dodatkowej linii dekoracyjnej tekstu interesującego nas elementu HTML.

/* OBIE REGUŁY CSS SĄ SOBIE RÓWNOZNACZNE */

/* REGUŁA - 1 */
div {
  text-decoration:underline overline blue wavy;
}

/* REGUŁA - 2 */
div {
  text-decoration-line:underline overline;
  text-decoration-color:blue;
  text-decoration-style:wavy;
}

Składniki grupy wartości właściwości text-decoration

Ważne

podana przez nas grupa wartości właściwości text-decoration nie może zawierać wartości globalnych

Przykładowe zapisy

underline

overline blue

underline red wavy

underline overline #0F0 double

line

Składnik line nie jest wymaganym składnikiem grupy wartości właściwości text-decoration. Składnik line określa wartość właściwości text-decoration-line, czyli typ dodatkowej linii dekoracyjnej tekstu interesującego nas elementu HTML.

Wartość domyślna

none

color

Składnik color nie jest wymaganym składnikiem grupy wartości właściwości text-decoration. Składnik color określa wartość właściwości text-decoration-color, czyli kolor dodatkowej linii dekoracyjnej tekstu interesującego nas elementu HTML.

Wartość domyślna

currentColor

style

Składnik style nie jest wymaganym składnikiem grupy wartości właściwości text-decoration. Składnik style określa wartość właściwości text-decoration-style, czyli styl dodatkowej linii dekoracyjnej tekstu interesującego nas elementu HTML.

Wartość domyślna

solid

Przykład

  text-decoration:underline red wavy;
do tekstu tego elementu "div" została dodana dodatkowa linia dekoracyjna posiadająca typ "underline", kolor czerwony oraz styl "wavy", ponieważ do tego elementu "div" została dodana właściwość "text-decoration" wraz z następującą grupą wartości: "underline red wavy"

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:16px;
        font-family:Helvetica, sans-serif;
      }

      div {
        text-decoration:underline red wavy;
        -webkit-text-decoration:underline red wavy;
        padding:1em;
        font-size:1.3em;
        background-color:#CBFFFF;
      }
    </style>
  </head>

  <body>

    <div>
      do tekstu tego elementu "div" została dodana dodatkowa linia dekoracyjna posiadająca typ "underline", kolor czerwony oraz styl "wavy", ponieważ do tego elementu "div" została dodana właściwość "text-decoration" wraz z następującą grupą wartości: "underline red wavy"
    </div>

  </body>
</html>