Для управления видом различных ссылок в CSS (ЦСС) используются псевдоклассы, которые указываются после селектора A через двоеточие. В табл. 1 приведены допустимые псевдоклассы и их описания.
Свойство | Описание |
---|---|
A:link | Определяет стиль для обычной непосещенной ссылки. |
A:visited | Определяет стиль для посещенной ссылки. |
A:active | Определяет стиль для активной ссылки. Активной ссылка становится при нажатии на нее. |
A:hover | Определяет стиль для ссылки при наведении на нее мышью. |
Обычно использование псевдокласса link имеет тот же эффект, что и применение стиля к селектору A. Поэтому этот псевдокласс можно опустить.
Одно из наиболее популярных применений CSS (ЦСС) — это скрытие подчеркивания у ссылок. С позиции юзабилити не совсем верное решение, поскольку пользователь может сразу не догадаться, что контент, который он видит, является ссылкой. Все ведь уже привыкли — раз нижняя полоска в контенте используется, значит это ссылка. Но при правильном применении отсутствие подчеркивания у ссылок может придать определенный эффект сайту. Часто делается, что при наведении курсора, ссылка становится подчеркнутой, меняет свой цвет или используется и тот и другой эффект одновременно (пример 1).
Пример 1. нижняя полоска в контенте у ссылки и изменение ее цвета
Ниже приведено использование данного примера. При наведении курсора на ссылку, она становится подчеркнутой и красной.
Еще один пример демонстрирует использование в ссылках подчеркивания и надчеркивания одновременно. При этом эффекте тонкие линии будут появляться над и под ссылкой при наведении на нее курсора. Это достигается применением параметра text-decoration: underline overline в селекторе A:hover.
Пример 2. Использование подчеркивания в ссылках
Результат данного примера показан ниже.
Пример 3 показывает, как изменять размер ссылки при наведении на нее курсора.
Пример 3. Изменение размера ссылки
Результат данного примера показан ниже.
Со ссылками, при помощи CSS (ЦСС), можно сделать интересную особенность. Цвет ссылки, при наведении на нее курсора мыши, остается неизменным, но зато у нее появляется нижняя полоска в контенте другого цвета, нежели сама ссылка (пример 4). Учтите, что данный прием не работает в некоторых браузерах.
Пример 4. Создание нижняя полоска в контенте другого цвета
Результат данного примера показан ниже.
Часто возникает необходимость на одной странице использовать ссылки разных цветов и размеров. И применять для каждой области web-страницы ссылки подходящего типа. Одни для меню, другие для контента. В этом случае создаем два или больше класса со своими параметрами и применяем их по своему усмотрению. В примере 6 дастаткова поменять значения у соответствующего класса, и цвета у ссылок, где этот класс используются, изменятся автоматически.
Пример 5. Ссылки разных цветов
Результат данного примера показан на рис. 1.
Рис. 1. Разные ссылки на одной странице
Copyright © 2009-2022 | По всем вопросам: donmobi@mail.ru
О нашем Internet проекте | Наши планы | Контент нашего сайта | Есть ошибки... | Технологии | Поддержать проект