Псевдостили гиперссылок

А теперь мы узнаем еще об одной интересной возможности, предлагаемой Web-дизайнеру таблицами стилей. Это псевдостили гиперссылок, позволяюие в достаточно широких пределах менять внешний вид гиперссылок на ваших страницах.

Вы уже знаете, что для каждой Web-страницы можно задать цвет фона, текста и кодировку текста. Кроме того, HTML позволяет вам также сменить цвета гиперссылок, отдельно — для непосещенных, отдельно — для посещенных и отдельно — для активной гиперссылки. Этр позволяет немного оживить Web-сайт, сделать его не похожим на другие. Но возможности, предлагаемые псевдостилями, несравнимо шире. Вы можете менять шрифт, начертание и даже убирать надоевшее подчеркивание у активной гиперссылки.

Но как же это делается? Обычным переопределением стилей во внешней или внутренней таблице.

Но сначала давайте перечислим все доступные в данный момент псевдостили. Как видно из табл. 10.1, всего их четыре.

Таблица 10.1. Псевдостили гиперссылок


	Псевдостиль	Описание
	A: link	Применяется ко всем гиперссылкам документа
	A: active	Применяется ко всем активным гиперссылкам документа
	A: visited	Применяется ко всем посещенным гиперссылкам документа
	A: hover	Применяется к гиперссылке, на которую указывает курсор мыши

Теперь давайте создадим небольшой пример Web-странички, использующей псевдостили.

<ТIТLЕ>Псевдостили</ТIТLЕ> <STYLE>

A: link { color: tCC0000;

background-color: #FFFFFF; text-decoration: none } A: activ

e { color: #FFFFFF;

background-color: #CC0000; text-decoration: none } A: visited

{ color: #CC0000;

background-color: ttFFFFFF; text-decoration: line-through } A: hover

{ color: #FFFFFF;

background-color: #CC0000; text-decoration: none }

</STYLE>

</HEAD>

<BODY>

<P><A НRЕF="">Гиперссылка 1</А></Р>

<P><A НRЕF="">Гиперссылка 2</А></Р>

<P><A НRЕF="">Гиперссылка 3 </А></Р>

</BODY>

</HTML>

Сохраните эту страницу в файле 10.2.htm и откройте в Web-обозревателе. Попробуйте провести курсором мыши над любой гиперссылкой и посмотрите, что из этого получится.

Автор не будет подробно разбирать таблицу стилей и ее атрибуты. Попробуйте разобраться в ней сами. Учтите только, что атрибут background-color задает цвет фона текста, а атрибут text-decoration — подчеркивание или зачеркивание текста. Значение line-through последнего задает зачеркивание текста, а попе — отсутствие подобного "украшения".

Вообще, псевдостили лучше всего задавать во внешней таблице стилей, поскольку все таблицы сайта должны выглядеть одинаково. Тем более это касается гиперссылок. Представьте себе удивление и гнев посетителя, если на различных страницах гиперссылки отображаются разным цветом.

Содержание раздела