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>
Результат
Специфікації
Сумісність із браузерами
desktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
text-decoration
|
Chrome Full support 1 | Edge Full support 12 | Firefox Full support 1 | Internet Explorer Full support 3 | Opera Full support 3.5 | Safari Full support 1 | WebView Android Full support 37 | Chrome Android Full support 18 | Firefox for Android Full support 4 | Opera Android Full support 10.1 | Safari on iOS Full support 1 | Samsung Internet Full support 1.0 |
blink
|
Chrome No support Ні | Edge No support Ні | Firefox No support 1 – 23 | Internet Explorer No support Ні | Opera No support 4 – 15 | Safari No support Ні | WebView Android No support Ні | Chrome Android No support Ні | Firefox for Android No support 4 – 23 | Opera Android No support 10.1 – 14 | Safari on iOS No support Ні | Samsung Internet No support Ні |
Shorthand
|
Chrome Full support 57 | Edge Full support 79 | Firefox Full support 36 | Internet Explorer No support Ні | Opera Full support 44 | Safari Full support 8 | WebView Android Full support 57 | Chrome Android Full support 57 | Firefox for Android Full support 36 | Opera Android Full support 43 | Safari on iOS Full support 8 | Samsung Internet Full support 7.0 |
text-decoration-thickness included in shorthand
|
Chrome Full support 87 | Edge Full support 87 | Firefox Full support 70 | Internet Explorer No support Ні | Opera Full support 73 | Safari No support Ні | WebView Android Full support 87 | Chrome Android Full support 87 | Firefox for Android No support Ні | Opera Android Full support 62 | Safari on iOS No support Ні | Samsung Internet Full support 14.0 |
Дивіться також
- Окремі властивості text-decoration:
text-decoration-line
,text-decoration-color
,text-decoration-style
, andtext-decoration-thickness
. - Властивості
text-decoration-skip-ink
,text-underline-offset
іtext-underline-position
також впливають на text-decoration, але не включені в скорочення. - Атрибут
list-style
контролює вигляд елементів у списках HTML<ol>
та<ul>
.