Свойство text-decoration-style

Свойство text-decoration-style матндаги чизиқ турини ўзгартиради: ягона чизиқ, қоʻш, нуқталар шаклида, чизиқчалар шаклида, тўлқинли чизиқ.

Свойство text-decoration-line ва text-decoration-color свойстволари билан бирга ишлатилиши керак. Бу свойстволар text-decoration свойствосининг таъсирини кенгайтириб, ижро этиш жиҳатидан илғор вариантдир.

Синтаксис

cssселектор {
  text-decoration-line: solid | double | dotted | dashed | wavy;
}

Қийматлар

Қиймат	Тасниф
`solid`	Қаттиқ чизиқ.
`double`	Қоʻш чизиқ.
`dotted`	Нуқталар шаклидаги чизиқ.
`dashed`	Чизиқчалар шаклидаги чизиқ.
`wavy`	Тўлқинли чизиқ.

Дasturiy қиймат: solid.

Мисол . Wavy қиймати

Ҳозир матн қизил тўлқинли чизиқ билан таги чизилган бўлади:

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

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

Результат:

Мисол . Dotted қиймати

Ҳозир матн қизил нуқталар шаклидаги чизиқ билан таги чизилган бўлади:

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

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

Результат:

Мисол . Double қиймати

Ҳозир матн қизил қоʻш чизиқ билан кесиб ташланган бўлади:

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

Результат: