свойство text-decorationCSS3-генератор ☛

Добавляет оформление текста в виде его подчёркивания, перечёркивания или линии над текстом. Одновременно можно применить более одного стиля, перечисляя значения через пробел.

Краткая информация

Значение по умолчанию	none
Наследуется	Нет
Применяется	Ко всем элементам
Анимируется	text-decoration-line: Нет text-decoration-style: Нет text-decoration-color: Да

Синтаксис ?

text-decoration: text-decoration-line || text-decoration-style || text-decoration-color

✖

Обозначения

	Описание	Пример
<тип>	Указывает тип значения.	<размер>
A && B	Значения должны выводиться в указанном порядке.	<размер> && <цвет>
A \| B	Указывает, что надо выбрать только одно значение из предложенных (A или B).	normal \| small-caps
A \|\| B	Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке.	width \|\| count
[ ]	Группирует значения.	[ crop \|\| cross ]
*	Повторять ноль или больше раз.	[,<время>]*
+	Повторять один или больше раз.	<число>+
?	Указанный тип, слово или группа не является обязательным.	inset?
{A, B}	Повторять не менее A, но не более B раз.	<радиус>{1,4}
#	Повторять один или больше раз через запятую.	<время>#

Значения

blink: Устанавливает мигающий текст. Такой текст периодически, примерно раз в секунду исчезает, потом вновь появляется на прежнем месте. Это значение в настоящее время не поддерживается браузерами и осуждается в CSS3, взамен рекомендуется использовать анимацию.
line-through: Создает перечёркнутый текст (пример).
overline: Линия проходит над текстом (пример).
underline: Устанавливает подчёркнутый текст (пример).
none: Отменяет все эффекты, в том числе и подчёркивание у ссылок, которое задано по умолчанию.

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>text-decoration</title>
  <style>
   a {
    text-decoration: none; /* Убираем подчеркивание у ссылок */
   }
   a:hover {
    text-decoration: underline; /* Добавляем подчёркивание
                                   при наведении курсора мыши на ссылку */
   }
  </style>
 </head>
 <body>
  <p><a href="page/1.html">Стратегическое нападение</a></p>
 </body>
</html>

Объектная модель

Объект.style.textDecoration

Объект.style.textDecorationLineThrough

Объект.style.textDecorationNone

Объект.style.textDecorationOverLine

Объект.style.textDecorationUnderline

Примечание

Линия, полученная с помощью значения line-through, в IE7 располагается выше чем в других браузерах; в IE8 эта ошибка исправлена.

Браузеры: Настольные Мобильные ?

Internet Explorer	Chrome	Opera	Safari	Firefox
3	1	3.5	1	1

Android	Firefox Mobile	Opera Mobile	Safari Mobile
1	1	4	1

✖

Браузеры

В таблице браузеров применяются следующие обозначения.

— элемент полностью поддерживается браузером;
— элемент браузером не воспринимается и игнорируется;
— при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.

Число указывает версию браузреа, начиная с которой элемент поддерживается.

Текст и шрифт

См. также