Цвет ссылок
С помощью HTML можно задавать цвета всех ссылок на странице, а также изменять цвета для отдельных ссылок.
Задание цвета всех ссылок на странице
Цвета ссылок задаются в качестве параметров тега <BODY>. Параметры являются необязательными и если они не указаны используются значения по умолчанию.
LINK — определяет цвет ссылок на веб-странице
(цвет по умолчанию синий, #0000FF).
ALINK — цвет активной ссылки. Цвет ссылки
меняется при нажатии на ней кнопки мыши. Цвет по умолчанию красный,
#FF0000.
VLINK — цвет уже посещенных ссылок. Цвет
по умолчанию фиолетовый, #800080.
В HTML цвета задаются обычно цифрами в шестнадцатеричном коде, в виде #RRGGBB, где R, G и B обозначают соответственно красную, зеленую и синюю составляющую. Для каждого цвета задается шестнадцатеричное значение от 00 до FF, что соответствует диапазону от 0 до 255 в десятичном исчислении. Затем эти значения объединяются в одно число, перед которым ставится символ # (пример 1).
Пример 1. Задание цветов ссылок
<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.html">Содержание сайта</a></p>
</body>
</html>
Цвет не обязательно задавать в шестнадцатеричном формате, можно использовать и ключевые слова. В данном примере цвет фона веб-страницы установлен черным, а цвет ссылок — красным.
Замечание
Значения параметров нечувствительны к регистру, поэтому корректно писать как #FFFFFF, так и #ffffff.
Для изменения цвета ссылок удобнее использовать CSS. Чтобы установить цвет для всех ссылок на веб-странице применяются следующие псевдоклассы, которые добавляются к селектору A.
visited — Стиль для посещенной ссылки.
active — Стиль для активной ссылки. Активной ссылка
становится при нажатии на нее.
hover — Стиль для ссылки при наведении на нее мышью.
В примере 2 показано, как изменить цвет ссылок на веб-странице с помощью стилей. Для этого воспользуемся стилевым параметром color, он задает цвет определенного текста, в данном случае, ссылок.
Пример 2. Цвет ссылок, заданных через стили
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Использование стилей</title>
<style type="text/css">
BODY {
background: black; /* Цвет фона веб-страницы */
}
A {
color: red; /* Цвет ссылок */
}
A:visited {
color: #cecece; /* Цвет посещенных ссылок */
}
A:active {
color: #ffff00; /* Цвет активных ссылок */
}
</style>
</head>
<body>
<p><a href="content.html">Содержание сайта</a></p>
</body>
</html>
Задание цвета отдельных ссылок на странице
Вышеописанный способ задания цветов работает для всех ссылок веб-страницы. Однако, иногда возникает необходимость одновременно использовать разные цвета. Светлые, например, для темных областей веб-страницы, а темные цвета — соответственно для светлых. Для этого также можно воспользоваться стилями.
Для изменения цвета ссылки следует использовать параметр style="color: #rrggbb" в теге <А>, где #rrggbb — цвет в шестнадцатеричном представлении. Можно, также, использовать названия цветов или указывать цвет в формате: rgb (132, 33, 65). В скобках указаны десятичные значения красного, зеленого и синего цвета (пример 3).
Пример 3. Изменение цвета ссылки с помощью стилей
<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.html" style="color: white">Содержание сайта</a></p>
<p><a href="im.html" style="color: #ffffff">Интернет-маркетинг</a></p>
<p><a href="use.html" style="color: rgb (255, 255, 255)">Юзабилити</a></p>
</body>
</html>
В данном примере приведены три разных способа задания цвета с помощью стилей.
| Статья опубликована: 06.09.2005 | Последнее обновление: 24.02.2008 |
Прежде, чем писать комментарий к статье, примите во внимание следующие моменты.
- Не задавайте вопросы в комментариях, для этой цели предназначен форум, где вы получите нужную помощь.
- Удаляются любые комментарии, которые:
- включают множество ошибок;
- написаны безграмотно;
- не имеют отношения к данной статье;
- не содержат никакой полезной информации для посетителей.
- Для выделения отдельных слов используйте следующие команды: [b]жирный[/b], [i]курсив[/i], [color=цвет]цветной текст[/color], [tag]тег[/tag], [var]параметр[/var], [code]пример[/code].
- Потренироваться в написании комментариев вы можете в песочнице.
Комментарии к статье
Михаил
24.03.2007
<В HTML цвета задаются обычно цифрами в шестнадцатеричном коде, в виде #RRBBGG, где R, G и B обозначают соответственно красную, зеленую и синюю составляющую. >
Синий и зеленый перепутаны местами...
Влад Мержевич
04.04.2007
Elena
12.06.2007
А как сделать, чтобы текст не менял цвет, а например, просто подчеркивался?
у меня ситуация такая: есть несколько значений-ссылок в таблице, для этих значений есть условия - при нажатии определенной кнопки они меняют цвет. нужно их сделать ссылками, сохраняя цвет, который уже определен.
спасибо
Вадим
14.06.2007
a {text-decoration: none;}
a:hover {text-decoration: underline;}
Подробно об этом в статье: http://htmlbook.ru/css/text-decoration.html
Что касается того, что бы ссылки меняли цвет при нажатии на некую кнопку, которая не связана с самой ссылкой - то это средствами css не решить. Это через Java надо делать.
Сергей
15.06.2007
Сергей
17.06.2007
мой вопрос относился к Владу Мержевичу.
Влад,как сделать чтоб при наведении изменялся цвет картинки-ссылки..или где можно прочитать?Очень жду совета(((
Влад Мержевич
19.06.2007
1. Использовать эффект перекатывания, т.е. смена одной картинки другой. Почитайте здесь http://htmlbook.ru/content/?id=110
2. Сделать картинку с прозрачными участками и менять цвет фона под рисунком.
Дарья
13.07.2007
Как сделать, чтобы при просмотре сайта с жесткого диска при каждом открытие сайта все ссылки были LINK, а в процессе просмотра становились visited (сайт будет просматривать много пользователей с одного компа). Где хранится информация о том какие ссылки уже просмотрены? Можно ли это сделать без JS?
Влад Мержевич
24.07.2007
Дмитрий
04.03.2008
LitR
25.03.2008
страницы
Алексей
27.03.2008
Как сделать на странице кнопку, при нажатии на которую цвет в таблице стилей изменяется например с синего на красный
Т?ма
28.03.2008
Спасибо и ещ? раз извините
C5oLoJ
05.05.2008