|
|
|
Псевдостили
гиперссылок
А
теперь мы узнаем еще об одной интересной возможности, предлагаемой 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 последнего задает зачеркивание текста, а попе — отсутствие подобного
"украшения". Вообще, псевдостили лучше всего задавать во внешней таблице стилей, поскольку все таблицы сайта должны выглядеть одинаково. Тем более это касается гиперссылок. Представьте себе удивление и гнев посетителя, если на различных страницах гиперссылки отображаются разным цветом.
Используются технологии uCoz
|