Главная » CSS » CSS Ссылки
CSS Ссылки
CSS имеет несколько параметров для изменения стиля ссылок.
Свойство | Значение | NC | IE |
---|---|---|---|
A:link A:visited A:active A:hover |
<style> <style> <style> <style> |
4+ 4+ 4+ 6+ |
4+ 4+ 4+ 4+ |
Обозначения: NC - Netscape Communicator, IE - Internet Explorer, 4+ - версия браузера четыре и выше.
Как видно из таблицы, поддержка селектора a:hover появилась в Netscape только начиная с 6 версии, а до этого просто отсутствовала, что вызывало у многих пользователей недоумение.
Селекторы
A:link
A:visited
A:active
A:hover |
Ссылки без подчеркивания
Одно из наиболее популярных применений CSS - это убирание подчеркивания у ссылок. С позиции юзабилити не совсем верное решение, поскольку пользователь может сразу не догадаться, что текст, который он видит, является ссылкой. Все ведь уже привыкли - раз подчеркивание используется, значит это ссылка. Но при правильном применении отсутствие подчеркивания у ссылок может придать определенный эффект сайту. Часто делается, что при наведении курсора, ссылка становится подчеркнутой, меняет свой цвет или используется и то и другое одновременно. Параметр hover не работает в Netscape до 6 версии, поэтому его следует использовать осторожно.
Пример 1. Подчеркивание у ссылки и изменение ее цвета
|
Ниже приведено использование данного примера. При наведении курсора на ссылку, она становится подчеркнутой и красной.
НАВЕДИ СЮДА КУРСОР, УВИДИШЬ РЕЗУЛЬТАТ |
Подчеркнутые и надчеркнутые ссылки
Еще один пример демонстрирует использование в ссылках подчеркивания и надчеркивания одновременно. При этом эффекте тонкие линии будут появляться над и под ссылкой при наведении на нее курсора. Это достигается применением параметра text-decoration: underline overline в селекторе A:hover.
Пример 2. Использование подчеркивания в ссылках
|
НАВЕДИ СЮДА КУРСОР, УВИДИШЬ РЕЗУЛЬТАТ |
Изменение размера ссылки
Третий пример показывает, как изменять размер ссылки при наведении на нее курсора.
Пример 3. Изменение размера ссылки
|
НАВЕДИ СЮДА КУРСОР, УВИДИШЬ РЕЗУЛЬТАТ |
Изменение цвета подчеркивания
Со ссылками, при помощи CSS, можно сделать интересную особенность. Цвет ссылки, при наведении на нее курсора мыши, остается неизменным, но зато у нее появляется подчеркивание другого цвета, нежели сама ссылка. Данный прием не работает в браузерах Netscape 4.x и Internet Explorer 5.
Пример 4. Создание подчеркивание другого цвета
|
НАВЕДИ СЮДА КУРСОР, УВИДИШЬ РЕЗУЛЬТАТ |
Ссылки разных цветов
Часто возникает необходимость на одной странице использовать ссылки разных цветов и размеров. И применять для каждой области веб-страницы ссылки подходящего типа. Одни для меню, другие для текста. Создаем два или больше класса со своими параметрами и применяем их по своему усмотрению. В нижеприведенном примере достаточно поменять значения у соответствующего класса, и цвета у ссылок, где этот класс используются изменятся автоматически.
Пример 5. Ссылки разных цветов
|
| Ссылка 1 | Ссылка 2 | Ссылка 3 |
Замечание: если цвет в каскадной таблице указывать у ссылки (тег A), то замечены ошибки в браузерах Netscape (цвет ссылки не меняется) и Opera (цвет черты подчеркивания ссылки не меняется), поэтому для надежности можно использовать вложенный внутрь ссылки тег DIV с прописанным в каскадной таблице цветом.
Пример 6. Использование вложенного тега DIV <html>
<head>
<style>
.Red { font-size: 14px; color: red }
</style>
<body link=#0000ff>
<a href="..."><div class="Red">Red Link</div></a>
</body>
</html>
Рекомендуем почитать