Состояния css ссылок
Введение
С помощью css можно определить множество различных наборов стилей для ссылок.
Придел Вашей фантазии
С помощью css стилей можно установить правила (цвет, подчеркивание, и т.д) для посещенных и не посещенных пользователем ссылок, а также стиль ссылки при наведении на нее курсора мыши.
Псевдоклассы
Установить различные стили для разных состояних ссылок можно с помощью псевдо-классов html элемента <a>
Синтаксис псевдоклассов
seletor:psevdo class{
property:value;
}
Возможные псевдоклассы для ссылок.
Существует 4 псевдо класса для ссылки:
- a:link - определяет первоначальный стиль для ссылки.
- a:visited - определяет стиль ссылки, которую пользователь уже посетил.
- a:hover - определяет стиль ссылки при наведении на нее курсора.
- a:active - определяет стиль активной ссылки.
Большая гибкость
Благодаря css можно с легкостью определить стиль ссылки для каждого состояния ссылки.
Приоритеты состояний ссылки
Состояния ссылки описанные в css имеют свои приоритеты, ниже мы рассмотрим приоритеты состояний ссылки:
- Стили ссылки a:link имеют наименьший приоритет
- Стили ссылки a:visited перекрывают стили для a:link
- Стили ссылки a:hover перекрывают стили для всех остальных состояний
- Стили ссылки a:active перекрывают стили для a:link
Примеры применения css стилей для псевдоклассов
Примеры показанные ниже, очень просто осуществить с помощью css.
1.Убираем подчеркивание
Как правило, по умолчанию ссылки синего цвета и подчеркнуты.
Весьма распространенным явлением среди веб мастеров является то, что подчеркивание убирается для ссылки (a:link), а появляется при наведении на текст ссылки (a:hover)
С помощью css этого очень легко добится...
a:link{
text-decoration:none;
}
a:visited {
text-decoration:none;
}
a:hover {
text-decoration:underline;
color:#FF0000;
}
a:active {
text-decoration:none;
}
2.Для a:hover добавляем верхнее и нижнее подчеркивание
Чтоб добавить нижнее подчеркивание и верхнее одновременно для ссылки, когда на нее наведен курсор, нужно в css прописать следующие правила:
a:link{
text-decoration:none;
}
a:visited {
text-decoration:none;
}
a:hover {
text-decoration:underline overline;
color:#FF0000;
}
a:active {
text-decoration:none;
}
3. Создаение простейшего роловера
Этот эффект "роловера" очень простой и достигается он путем добавления фоновой заливки для ссылки при наведении курсора.
a:link{
text-decoration:none;
}
a:visited {
text-decoration:none;
}
a:hover {
text-decoration:underline;
color:#FF0000;
background:#FFFFCC;
}
a:active {
text-decoration:none;
}
4. Изменение размера шрифта
Можно еще немного пофантазировать и для ссылки, которая находится в фокусе курсора, добавить изменение размера шрифта.
a:link{
text-decoration:none;
}
a:visited {
text-decoration:none;
}
a:hover {
text-decoration:underline;
color:#FF0000;
background:#FFFFCC;
font-size:150%;
}
a:active {
text-decoration:none;
}
Использование классов
Вы можете создать также различные стили для 4 состояний ссылок на сайте путем добавления в css классов для селектора <a>
a.link:link{
text-decoration:none;
}
a.link:visited {
text-decoration:none;
}
a.link:hover {
text-decoration:underline;
color:#FF0000;
background:#FFFFCC;
font-size:150%;
}
a.link:active {
text-decoration:none;
}
a.link-2:link{
text-decoration:underline overline;
}
a.link-2:visited {
text-decoration:none;
}
a.link-2:hover {
text-decoration:underline;
color:#FF0000;
background:#FFFFCC;
font-size:150%;
}
a.link-2:active {
text-decoration:none;
}
Оригинал: CSS Links
Добавить комментарий
