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

pozycja

dowolna

dziedziczenie

nie

wartość initial

none

wyjątki initial

brak

animowanie

nie (animacja nieciągła)

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

Firefox

tak

Google Chrome

tak

Safari

tak, lecz z przedrostkiem -webkit-

Opera

tak

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

  text-decoration-line:none;
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:#CBFFFF;
      }
    </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

  text-decoration-line:underline;
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:#CBFFFF;
      }
    </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

  text-decoration-line:overline;
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:#CBFFFF;
      }
    </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

  text-decoration-line:line-through;
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:#CBFFFF;
      }
    </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

  text-decoration-line:underline overline;
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:#CBFFFF;
      }
    </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>