Псевдостили гиперссылок
А теперь мы узнаем еще об одной интересной возможности, предлагаемой Web-дизайнеру таблицами стилей. Это псевдостили гиперссылок, позволяющие в достаточно широких пределах менять внешний вид гиперссылок на ваших страницах.
Вы уже знаете, что для каждой Web-страницы можно задать цвет фона, текста и кодировку текста. Кроме того, HTML позволяет вам также сменить цвета гиперссылок, отдельно – для непосещенных, отдельно – для посещенных и отдельно – для активной гиперссылки. Это позволяет немного оживить Web-сайт, сделать его не похожим на другие. Но возможности, предлагаемые псевдостилями, несравнимо шире. Вы можете менять шрифт, начертание и даже убирать надоевшее подчеркивание у активной гиперссылки.
Но как же это делается? Обычным переопределением стилей во внешней или внутренней таблице.
Но сначала давайте перечислим все доступные в данный момент псевдостили. Как видно из табл. 10.1, всего их четыре.
Таблица 10.1. Псевдостили гиперссылок.
| Псевдостиль | Описание |
|---|---|
| A: link | Применяется ко всем гиперссылкам документа |
| A: active | Применяется ко всем активным гиперссылкам документа |
| A: visited | Применяется ко всем посещенным гиперссылкам документа |
| A: hover | Применяется к гиперссылке, на которую указывает курсор мыши |
Теперь давайте создадим небольшой пример Web-странички, использующей псевдостили.
<HTML> <HEAD> <TITLE>Псевдостили</TITLE> <STYLE> A:link { color: tCC0000; background-color: #FFFFFF; text-decoration: none } A:active { 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 HREF="">Гиперссылка 1</A> </P> <P> <A HREF="">Гиперссылка 2</A> </P> <P> <A HREF="">Гиперссылка 3 </A> </P></BODY> </HTML>Сохраните эту страницу в файле 10.2.htm и откройте в Web-обозревателе. Попробуйте провести курсором мыши над любой гиперссылкой и посмотрите, что из этого получится.
Автор не будет подробно разбирать таблицу стилей и ее атрибуты. Попробуйте разобраться в ней сами. Учтите только, что атрибут background-color задает цвет фона текста, а атрибут text-decoration – подчеркивание или зачеркивание текста. Значение line-through последнего задает зачеркивание текста, а none – отсутствие подобного "украшения".
Вообще, псевдостили лучше всего задавать во внешней таблице стилей, поскольку все таблицы сайта должны выглядеть одинаково. Тем более это касается гиперссылок. Представьте себе удивление и гнев посетителя, если на различных страницах гиперссылки отображаются разным цветом.