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

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

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

 

<style type="text/css">

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>

<meta http-equiv="Content-Type" content="text/html; charset=Windows-1251">

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

<style type="text/css">

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>

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

 








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


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

При помощи поиска вы сможете найти нужную вам информацию.

Поделитесь с друзьями:

Если вам перенёс пользу информационный материал, или помог в учебе – поделитесь этим сайтом с друзьями и знакомыми.
helpiks.org - Хелпикс.Орг - 2014-2024 год. Материал сайта представляется для ознакомительного и учебного использования. | Поддержка
Генерация страницы за: 0.003 сек.