Стильные ссылки

CSS имеет несколько параметров для изменения стиля ссылок.

A:link
Определяет стиль для обычной непосещенной ссылки.
A:visited
Определяет стиль для посещенной ссылки.
A:active
Определяет стиль для активной ссылки. Активной ссылка становится при нажатии на нее.
A:hover
Определяет стиль для ссылки при наведении на нее мышью. Не поддерживается браузером Netscape до 6 версии.

Одно из наиболее популярных применений CSS — это убирание подчеркивания у ссылок. С позиции юзабилити не совсем верное решение, поскольку пользователь может сразу не догадаться, что текст, который он видит, является ссылкой. Все ведь уже привыкли — раз подчеркивание используется, значит это ссылка. Но при правильном применении отсутствие подчеркивания у ссылок может придать определенный эффект сайту. Часто делается, что при наведении курсора, ссылка становится подчеркнутой, меняет свой цвет или используется и то и другое одновременно. Параметр hover не работает в Netscape до 6 версии, поэтому его следует использовать осторожно.

Пример 1. Использование параметра HOVER

<style type="text/css">
A:link {text-decoration: none} // <em>убирает подчеркивание для ссылок</em>
A:visited {text-decoration: none}
A:active {text-decoration: none}
A:hover {text-decoration: underline; color: red;} // <em>делает ссылку красной и подчеркнутой при наведении на нее курсора</em>
</style>

Ниже приведено использование данного примера. При наведении курсора на ссылку, она становится подчеркнутой и красной.

Еще один пример демонстрирует использование в ссылках подчеркивания и надчеркивания одновременно. При этом эффекте тонкие линии будут появляться над и под ссылкой при наведении на нее курсора. Это достигается применением параметра text-decoration: underline overline в A:hover.

Пример 2. Использование подчеркивания в ссылках

<style type="text/css">
A:link {text-decoration: none}
A:visited {text-decoration: none}
A:active {text-decoration: none}
A:hover {text-decoration: underline overline; color: red;} // <em>ссылка подчеркнутая, надчеркнутая и красного цвета</em>
</style>

Третий пример показывает, как изменять размер ссылки при наведении на нее курсора.

Пример 3. Изменение размера ссылки

<style type="text/css">
A:link {text-decoration: none}
A:visited {text-decoration: none}
A:active {text-decoration: none}
A:hover {font-size: 24; font-weight: bold; color: red;} // <em>ссылка изменит свой размер на больший</em>
</style>

Влад Мержевич

Рекомендуем почитать:
Такие разные ссылки
Стильные курсоры
Металлический текст


Оставить комментарий: