css властивість text-decoration

Властивість text-decoration визначає оздоблення тексту. В CSS3 властивість text-decoration є універсальною властивістю для наступних властивостей.

• text-decoration-line
• text-decoration-color
• text-decoration-style

Одночасно дозволено застосовувати більш декілька стилів, перераховуючи значення через пропуск. Пропущені властивості отримають їх початкові значення.

Властивість додає оздоблення понад нащадками. Це означає, що якщо для елементу вказаний text-decoration, то дочірній елемент не може видалити це оформлення. Наприклад, якщо ми маємо абзац з нащадком:

This is text!

Правило text-decoration: underline; додасть лінію для всього абзацу, але правило для text-decoration: none; не призведе до змін; весь абзац все одно буде підкреслено.

правити

Нотатка

В CSS3 використовуйте властивість text-decoration-color щоб змінити колір оздоблення.

автор: Svitlana правити

+ додати пораду чи нотатку

Синтаксис

text-decoration: none|underline|overline|line-through|initial|inherit;

Властивість text-decoration може отримувати 13 значень:

none

Звичайний текст. Без задання.

автор: Svitlana

правити

underline

Підкреслений текст.

автор: Svitlana

правити

overline

Лінія над текстом.

автор: Svitlana

правити

line-through

Закреслений текст.

автор: Svitlana

правити

initial

Встановлює властивість у значення без задання

автор: Svitlana

правити

inherit

Вказує на спадковість властивості від свого батьківського елемента.

автор: Svitlana

правити

blink

Блимання тексту(не підтримується всіма браузерами)

автор: Svitlana

правити

solid

Суцільна лінія

автор: Svitlana

правити

wavy

Лінія у формі хвилі.

автор: Svitlana

правити

dotted

Лінія крапками.

автор: Svitlana

правити

dashed

Лінія рисочками.

автор: Svitlana

правити

double

Подвійна лінія.

автор: Svitlana

правити

<color>

Значення кольору у будь-якому форматі.

автор: Svitlana

правити

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
text-decoration	1.0	1.0	1.0	3.5	12.0	3.0

Підтримка: мобільні переглядачі

Переглядач
text-decoration	1.0	1.0	1.0

Приклади

+ запропонувати свій приклад у пісочниці

<h1>Лінія над текстом</h1>
<h2>Закреслений текст</h2>
<h3>Підкреслений текст</h3>

h1 {
    text-decoration: overline;
}

h2 {
    text-decoration: line-through;
}

h3 {
    text-decoration: underline;
}