Справочник по CSS (ЦСС) и ШТМЛ
Как на странице сделать ссылки разных цветов?
Ссылки разных цветов обычно нужны для размещения на странице, имеющей несколько различающихся по фоновому цвету областей. На темном фоне логичнее располагать ссылки светлых тонов, а на светлом, наоборот, ссылки темного цвета.
Для раздельного управления стилем разных ссылок просмотрим два способа. Первый основан на конконтентных селекторах. Смысл следующий. Ссылки меню располагаются внутри блока, например, <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
<!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=utf-8">
<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.ШТМЛ">Ссылка 1</a> | <a href="link2.ШТМЛ">Ссылка
2</a> | <a href="link3.ШТМЛ">Ссылка 3</a>
</div>
<div id="content">
<a href="link1.ШТМЛ">Ссылка 1</a> | <a href="link2.ШТМЛ">Ссылка
2</a> | <a href="link3.ШТМЛ">Ссылка 3</a>
</div>
</body>
</html>
Результат данного примера показан ни рис. 1.
Рис. 1. Ссылки, различающиеся по цвету
Второй способ состоит в использовании классов. Для ссылки, цвет которой надо определить, создается новый класс и добавляется к селектору A (пример 2).
Пример 2
<!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=utf-8">
<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.ШТМЛ">Ссылка 1</a> | <a href="link2.ШТМЛ">Ссылка
2</a> | <a href="link3.ШТМЛ">Ссылка 3</a></p>
<div id="content">
<a href="link1.ШТМЛ" class="content">Ссылка 1</a> | <a
href="link2.ШТМЛ" class="content">Ссылка 2</a> | <a
href="link3.ШТМЛ" class="content">Ссылка 3</a>
</div>
</body>
</html>