CSS Оформление текста
CSS Свойство text-decoration
В этой главе вы узнаете о следующих свойствах:
text-decoration-linetext-decoration-colortext-decoration-styletext-decoration-thicknesstext-decoration
Добавить декоративную строку к тексту
Свойство text-decoration-line используется для добавления декоративной строки к тексту.
Совет: Вы можете комбинировать более одного значения, например, надпись и подчеркивание, чтобы отображать строки как над текстом, так и под ним.
Пример
h1 {
text-decoration-line: overline;
}
h2 {
text-decoration-line: line-through;
}
h3 {
text-decoration-line: underline;
}
p {
text-decoration-line:
overline underline;
}
Попробуйте сами »
Примечание: Не рекомендуется подчеркивать текст, который не является ссылкой, так как это часто сбивает читателя с толку.
Указать цвет для декоративной линии
Свойство text-decoration-color используется для установки цвета линии оформления.
Пример
h1 {
text-decoration-line: overline;
text-decoration-color:
red;
}
h2 {
text-decoration-line: line-through;
text-decoration-color:
blue;
}
h3 {
text-decoration-line: underline;
text-decoration-color:
green;
}
p {
text-decoration-line:
overline underline;
text-decoration-color: purple;
}
Попробуйте сами »
Указать стиль для линии оформления
Свойство text-decoration-style используется для установки стиля линии оформления.
Пример
h1 {
text-decoration-line: underline;
text-decoration-style:
solid;
}
h2 {
text-decoration-line: underline;
text-decoration-style: double;
}
h3 {
text-decoration-line: underline;
text-decoration-style: dotted;
}
p.ex1 {
text-decoration-line: underline;
text-decoration-style: dashed;
}
p.ex2 {
text-decoration-line: underline;
text-decoration-style: wavy;
}
p.ex3 {
text-decoration-line:
underline;
text-decoration-color: red;
text-decoration-style: wavy;
}
Попробуйте сами »
Указать толщину для декоративной линии
Свойство text-decoration-thickness используется для установки толщины декоративной линии.
Пример
h1 {
text-decoration-line: underline;
text-decoration-thickness: auto;
}
h2 {
text-decoration-line:
underline;
text-decoration-thickness: 5px;
}
h3 {
text-decoration-line: underline;
text-decoration-thickness: 25%;
}
p {
text-decoration-line: underline;
text-decoration-color: red;
text-decoration-style: double;
text-decoration-thickness: 5px;
}
Попробуйте сами »
Сокращенное свойство
Свойство text-decoration - это сокращенное свойство для:
text-decoration-line(требуемый)text-decoration-color(необязательный)text-decoration-style(необязательный)text-decoration-thickness(необязательный)
Пример
h1 {
text-decoration: underline;
}
h2 {
text-decoration: underline red;
}
h3 {
text-decoration: underline
red double;
}
p {
text-decoration: underline red double 5px;
}
Попробуйте сами »
Небольшой совет
Все ссылки в HTML по умолчанию подчеркнуты. Иногда вы видите, что ссылки оформлены без подчеркивания. Свойство text-decoration: none; используется для удаления подчеркивания из ссылок, например:
Все свойства CSS оформления текста
| Свойство | Описание |
|---|---|
| text-decoration | Задает все свойства оформления текста в одном объявлении |
| text-decoration-color | Задает цвет текстового оформления |
| text-decoration-line | Определяет тип используемого оформления текста (подчеркивание, верхняя строка и т.д.) |
| text-decoration-style | Задает стиль оформления текста (сплошной, пунктирный и т.д.) |
| text-decoration-thickness | Задает толщину линии оформления текста |