Изменение цветов в ссылке

Возможность изменения цвета ссылок одна из важных составляющих HTML-верстки. Ведь это позволяет не только грамотно вписать ссылки в дизайн сайта, но и помогает посетителям ориентироваться в его навигации.

В старых версиях HTML существовали специальные атрибуты тега <BODY>, позволяющие изменять цвет ссылок на HTML-странице, это link, alink и vlink, но в современном HTML их нет. Поэтому мы опять будем использовать стили (CSS0. Для этого нам надо будет в «шапку» страницы (<HEAD>) вставить тег <STYLE type="text/css">...</STYLE>, а внутри него указать один или несколько следующих стилей:

a:link {color:цвет} /* цвет непосещенной ссылки */

a:visited {color:цвет} /* цвет посещенной ссылки */

a:hover {color:цвет} /* цвет ссылки при наведении курсора мыши */

a:active {color:цвет} /* цвет активной ссылки (в момент нажатия) */

</style>

Тег <STYLE> используется для внутренних стилей, которые будут действовать в пределах всей страницы. А его атрибут type как раз и говорит браузеру о том, что внутри находятся стили (CSS), а не обычный текст.

Что касается самих стилей, то сначала там идет имя тега, к которому применяется стиль (в нашем случае это <A>), затем после двоеточия указывается к какой именно ссылке применяется стиль (link, visited, hover, active). Ну а то, что находится в фигурных скобках { } вам должно быть уже хорошо известно по предыдущим урокам. И не забывайте про совет: лучше всегда задавать цвет в HEX-формате со знаком решетка (#) впереди, а не писать имя цвета.

Пример изменения цвета ссылок в HTML-странице

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<title>Изменение цвета ссылок на странице</title>

a:link {color:#006699}

a:visited {color:#990066}

a:hover {color:#669900}

a:active {color:#FF0000}

</style>

</head>

<body>

<p><a href="http://seodon.ru/">Каксоздатьсайт</a></p>

<p><a href="http://spravka.seodon.ru/">Справочникипо HTML и CSS</a></p>

</body>

</html>

Результат в браузере

<10 11 121314 15 16 >

Дата добавления: 2015-12-11; просмотров: 955;