Шаг 30 - Разные стили ссылок на одной странице

Ответ на такое вот письмо:

У меня возник вопрос по HTML. По дизайнерскому замыслу, на моем 
сайте на разных страницах используется две разных цветовых схемы
отображения ссылок. Возникла необходимость использовать обе эти
схемы на одной странице. Но как???
Пожалуйста научите как на одной странице в одном месте отображать
посещенные, нажатые и непосещенные ссылки скажем красным цветом,
а в другом месте страницы разными цветами.

Менять стиль ссылок средствами HTML Вы можете только в теге <body>, но этот способ имеет ограниченные возможности. Как мы узнали раньше, изменить вид любого эламента можно с помощью каскадных таблиц стилей. Вот давайте ими и воспользуемся.

Ссылки, как наиболее активные элементы на странице, имеют больше свойств, чем остальные элементы. К этим свойствам относятся:

Эти свойства Вы можете задать в таблице стилей:

<style type="text/css">
a:link {text-decoration: none; color: blue;}
a:visited {color: green; }
a:active {text-decoration: none; color: #FF0000; }
a:hover {text-decoration: underline; color: yellow; }
</style>

Параметр text-decoration я уже рассматривал в "Шаг 25 - CSS: Параметры текста", поэтому Вы можете его грамотно использовать.

Такой вот таблицей стилей мы поменяли стиль всех ссылок на странице. В примере мы изменили все свойства ссылок, но можно менять только одно или несколько по усмотрению.

Теперь собственно сам ответ на вопрос "Как применять несколько типов ссылок на одной странице ?". А ответ опять же заключается в CSS. Если Вы помните, то можно создавать несколько стилей для одного элемента. Для этого надо создать новый класс элемента, можете почитать "Шаг 22 - Каскадные таблицы стилей".

Давайте создадим еще один класс ссылок. Делается это просто:

a.c1:link {color: pink;}
a.c1:visited {color: black;}

Эти строки нужно добавить в раздел описания стилей <style>. Имя нового класса c1, а использовать его можно так:

<p><a href=file1.html>Обычная ссылка</a>
<p><a href=file2.html class=c1>Ссылка со стилем c1</a>

Таким образом Вы можете использовать несколько типов ссылок на одной странице. Очень удобно использовать для "внешних" и "внутренних" ссылок разную раскраску. Это позволит посетителям узнать место назначения ссылки просто по цвету. Но старайтесь однако не злоупотреблять этим. Слишком большое количество ссылок разных типов может сильно увеличить документ.


Предыдущий Шаг | Оглавление
Автор Кузин Андрей.