Справочник по CSS : Тематический указатель : Справочник по свойствам и атрибутам : Шрифт и текст : text-decoration

смотрим также

Материал из Справочник Web-языков

Перейти к: навигация, поиск


Содержание

Атрибут text-decoration | Свойство textDecoration

Задает значение, которое показывает, где текст в объекте будет мигающим или, где будет подчеркнутым (надчеркнутым, зачеркнутым).

Синтаксис

HTML { text-decoration : sDecoration }
Скрипты [ sDecoration = ] object.style.textDecoration

Используемые значения

sDecoration
Строка, которая может определять и принимать одно из следующих значений:
none
Значение по умолчанию. Все эффекты у текста отменяются.
underline
Текст будет подчеркнут.
overline
Текст будет надчеркнут.
line-through
Текст будет зачеркнут.
blink
Текст будет мигающим.

Это свойство читается/записывается для всех объектов, кроме currentStyle (только чтение). Значением по умолчанию является none. Атрибут Каскадных таблиц стилей (CSS) не наследуется.

Замечания

Эффект от значения по умолчанию для разных тэгов различен:

  • Значение по умолчанию будет underline для тэга a, когда он используется вместе с href, u и ins.
  • Значение по умолчанию будет line-through для тэгов strike, s и del.

Если расположить значение none в конце списка значений, то все эффект от других значений нивелируется. Например, если для текста установлено {text-decoration: underline overline blink none}, то ни один из эффектов не будет отображаться.

Если в объекте нет текста, например объект img, или это пустой объект, например <em></em>, то эффектов от установки свойства textDecoration не будет.

Если атрибуту text-decoration в объекте body задано значение none, то объекты a все еще будут подчеркнуты. Для удаления этого эффекта подчеркивания, либо задайте для a значение inline, либо опишите значения для a как селектора в глобальной таблице стилей.

Определение свойства textDecoration для объекта типа block, автоматически означает применение значений этого свойства для всех потомков объекта типа block.

Примеры

Следующие примеры показывают как использовать атрибут text-decoration и свойство textDecoration для задания эфеекотов текста в объекте.

В первом примере используется атрибут text-decoration, чтобы сделать текст зачеркнутым.

<div style="text-decoration: line-through">
...
</div>

Во втором примере задаются различные эффекты для текста объекта span, когда происходят события onmouseover, onclick, ondblclick.

<span style="font-size: 14px" onmouseover="this.style.textDecoration='underline'" 
    onclick="this.style.textDecoration='overline'" 
    ondblclick="this.style.textDecoration='line-through'">
...
</span>

В третьем примере показывается, что хотя атрибут text-decoration не наследуется, для потомков будет применяться тот же эффект, что и для объектов-родителей. И даже если потомки будут иметь различные цвета (color), цвет эффектов все равно будет такой же, как цвет объекта-родителя.

<html>

<head>
<style type="text/css">
.redunderline {
    color: red;
    text-decoration: underline;
}
.blueoverline {
    color: blue;
    text-decoration: overline;
}
</style>
</head>

<body>

<div class="redunderline">
    This <b>div</b> has text decoration set to underline,
    <span class="blueoverline">but this <b>span</b> has it set to overline.</span> 
    The <b>div</b> continues here.</div>

</body>

</html>

Стандарты

Это свойство описано в Cascading Style Sheets (CSS), Level 1 (CSS1)

Поддерживаемые браузеры

Internet Explorer частично 5.5, частично 6.0, частично 7.0, 8.0

Opera 7.0, 8.0, 9.2, 9.5

Safari 1.3, 2.0, 3.1

Firefox 1.5, 2.0, 3.0

В Internet Explorer часто при задании значения blink, текст все равно остается немерцающим.

Смотри также

textDecorationLineThrough, textDecorationNone, textDecorationOverline, textDecorationUnderline


Ссылки на источники

https://msdn.microsoft.com/en-us/library/ms531165(VS.85).aspx

https://developer.mozilla.org/en/CSS/text-decoration

Добавить страницу в закладки:
РАЗРЕШАЕТСЯ перепечатывать и копировать информацию ТОЛЬКО ПРИ РАЗМЕЩЕНИИ ссылки на оригинал!
(<A href="https://www.spravkaweb.ru/">Справочник Web-языков</A>)
другие проекты
Rambler\'s Top100 Индекс цитирования