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`	Толкунданган сызык.

Демейки мааниси: 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;
}

Результат: