CSS Оформлення тексту
CSS Оформлення тексту
У цьому розділі ви дізнаєтеся про такі властивості:
text-decoration-linetext-decoration-colortext-decoration-styletext-decoration-thicknesstext-decoration
Додати декоративну лінію до тексту
Властивість text-decoration-line використовується для додавання декоративної лінії до тексту.
Порада. Ви можете комбінувати більше ніж одне значення, як-от overline та underline, щоб відображати лінії над текстом і під ним.
Приклад
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 | Встановлює всі властивості text-decoration в одному оголошенні |
| text-decoration-color | Визначає колір text-decoration |
| text-decoration-line | Specifies the kind of text decoration to be used (underline, overline, etc.) |
| text-decoration-style | Визначає стиль text-decoration (solid, dotted і т.д.) |
| text-decoration-thickness | Визначає товщину лінії text-decoration |
