www html, html уроки, html теги, css, верстка
статьи html уроки книги по css и html урокам вопросы и ответы Помощь сайту
Главная страница > FAQ > Ссылки > Как на странице сделать ссылки разных цветов?

Справочник по 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

Валидный HTML
Валидный CSS

<!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

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

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

Пример 2

Валидный HTML
Валидный CSS

<!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>

Другие Уроки по этой теме

Ссылки

Псевдоклассы

Конконтентные селекторы

Поиск по сайту



FAQ

Copyright © 2009-2022 | По всем вопросам: donmobi@mail.ru

О нашем Internet проекте | Наши планы | Контент нашего сайта | Есть ошибки... | Технологии | Поддержать проект