text-decoration-style Özelliği

text-decoration-style özelliği metnin çizgi türünü değiştirir: tek çizgi, çift çizgi, noktalı çizgi, kesik çizgi, dalgalı çizgi.

Bu özellik, text-decoration-line ve text-decoration-color özellikleri ile birlikte kullanılmalıdır. Bu özellikler, text-decoration özelliğinin etkisini genişleterek daha gelişmiş alternatifler sunar.

Sözdizimi

cssseçici {
  text-decoration-line: solid | double | dotted | dashed | wavy;
}

Değerler

Varsayılan değer: solid.

Örnek . wavy değeri

Metin şimdi kırmızı dalgalı çizgi ile altı çizili olacak:

html<div id="elem">
  Lorem ipsum dolor sit amet.
</div>

css#elem {
  text-decoration-style: wavy;
  text-decoration-color: red;
  text-decoration-line: underline;
}

Результат:

Örnek . dotted değeri

Metin şimdi kırmızı noktalı çizgi ile altı çizili olacak:

html<div id="elem">
  Lorem ipsum dolor sit amet.
</div>

css#elem {
  text-decoration-style: dotted;
  text-decoration-color: red;
  text-decoration-line: underline;
}

Результат:

Örnek . double değeri

Metin şimdi kırmızı çift çizgi ile üstü çizili olacak:

html<div id="elem">
  Lorem ipsum dolor sit amet.
</div>

css#elem {
  text-decoration-style: double;
  text-decoration-color: red;
  text-decoration-line: line-through;
}

Результат: