Этот сайт - часть системы сайтов для начинающих веб-мастеров
|
А теперь мы
узнаем еще об одной интересной возможности, предлагаемой Web-дизайнеру таблицами
стилей. Это псевдостили гиперссылок, позволяюие
в достаточно широких пределах менять внешний вид гиперссылок на ваших страницах.
Вы уже знаете,
что для каждой Web-страницы можно задать цвет фона, текста и кодировку текста.
Кроме того, HTML позволяет вам также сменить цвета гиперссылок, отдельно — для
непосещенных, отдельно — для посещенных и отдельно — для активной гиперссылки.
Этр позволяет немного оживить Web-сайт, сделать его не похожим на другие. Но
возможности, предлагаемые псевдостилями, несравнимо шире. Вы можете менять шрифт,
начертание и даже убирать надоевшее подчеркивание у активной гиперссылки.
Но как же
это делается? Обычным переопределением стилей во внешней или внутренней таблице.
Но сначала
давайте перечислим все доступные в данный момент псевдостили. Как видно из табл.
10.1, всего их четыре.
Таблица
10.1. Псевдостили гиперссылок
Псевдостиль |
Описание |
||
A: link |
Применяется ко
всем гиперссылкам документа |
||
A: active |
Применяется ко
всем активным гиперссылкам документа |
||
A: visited |
Применяется ко
всем посещенным гиперссылкам документа |
||
A: hover |
Применяется к
гиперссылке, на которую указывает курсор мыши |
||
Теперь давайте
создадим небольшой пример Web-странички, использующей псевдостили.
<HTML>
<HEAD>
<Т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
последнего задает зачеркивание текста, а попе — отсутствие подобного "украшения".
Вообще, псевдостили
лучше всего задавать во внешней таблице стилей, поскольку все таблицы сайта
должны выглядеть одинаково. Тем более это касается гиперссылок. Представьте
себе удивление и гнев посетителя, если на различных страницах гиперссылки отображаются
разным цветом.