Странности оформления

Теперь поговорим о необычных особенностях text-decoration. Первая заключается в том, что свойство text-decoration не наследуется. Отсутствие наследования означает, что любые линии оформления, отрисовываемые с текстом (под, над или через него), будут иметь тот же цвет, что и родительский элемент. Это так, даже если цвет элементов-потомков другой:

p {text-decoration: underline; color: black;}
strong {color: gray;}

This paragraph, which is black and has a black underline, also contains
strongly emphasized text which has the black underline
beneath it as well.



Почему так? Поскольку значение text-decoration не наследуется, элемент strong получает установленное по умолчанию значение none. Поэтому у элемента strong нет подчеркивания. Но мы ясно видим линию под элементом strong, так что странно на первый взгляд было бы говорить, что у него ее нет. Тем не менее так и есть. То, что вы видите под элементом strong, – это подчеркивание абзаца, которое охватывает и элемент strong. Более ясно это можно увидеть, если изменить стили выделенного полужирным шрифтом элемента, как показано ниже:

p {text-decoration: underline; color: black;}
strong {color: gray; text-decoration: none;}

This paragraph, which is black and has a black underline, also contains
strongly emphasized text which has the black underline
beneath it as well.



Поскольку вы всего лишь «в лоб» объявили то, что делалось по умолчанию.


Иначе говоря, нельзя отключить подчеркивание (или надчеркивание, или перечеркивание), сгенерированное родительским элементом. Когда свойство text-decoration комбинируется с vertical-align, происходят еще более странные вещи. Поскольку элемент sup не имеет собственного оформления, но смещается вверх в рамках надчеркнутого элемента, верхняя черта перечеркивает элемент sup:

p {text-decoration: overline; font-size: 12pt;}
sup {vertical-align: 50%; fontsiz-e: 12pt;}

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

p {text-decoration: underline; color: black;}
strong {color: silver; text-decoration: none;}

This paragraph, which is black and has a black underline, also contains
boldfaced text which does not have black underline beneath
it.



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


Применяя none для отмены оформления, важно понимать, что это может аукнуться в будущем или даже стать причиной проблем уже сейчас. Но в будущих версиях CSS, возможно, будут реализованы средства, позволяющие отключать оформление, не прибегая к некорректному применению none, так что, может быть, есть надежда.

Существует способ изменить цвет оформления без нарушения спецификации. Как вы помните, применение оформления текста элемента означает, что оформление всего элемента будет одноцветным, даже если дочерние элементы выделены другим цветом. Чтобы цвет оформления соответствовал цвету элемента, надо прямо объявить оформление, как это сделано в следующем примере:

p {text-decoration: underline; color: black;}
strong {color: silver; text-decoration: underline;}

This paragraph, which is black and has a black underline, also contains
strongly emphasized text which has the black underline
beneath it as well, but whose gray underline overlays the black underline of
its parent.



Элемента strong задан серый цвет и подчеркивание. Серая подчеркивающая черта налагается поверх черной черты родительского элемента, поэтому цвет оформления соответствует цвету элемента strong.



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

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

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