Ostatnio edytowany:

text-decoration-style

Autor: Virtual Patriot

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

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

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

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

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

Firefox

tak

Google Chrome

nie

Safari

nie

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-style

solid

Opis

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

Domyślnie, gdy do tekstu elementu HTML za pomocą właściwości text-decoration-line dodamy dodatkową linię dekoracyjną, wspomniana dodatkowa linia dekoracyjna będzie posiadała styl solid. Styl solid oznacza pojedynczą ciągłą linię.

Przykład

stylem dodatkowej linii dekoracyjnej tekstu tego elementu "div" jest styl "solid"

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>
      stylem dodatkowej linii dekoracyjnej tekstu tego elementu "div" jest styl "solid"
    </div>

  </body>
</html>

double

Opis

Za pomocą wartości double właściwości text-decoration-style możemy sprawić, że dodatkowa linia dekoracyjna tekstu interesującego nas elementu HTML będzie posiadała styl double. Styl double oznacza podwójną ciągłą linię.

Przykład

stylem dodatkowej linii dekoracyjnej tekstu tego elementu "div" jest styl "double", ponieważ do tego elementu "div" została dodana właściwość "text-decoration-style" wraz z wartością "double"

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

  <body>

    <div>
      stylem dodatkowej linii dekoracyjnej tekstu tego elementu "div" jest styl "double", ponieważ do tego elementu "div" została dodana właściwość "text-decoration-style" wraz z wartością "double"
    </div>

  </body>
</html>

dotted

Opis

Za pomocą wartości dotted właściwości text-decoration-style możemy sprawić, że dodatkowa linia dekoracyjna tekstu interesującego nas elementu HTML będzie posiadała styl dotted. Styl dotted oznacza pojedynczą wykropkowaną linię.

Przykład

stylem dodatkowej linii dekoracyjnej tekstu tego elementu "div" jest styl "dotted", ponieważ do tego elementu "div" została dodana właściwość "text-decoration-style" wraz z wartością "dotted"

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

  <body>

    <div>
      stylem dodatkowej linii dekoracyjnej tekstu tego elementu "div" jest styl "dotted", ponieważ do tego elementu "div" została dodana właściwość "text-decoration-style" wraz z wartością "dotted"
    </div>

  </body>
</html>

dashed

Opis

Za pomocą wartości dashed właściwości text-decoration-style możemy sprawić, że dodatkowa linia dekoracyjna tekstu interesującego nas elementu HTML będzie posiadała styl dashed. Styl dashed oznacza pojedynczą przerywaną linię.

Przykład

stylem dodatkowej linii dekoracyjnej tekstu tego elementu "div" jest styl "dashed", ponieważ do tego elementu "div" została dodana właściwość "text-decoration-style" wraz z wartością "dashed"

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

  <body>

    <div>
      stylem dodatkowej linii dekoracyjnej tekstu tego elementu "div" jest styl "dashed", ponieważ do tego elementu "div" została dodana właściwość "text-decoration-style" wraz z wartością "dashed"
    </div>

  </body>
</html>

wavy

Opis

Za pomocą wartości wavy właściwości text-decoration-style możemy sprawić, że dodatkowa linia dekoracyjna tekstu interesującego nas elementu HTML będzie posiadała styl wavy. Styl wavy oznacza pojedynczą falistą linię.

Przykład

stylem dodatkowej linii dekoracyjnej tekstu tego elementu "div" jest styl "wavy", ponieważ do tego elementu "div" została dodana właściwość "text-decoration-style" wraz z wartością "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-line:underline;
        text-decoration-style:wavy;
        -webkit-text-decoration-line:underline;
        -webkit-text-decoration-style:wavy;
        padding:1em;
        font-size:1.3em;
        background-color:#AFF;
      }
    </style>
  </head>

  <body>

    <div>
      stylem dodatkowej linii dekoracyjnej tekstu tego elementu "div" jest styl "wavy", ponieważ do tego elementu "div" została dodana właściwość "text-decoration-style" wraz z wartością "wavy"
    </div>

  </body>
</html>