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; не призведе до змін; весь абзац все одно буде підкреслено.

Властивість `text-decoration`

Нотатка:

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

Синтаксис

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; 


}

Додаткові посилання