Цвет ссылок

www-html.ru

Обычная версия

С помощью ШТМЛ можно задавать цвета всех ссылок на странице, а также изменять цвета для отдельных ссылок.

Задание цвета всех ссылок на странице

Цвета ссылок задаются в качестве параметров тега <BODY>. Параметры являются необязательными и если они не указаны используются значения по умолчанию.

LINK — определяет цвет ссылок на web-странице (цвет по умолчанию синий, #0000FF).
ALINK — цвет активной ссылки. Цвет ссылки меняется при нажатии на ней кнопки мыши. Цвет по умолчанию красный, #FF0000.
VLINK — цвет уже посещенных ссылок. Цвет по умолчанию фиолетовый, #800080.

В ШТМЛ цвета задаются обычно цифрами в шестнадцатеричном коде, в виде #RRGGBB, где R, G и B обозначают соответственно красную, зеленую и синюю составляющую. Для каждого цвета задается шестнадцатеричное значение от 00 до FF, что соответствует диапазону от 0 до 255 в десятичном исчислении. Затем эти значения объединяются в одно число, перед которым ставится символ # (пример 1).

Пример 1. Задание цветов ссылок

Валидный HTML
<!DOCTYPE ШТМЛ PUBLIC "-//W3C//DTD ШТМЛ 4.01 Transitional//EN" "http://www.w3.org/TR/ШТМЛ4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Цвет ссылок</title>
</head>
<body link="red" vlink="#cecece" alink="#ff0000" bgcolor="black">

<p><a href="content.ШТМЛ">Содержание с нашего сайта</a></p>

</body>
</html>

Цвет не обязательно задавать в шестнадцатеричном формате, можно использовать и ключевые слова. В данном примере цвет фона web-страницы установлен черным, а цвет ссылок — красным.

Замечание

Значения параметров нечувствительны к регистру, поэтому корректно писать как #FFFFFF, так и #ffffff.

Для изменения цвета ссылок удобнее использовать CSS (ЦСС). Чтобы установить цвет для всех ссылок на web-странице применяются следующие псевдоклассы, которые добавляются к селектору A.

visited — Стиль для посещенной ссылки.
active — Стиль для активной ссылки. Активной ссылка становится при нажатии на нее.
hover — Стиль для ссылки при наведении на нее мышью.

В примере 2 показано, как изменить цвет ссылок на web-странице с помощью стилей. Для этого воспользуемся стилевым параметром color, он задает цвет определенного контента, в данном случае, ссылок.

Пример 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=windows-1251">
<title>Использование стилей</title>
<style type="text/CSS (ЦСС)">
BODY {
 background: black; /* Цвет фона web-страницы */
}
A {
 color: red; /* Цвет ссылок */
}
A:visited {
 color: #cecece; /* Цвет посещенных ссылок */
}
A:active {
 color: #ffff00; /* Цвет активных ссылок */
}
</style>
</head>
<body>

<p><a href="content.ШТМЛ">Содержание с нашего сайта</a></p>

</body>
</html>

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

Вышеописанный способ задания цветов работает для всех ссылок web-страницы. Однако, иногда возникает необходимость одновременно использовать разные цвета. Светлые, например, для темных областей web-страницы, а темные цвета — соответственно для светлых. Для этого также можно применить стилями.

Для изменения цвета ссылки следует использовать параметр style="color: #rrggbb" в теге <А>, где #rrggbb — цвет в шестнадцатеричном представлении. Можно, также, использовать названия цветов или указывать цвет в формате: rgb (132, 33, 65). В скобках указаны десятичные значения красного, зеленого и синего цвета (пример 3).

Пример 3. Изменение цвета ссылки с помощью стилей

Валидный HTML
<!DOCTYPE ШТМЛ PUBLIC "-//W3C//DTD ШТМЛ 4.01 Transitional//EN" "http://www.w3.org/TR/ШТМЛ4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Цвет ссылок</title>
</head>
<body link="#ffcc00" vlink="#cecece" alink="#ff0000" bgcolor="black">

<p><a href="content.ШТМЛ" style="color: white">Содержание с нашего сайта</a></p>
<p><a href="im.ШТМЛ" style="color: #ffffff">Internet-маркетинг</a></p>
<p><a href="use.ШТМЛ" style="color: rgb (255, 255, 255)">Юзабилити</a></p>

</body>
</html>

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



Copyright © Все права засчищены
www.www-html.ru