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