Ostatnio edytowany:

text-decoration-line

Autor: Virtual Patriot

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

Za pomocą właściwości text-decoration-line możemy określić jakiego typu dodatkowa linia dekoracyjna powinna zostać dodana do tekstu interesującego nas elementu HTML.

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

przeznaczenie
  • element HTML każdego typu
dziedziczenie
  • nie
wartość initial
wyjątki initial
  • brak
animowanie
  • nie

Interpretacja właściwości text-decoration-line

Firefox

tak

Google Chrome

nie

Safari

tak, lecz z przedrostkiem -webkit-

Opera

nie

Internet Explorer

nie

Edge

nie

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

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

none

Opis

Wartość none jest domyślną wartością właściwości text-decoration-line.

Domyślnie tekst elementu HTML nie posiada żadnej dodatkowej linii dekoracyjnej.

Przykład

tekst tego elementu "div" nie posiada żadnej dodatkowej linii dekoracyjnej

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

  <body>

    <div>
      tekst tego elementu "div" nie posiada żadnej dodatkowej linii dekoracyjnej
    </div>

  </body>
</html>

underline

Opis

Za pomocą wartości underline właściwości text-decoration-line możemy sprawić, że do tekstu interesującego nas elementu HTML zostanie dodana dodatkowa linia dekoracyjna typu underline. Linia dekoracyjna typu underline znajdzie się pod tekstem elementu HTML.

Przykład

tekst tego elementu "div" posiada dodatkową linię dekoracyjną typu "underline", ponieważ do tego elementu "div" została dodana właściwość "text-decoration-line" wraz z wartością "underline"

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-line:underline;
        -webkit-text-decoration-line:underline;
        padding:1em;
        font-size:1.3em;
        background-color:#AFF;
      }
    </style>
  </head>

  <body>

    <div>
      tekst tego elementu "div" posiada dodatkową linię dekoracyjną typu "underline", ponieważ do tego elementu "div" została dodana właściwość "text-decoration-line" wraz z wartością "underline"
    </div>

  </body>
</html>

overline

Opis

Za pomocą wartości overline właściwości text-decoration-line możemy sprawić, że do tekstu interesującego nas elementu HTML zostanie dodana dodatkowa linia dekoracyjna typu overline. Linia dekoracyjna typu overline znajdzie się nad tekstem elementu HTML.

Przykład

tekst tego elementu "div" posiada dodatkową linię dekoracyjną typu "overline", ponieważ do tego elementu "div" została dodana właściwość "text-decoration-line" wraz z wartością "overline"

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-line:overline;
        -webkit-text-decoration-line:overline;
        padding:1em;
        font-size:1.3em;
        background-color:#AFF;
      }
    </style>
  </head>

  <body>

    <div>
      tekst tego elementu "div" posiada dodatkową linię dekoracyjną typu "overline", ponieważ do tego elementu "div" została dodana właściwość "text-decoration-line" wraz z wartością "overline"
    </div>

  </body>
</html>

line-through

Opis

Za pomocą wartości line-through właściwości text-decoration-line możemy sprawić, że do tekstu interesującego nas elementu HTML zostanie dodana dodatkowa linia dekoracyjna typu line-through. Linia dekoracyjna typu line-through przekreśli tekst elementu HTML.

Przykład

tekst tego elementu "div" posiada dodatkową linię dekoracyjną typu "line-through", ponieważ do tego elementu "div" została dodana właściwość "text-decoration-line" wraz z wartością "line-through"

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-line:line-through;
        -webkit-text-decoration-line:line-through;
        padding:1em;
        font-size:1.3em;
        background-color:#AFF;
      }
    </style>
  </head>

  <body>

    <div>
      tekst tego elementu "div" posiada dodatkową linię dekoracyjną typu "line-through", ponieważ do tego elementu "div" została dodana właściwość "text-decoration-line" wraz z wartością "line-through"
    </div>

  </body>
</html>

kombinacja wartości

Opis

Za pomocą kombinacji kilku (oddzielonych od siebie znakiem spacji) wartości należących do właściwości text-decoration-line możemy sprawić, że do tekstu interesującego nas elementu HTML zostanie dodanych kilka dodatkowych linii dekoracyjnych różnego typu jednocześnie.

Podana przez nas kombinacja wartości właściwości "text-decoration-line" nie może zawierać wartości none oraz wartości globalnych.

Przykład

tekst tego elementu "div" posiada dodatkową linię dekoracyjną typu "underline" oraz dodatkową linię dekoracyjną typu "overline" jednocześnie, ponieważ do tego elementu "div" została dodana właściwość "text-decoration-line" wraz z następującą kombinacją wartości: "underline overline"

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-line:underline overline;
        -webkit-text-decoration-line:underline overline;
        padding:1em;
        font-size:1.3em;
        background-color:#AFF;
      }
    </style>
  </head>

  <body>

    <div>
      tekst tego elementu "div" posiada dodatkową linię dekoracyjną typu "underline" oraz dodatkową linię dekoracyjną typu "overline" jednocześnie, ponieważ do tego elementu "div" została dodana właściwość "text-decoration-line" wraz z następującą kombinacją wartości: "underline overline"
    </div>

  </body>
</html>