text-decoration
Властивість-скорочення CSS text-decoration
задає вигляд оздоблювальних ліній на тексті. Це скорочення властивостей text-decoration-line
, text-decoration-color
, text-decoration-style
, а також новішої властивості text-decoration-thickness
.
Спробуйте його в дії
Оздоблення тексту наносяться на всіх текстових нащадків. Це означає, що коли елемент задає оздоблення тексту, то дочірній елемент не може прибрати оздоблення. Наприклад, в розмітці <p>This text has <em>some emphasized words</em> in it.</p>
правило стилю p { text-decoration: underline; }
зробило б увесь абзац підкресленим. Правило стилю em { text-decoration: none; }
нічого б не змінило; увесь абзац і надалі був би підкресленим. Проте правило em { text-decoration: overline; }
призвело б до появи другого оздоблення на "певних акцентованих словах".
Складові властивості
Ця властивість є скороченням наступних властивостей CSS:
Синтаксис
text-decoration: underline;
text-decoration: overline red;
text-decoration: none;
/* Глобальні значення */
text-decoration: inherit;
text-decoration: initial;
text-decoration: revert;
text-decoration: revert-layer;
text-decoration: unset;
Властивість text-decoration
задається у вигляді одного чи більшої кількості розділених пробілами значень, що представляють різні докладні властивості text-decoration.
Значення
text-decoration-line
Задає застосований різновид оздоблення, як то
underline
(підкреслення) чиline-through
(закреслення).text-decoration-color
Задає колір оздоблення.
text-decoration-style
Задає стиль лінії, що використовується в оздобленні, як то
solid
(суцільна),wavy
(хвиляста) чиdashed
(штрихова).text-decoration-thickness
Задає товщину лінії, що використовується в оздобленні.
Формальне визначення
Початкове значення | так як і всі інші властивості зі скорочення:
|
---|---|
Успадковується | ні |
Обчислене значення | так як і всі інші властивості зі скорочення:
|
Формальний синтаксис
<\'text-decoration-line\'> || <\'text-decoration-style\'> || <\'text-decoration-color\'> || <\'text-decoration-thickness\'>
Приклади
Демонстрація значень text-decoration
.under {
text-decoration: underline red;
}
.over {
text-decoration: wavy overline lime;
}
.line {
text-decoration: line-through;
}
.plain {
text-decoration: none;
}
.underover {
text-decoration: dashed underline overline;
}
.thick {
text-decoration: solid underline purple 4px;
}
.blink {
text-decoration: blink;
}
<p class="under">Цей текст має лінію під собою.</p>
<p class="over">Цей текст має лінію над собою.</p>
<p class="line">Цей текст має лінію, що проходить крізь нього.</p>
<p>
Це <a class="plain" href="#">посилання не буде підкресленим</a>, на противагу
усталеному виглядові посилань. Будьте обережними з усуненням оздоблення тексту
на якорях, адже користувачі нерідко покладаються на підкреслення як позначення
гіперпосилань.
</p>
<p class="underover">Цей текст має лінії над <em>і</em> під собою.</p>
<p class="thick">
Цей текст має справді товсте фіолетове підкреслення, в браузерах, що це
підтримують.
</p>
<p class="blink">
Цей текст може вам блимати, залежно від браузера, що використовується.
</p>
Специфікації
Специфікація | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Unknown specification
Сумісність із браузерами
Дивіться також
|