text-decoration-style сипаттамасы

text-decoration-style сипаттамасы мәтін сызығының түрін өзгертеді: жалғыз сызық, қос, нүктелер түріндегі, сызықшалар түріндегі, толқынды сызық.

Бұл сипаттаманы text-decoration-line және text-decoration-color сипаттамаларымен бірге қолдану керек. Бұл сипаттамалар text-decoration сипаттамасының әрекетін кеңейтіп, оның жетілдірілген аналогтары болып табылады.

Синтаксис

cssселектор {
  text-decoration-style: 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;
}

Результат: