Autor publikacji: Virtual Patriot - Administrator

text-decoration

Data publikacji: Marzec 30 2012
Ostatnio edytowano: Wrzesień 07 2020

Zobacz również: w3.org - text-decoration property (LV3)

Przeznaczenie 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.

Informacje dodatkowe: brak

Informacje techniczne 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`

tak

Nie interpretuje wartości składnika style.

tak

Interpretuje tylko wartość składnika line.

tak

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

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

grupa wartości

Wyjaśnienie

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`

            line color style

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.

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.

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.

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;
        padding:1em;
        font-size:1.3em;
        background-color:#7DCDE8;
      }
    </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>