Оформление текста

Далее мы переходим к свойству text-decoration, которое является замечательным свойством, предлагающим целый ворох интересных возможностей. Как и следовало ожидать, если выбрано значение underline, происходит подчеркивание элемента; точно так же действует тег U в HTML. Значение overline приводит к противоположному эффекту: линия отрисовывается над текстом. Значение line-through проводит линию посередине текста, получается перечеркнутый текст (strikethrough text); это аналогично элементам S и strike в HTML. При выборе значения blink текст начинает мерцать аналогично эффекту, получаемому с помощью довольно опасного тега blink, поддерживаемого только Netscape:

p.emph {text-decoration: underline;}
p.topper {text-decoration: overline;}
p.old {text-decoration: line-through;}
p.annoy {text-decoration: blink;}
p.plain {text-decoration: none;}

Значение none отключает любое дополнительное оформление, которое в противном случае, возможно, применялось бы к элементу. Обычно по умолчанию текст никак не украшается, но не всегда. Например, ссылки обычно подчеркиваются. Для того чтобы запретить подчеркивание гиперссылок, можно использовать такое CSS-правило:

a {text-decoration: none;}

Если подчеркивание ссылок явно отключается таким правилом, то единственным визуальным отличием между ссылками и обычным текстом будет их цвет (по крайней мере, таково поведение по умолчанию, хотя твердой гарантии этому нет).


Также можно комбинировать виды оформления в одно правило. Если требуется, чтобы все гиперссылки были и подчеркнуты, и надчеркнуты, правило будет таким:

a:link, a:visited {text-decoration: underline overline;}

Однако будьте осторожны: если с одним элементом сопоставляются два разных вида оформления, значение более приоритетного правила полностью вытеснит значение проигравшего. Рассмотрим следующий пример:

h2.stricken {text-decoration: line-through;}
h2 {text-decoration: underline overline;}

В соответствии с этими правилами любой элемент h2 класса stricken будет только зачеркнут. Подчеркивание и надчеркивание утеряны, т. к. значения при краткой записи замещают друг друга, а не суммируются.

Оцените статью: (0 голосов)
0 5 0

Статьи из раздела CSS на эту тему:
В середине
Вертикальное выравнивание текста
Выравнивание по базовой линии
Выравнивание по верхнему краю
Выравнивание по заданному расстоянию

Вернуться в раздел: CSS / 6. Свойства текста