| Главная |
| HTML |
| Введение |
| Основные параметры |
| Таблица и Ссылки |
| Текст |
| Разметка |
| Дополнительно |
| Стильные ссылки |
| Стильные курсоры |
| Таблица цветов |
| Софт |
| Скрипты |
| Форум |
| Ссылки |
| Webmaster |
|
|
CSS имеет несколько параметров для изменения стиля ссылок.
| Свойство | Значение | NS | IE |
|---|---|---|---|
| A:link A:visited A:active A:hover |
<style> <style> <style> <style> |
4+ 4+ 4+ 6+ |
4+ 4+ 4+ 4+ |
Обозначения: NS - Netscape Navigator, IE - Internet Explorer, 4+ - версия браузера 4 и выше.
Как видно из таблицы, поддержка селектора a:hover появилась в Netscape только начиная с 6 версии, а до этого просто отсутствовала, что вызывало у многих пользователей недоумение.
Селекторы|
A:link A:visited A:active A:hover |
Одно из наиболее популярных применений CSS - это убирание подчеркивания
у ссылок. С позиции юзабилити не совсем верное решение, поскольку
пользователь может сразу не догадаться, что текст, который он видит,
является ссылкой. Все ведь уже привыкли - раз подчеркивание используется,
значит это ссылка. Но при правильном применении отсутствие подчеркивания у
ссылок может придать определенный эффект сайту. Часто делается, что при
наведении курсора, ссылка становится подчеркнутой, меняет свой цвет или
используется и то и другое одновременно. Параметр hover не работает в Netscape до 6 версии, поэтому его
следует использовать осторожно.
Пример 1. Использование
параметра HOVER
| <style type="text/css"> A:link {text-decoration: none} // убирает подчеркивание для ссылок A:visited {text-decoration: none} A:active {text-decoration: none} A:hover {text-decoration: underline; color: red;} // делает ссылку красной и подчеркнутой при наведении на нее курсора </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;} // ссылка подчеркнутая, надчеркнутая и красного цвета </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;} // ссылка изменит свой размер на больший </style> |
Реклама
|