css властивість text-decoration
Властивість text-decoration визначає оздоблення тексту. В CSS3 властивість text-decoration є універсальною властивістю для наступних властивостей.
text-decoration-linetext-decoration-colortext-decoration-style
Одночасно дозволено застосовувати більш декілька стилів, перераховуючи значення через пропуск. Пропущені властивості отримають їх початкові значення.
Властивість додає оздоблення понад нащадками. Це означає, що якщо для елементу вказаний text-decoration, то дочірній елемент не може видалити це оформлення. Наприклад, якщо ми маємо абзац з нащадком:
This is text!
Правило text-decoration: underline; додасть лінію для всього абзацу, але правило для text-decoration: none; не призведе до змін; весь абзац все одно буде підкреслено.
| Нотатка: | В CSS3 використовуйте властивість |
Синтаксис
text-decoration: none|underline|overline|line-through|initial|inherit;Властивість text-decoration може отримувати 13 значень:
noneЗвичайний текст. Без задання.
underlineПідкреслений текст.
overlineЛінія над текстом.
line-throughЗакреслений текст.
blinkБлимання тексту(не підтримується всіма браузерами)
solidСуцільна лінія
wavyЛінія у формі хвилі.
dottedЛінія крапками.
dashedЛінія рисочками.
doubleПодвійна лінія.
<color>Значення кольору у будь-якому форматі.
initialВстановлює властивість у значення без задання
inheritВказує на спадковість властивості від свого батьківського елемента.
| Значення без задання: | none |
|---|---|
| Наслідує: | Ні |
| Анімується: | Так |
| JavaScript синтаксис: | object.style.textDecoration="underline" |
Переглядачі
| Переглядач | ||||||
|---|---|---|---|---|---|---|
| text-decoration | 1.0 |
3.0 |
1.0 |
1.0 |
3.5 |
12.0 |
| Переглядач | |||
|---|---|---|---|
| text-decoration | 1.0 |
1.0 |
1.0 |
Мобільних переглядачів ще не додано.
Приклади
Різні значення властивості у дії
Приклад використання
Встановлює оздоблення тексту для заголовків першого, друго та третього рівнів.
h1 {
text-decoration: overline;
}
h2 {
text-decoration: line-through;
}
h3 {
text-decoration: underline;
}