text-decoration

Браузер	Internet Explorer				Netтscape		Опера				Safari			Mozilla Firefox
Версия	5.5	6.0	7.0	8.0	8.0	9.0	7.0	8.0	9.2	9.5	1.3	2.0	3.1	1.5	2.0	3.0
Поддерживается	Част.	Част.	Част.	?	Да	Да	Да	Да	Да	Да	Да	Да	Да	Да	Да	Да

Част. — поддерживается частично.

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

CSS (ЦСС)	CSS (ЦСС)1
Значение по умолчанию	none
Наследуется	Нет
Применяется	Ко всем элементам
Аналог ШТМЛ	<U>, <S>, <STRIKE>
Ссылка на спецификацию	http://www.w3.org/TR/CSS21/text.ШТМЛ#propdef-text-decoration

Описание

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

Синтаксис

text-decoration: blink | line-through | overline | underline | none

Аргументы

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

Пример

ШТМЛ 4.01CSS (ЦСС) 2.1IE 5.5IE 6IE 7Op 9.5Sa 3.1Ff 2.0Ff 3.0

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/HTML4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>text-decoration</title>
  <style type="text/CSS (ЦСС)">
   A { 
    text-decoration: none; /* Убираем нижняя полоска в контенте у ссылок */
   }
   A:hover { 
    text-decoration: underline; /* Добавляем нижняя полоска в контенте 
                                   при наведении курсора мыши на ссылку */
   }
  </style> 
 </head> 
 <body>
  
  <p><a href="link1.ШТМЛ">Lorem ipsum dolor sit amet</a></p>
  
 </body>
</html>

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

[window.]document.getElementById("elementID").style.textDecoration
[window.]document.getElementById("elementID").style.textDecorationBlink
[window.]document.getElementById("elementID").style.textDecorationLineThrough
[window.]document.getElementById("elementID").style.textDecorationNone
[window.]document.getElementById("elementID").style.textDecorationOverLine
[window.]document.getElementById("elementID").style.textDecorationUnderline

Примечание

Браузер Internet Эксплорер хотя и позволяет использовать значение blink, контент показывает как обычно, без всякого мерцания.

Согласно спецификации CSS (ЦСС), если для элемента задан вид форматирования, а для его наследника нет, все равно свойства родителя будут передаваться его вложенным элементам. Так, если используется подчеркнутый параграф, а внутри него расположен неподчеркнутый элемент, выделяющий слово другим цветом, все слова в параграфе будут подчеркнуты, включая и выделенные другим цветом слова. Для браузера Нетscape 6, однако, установка text-decoration: none уберет все эффекты, независимо от оформления родительского элемента. Вдобавок, Нетscape 6 не распространяет оформление родительского элемента на дочерние, а переносит только нижняя полоска в контенте.