Подчеркивание любым цветом
Что
Иногда можно увидеть текст, набранный одним цветом, а подчеркнутый другим. Этот прием дает
возможность применения достаточно ярких оформительских приемов основанных на сочетании цвета
текста и цвета подчеркивания. Прием легок в использовании, несмотря на то, что подчеркивание
выполняется не цветом элемента.
Как
В каждую ссылку (тег a) вложим элемент span. А текст, который должен был быть ссылкой, вложим
в этот элемент span. Естественно необходимо заменить текст в скобках (и сами скобки) на нужный
текст и нужный адрес для гиперссылки.
<a href='{адрес}'><span>{текст гипперссылки}</span></a>
Осталось добавить в таблицу стилей или секцию style правило для гиперссылок и правило, на
основе селектора потомков, для элементов span, вложенных в гиперссылки. При этом необходимо
заменить цвет подчеркивания и цвет текста на обозначения реальных цветов.
a {color:{цвет подчеркивания}; text-decoration:underline;}
span {color:{цвет текста};}
Почему
Основой для этого css-рецепта служат несколько особенностей свойства
text-decoration. Во-первых, это
свойство не наследуется. Таким образом то, что мы задали подчеркивание для внешнего элемента,
вовсе не задало подчеркивание для внутреннего.
Во-вторых, согласно спецификации CSS, все содержимое элемента с установленным подчеркиванием
- должно быть подчеркнуто. Включая и дочерние элементы без подчеркивания. И должно быть
подчеркнуто цветом элемента в котором задано свойство text-decoration, а не цветом дочернего
элемента.
Таким образом мы использовали внешний элемент для того что бы задать цвет подчеркивания, а
внутренний элемент для изменения цвета самого текста. Этот рецепт может быть применен и для
других пар элементов, не только для гиперссылок и элементов span.
