text-decoration-style xususiyati

text-decoration-style xususiyati matndagi chiziq turini o'zgartiradi: yagona chiziq, qo'sh, nuqtalar shaklida, chiziqcha shaklida, to'lqinli chiziq.

Ushbu xususiyat text-decoration-line va text-decoration-color xususiyatlari bilan birgalikda qo'llanilishi kerak. Ushbu xususiyatlar text-decoration xususiyatining ta'sirini kengaytirib, undan yanada rivojlangan analog hisoblanadi.

Sintaksis

cssselector {
  text-decoration-line: solid | double | dotted | dashed | wavy;
}

Qiymatlar

Qiymat	Tavsif
`solid`	Qattiq chiziq.
`double`	Qo'sh chiziq.
`dotted`	Nuqtalar shaklidagi chiziq.
`dashed`	Chiziqcha shaklidagi chiziq.
`wavy`	To'lqinli chiziq.

Standart qiymat: solid.

Misol . Wavy qiymati

Endi matn qizil to'lqinli chiziq bilan tagiga chiziladi:

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

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

Результат:

Misol . Dotted qiymati

Endi matn qizil nuqtalar shaklidagi chiziq bilan tagiga chiziladi:

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

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

Результат:

Misol . Double qiymati

Endi matn qizil qo'sh chiziq bilan kesiladi:

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

Результат: