text-decoration

Браузер Internet Explorer Netscape Opera Safari Mozilla Firefox
Версия 5.5 6.0 7.0 6.0 7.0 8.0 7.0 8.0 9.0 1.0 1.7 1.0 2.0
Поддерживается Част. Част. Част. Част. Да Да Да Да Да Да Да Да Да

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

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

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

Описание

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

Синтаксис

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

Аргументы

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

Пример

Валидный CSS
Валидный HTML
<!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=windows-1251">
<title>text-decoration</title>
<style type="text/css">
A {
 text-decoration: none; /* Убираем подчеркивание у ссылок */
}

A:hover {
 text-decoration: underline; /* Добавляем подчеркивание при наведении курсора мыши на ссылку */
}
</style>
</head>
<body>

<p><a href="link1.html">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 Explorer хотя и позволяет использовать значение blink, текст показывает как обычно, без всякого мерцания.

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