Оформление текста CSS
Украшение текста
В этой главе вы узнаете о следующих свойствах:
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;
}