Свойства CSS
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.php#propdef-text-decoration |
Описание
Добавляет оформление текста в виде его подчеркивания, перечеркивания, линии над текстом и мигания. Одновременно можно применить более одного стиля, перечисляя значения через пробел.
Синтаксис
text-decoration: blink | line-through | overline | underline | none
Аргументы
- blink
- Устанавливает мигающий текст. Такой текст периодически, примерно раз в секунду исчезает, потом вновь появляется на прежнем месте (пример).
- line-through
- Создает перечеркнутый текст (пример).
- overline
- Линия проходит над текстом (пример).
- underline
- Устанавливает подчеркнутый текст (пример).
- none
- Отменяет все эффекты, в том числе и подчеркивания у ссылок, которое задано по умолчанию.
Пример
<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.php">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 не распространяет оформление родительского элемента на дочерние, а переносит только подчеркивание.