Свойство CSS text-decoration
Свойство text-decoration используется для установки декорирования текста.
В CSS3 это сокращённая запись для следующих свойств:
Если значение одного из этих свойств отсутствует, автоматически будет установлено значение по умолчанию. Обратите внимание, что text-decoration-line не является обязательным; если он опущен, по умолчанию используется none.
В спецификации CSS1 свойство text-decoration не было сокращённой записью и имело следующие значения:
- none
- underline
- overline
- line-through
- blink
| Начальное значение | none currentColor solid |
|---|---|
| Применяется к | Всем элементам. Также применяется к ::first-letter и ::first-line. |
| Наследуется | Нет. |
| Анимация | Нет. |
| Версия | CSS1, CSS3 |
| Синтаксис DOM | object.style.textDecoration = "dashed"; |
Синтаксис
Синтаксис свойства CSS text-decoration
text-decoration: text-decoration-line text-decoration-color text-decoration-style | initial | inherit;Обратите внимание, что в сокращённом синтаксисе можно комбинировать несколько значений линий, например, underline overline.
Пример свойства text-decoration:
Пример свойства CSS text-decoration со значениями overline, line-through, underline и overline
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.a {
text-decoration: overline;
}
.b {
text-decoration: line-through;
}
.c {
text-decoration: underline;
}
.d {
text-decoration: underline overline;
}
</style>
</head>
<body>
<h2>Text-decoration property example</h2>
<p class="a">Lorem Ipsum is simply dummy text...</p>
<p class="b">Lorem Ipsum is simply dummy text...</p>
<p class="c">Lorem Ipsum is simply dummy text...</p>
<p class="d">Lorem Ipsum is simply dummy text...</p>
</body>
</html>Результат
Пример свойства text-decoration с указанным цветом:
Пример свойства CSS text-decoration со свойством text-decoration-color
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
text-decoration: underline;
text-decoration-color: #1c87c9;
}
</style>
</head>
<body>
<h2>Text-decoration property example</h2>
<p>Lorem ipsum is simply dummy text...</p>
</body>
</html>INFO
Префикс -webkit- здесь опущен, так как современные браузеры полностью поддерживают стандартное свойство.
Пример свойства text-decoration с указанным стилем:
Пример свойства CSS text-decoration со свойствами text-decoration-line и text-decoration-style
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
text-decoration-line: underline;
}
div.t1 {
text-decoration-style: dotted;
}
div.t2 {
text-decoration-style: wavy;
}
div.t3 {
text-decoration-style: solid;
}
div.t4 {
text-decoration-line: overline underline;
text-decoration-style: double;
}
</style>
</head>
<body>
<h2>Text-decoration property example</h2>
<div class="t1">Lorem ipsum is simply dummy text...</div>
<br />
<div class="t2">Lorem ipsum is simply dummy text...</div>
<br />
<div class="t3">Lorem ipsum is simply dummy text...</div>
<br />
<div class="t4">Lorem ipsum is simply dummy text...</div>
</body>
</html>Значения
| Значение | Описание |
|---|---|
| text-decoration-line | Определяет вид декорирования текста. |
| text-decoration-color | Определяет цвет декорирования текста. |
| text-decoration-style | Определяет стиль декорирования текста. |
| initial | Заставляет свойство использовать значение по умолчанию. |
| inherit | Наследует свойство от родительского элемента. |
Практика
Какое свойство CSS изменяет отображение встроенного текста, добавляя эффекты, такие как подчёркивание или перечёркивание?