Как на странице сделать ссылки разных цветов?

🕛 20.01.2009, 22:41

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

Для раздельного управления стилем разных ссылок рассмотрим два способа. Первый основан на контекстных селекторах. Смысл следующий. Ссылки меню располагаются внутри блока, например, <div id="menu">...</div>, а ссылки в тексте внутри блока <div id="content">...</div>. Тогда стиль для разных ссылок получится таким.
<style type="text/css"> #menu A { color: red; } #content A { color: green; }
</style>

Запись #menu A означает, что стиль будет определен только для селектора A, который располагается внутри элемента с идентификатором menu (пример 1).
Пример 1. Использование контекстных селекторов

HTML 4.01CSS 2.1IE 6IE 7Op 9.5Sa 3.1Ff 3.0

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <title>Использование контекстных селекторов</title> <style type="text/css"> #menu { padding: 5px; /* Поля вокруг текста */ background: #066; /* Цвет фона */ } #menu a { color: #ffc; /* Цвет ссылки */ } #content { background: #ccc; /* Цвет фона */ padding: 5px; /* Поля вокруг текста */ } #content a { color:#6f4a25; /* Цвет ссылок */ } </style> </head> <body> <div id="menu"> <a href="link1.html">Ссылка 1</a> | <a href="link2.html">Ссылка 2</a> | <a href="link3.html">Ссылка 3</a> </div> <div id="content"> <a href="link1.html">Ссылка 1</a> | <a href="link2.html">Ссылка 2</a> | <a href="link3.html">Ссылка 3</a>
 </div> </body>
</html>

Результат данного примера показан ни рис. 1.

Рис. 1. Ссылки, различающиеся по цвету

Второй способ состоит в использовании классов. Для ссылки, цвет которой надо определить, создается новый класс и добавляется к селектору A (пример 2).

Пример 2. Использование классов

HTML 4.01CSS 2.1IE 6IE 7Op 9.5Sa 3.1Ff 3.0

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <title>Использование классов</title> <style type="text/css"> A { color: orange; /* Цвет ссылки */ } A.content { color: #6f4a25; /* Цвет ссылок */ text-decoration: none; /* Убираем подчеркивание */ } A.content:visited { color: purple; /* Цвет посещенных ссылок */ } A.content:hover { color: red; /* Цвет ссылок при наведении на них курсора мыши */ } </style> </head> <body> <p> <a href="link1.html">Ссылка 1</a> | <a href="link2.html">Ссылка 2</a> | <a href="link3.html">Ссылка 3</a> </p>
 <div id="content"> <a href="link1.html" class="content">Ссылка 1</a> | <a href="link2.html" class="content">Ссылка 2</a> | <a href="link3.html" class="content">Ссылка 3</a> </div> </body>
</html>