Свойство text-decoration
В этой главе вы узнаете о оформлении текста и CSS свойствах:
text-decoration-linetext-decoration-colortext-decoration-styletext-decoration-thicknesstext-decoration
CSS свойство text-decoration-line
CSS свойство 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;
}
Попробуйте сами »
Примечание: Не рекомендуется подчеркивать текст, который не является ссылкой, так как это часто сбивает читателя с толку.
CSS свойство text-decoration-color
CSS свойство 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;
}
Попробуйте сами »
CSS свойство text-decoration-style
CSS свойство 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;
}
Попробуйте сами »
CSS свойство text-decoration-thickness
CSS свойство 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;
}
Попробуйте сами »
CSS сокращённое свойство text-decoration
CSS свойство 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; используется для удаления подчеркивания из ссылок, например:
a {
text-decoration: none;
}
Попробуйте сами »
Все CSS свойства text-decoration
| Свойство | Описание |
|---|---|
| text-decoration | Задает все свойства оформления текста в одном объявлении |
| text-decoration-color | Задает цвет текстового оформления |
| text-decoration-line | Определяет тип используемого оформления текста (подчеркивание, верхняя строка и т.д.) |
| text-decoration-style | Задает стиль оформления текста (сплошной, пунктирный и т.д.) |
| text-decoration-thickness | Задает толщину линии оформления текста |