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

pozycja

dowolna

dziedziczenie

nie

wartość initial

solid

wyjątki initial

brak

animowanie

nie (animacja nieciągła)

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

Firefox

tak

Google Chrome

tak

Safari

nie

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

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

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

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

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

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