Ссылки (text-decoration, :hover, :active, :visited, :link)

По умолчанию практически во всех браузерах ссылки выглядят одинаково: они подчёркнуты чертой и имеют синий цвет. Все эти свойства можно переопределить через CSS. Для начала попробуем изменить положение черты, используя свойство text-decoration, которое может принимать значения "underline", "overline", "line-through", "none". Рассмотрим последовательно эффект от каждого.

Рассмотрим ссылку:
<a href="/">MouseDC.ru</a>
Так будет выглядеть обычная ссылка на сайте, на котором нет никаких CSS правил (дизайн ссылки задаётся полностью браузером):
MouseDC.ru
overline ставит линию над текстом
<a href="/" style="text-decoration: overline;">MouseDC.ru</a>
результат:
MouseDC.ru
line-through перечёркивает текст посередине
<a href="/" style="text-decoration: line-through;">MouseDC.ru</a>
результат:
MouseDC.ru
underline подчёркивает текст снизу (это значение по умолчанию в браузерах)
<a href="/" style="text-decoration: underline;">MouseDC.ru</a>
результат:
MouseDC.ru
none убирает подчёркивание:
<a href="/" style="text-decoration: none;">MouseDC.ru</a>
результат:
MouseDC.ru

Состояния ссылок

Браузеры умеют понимать состояние ссылок. Этих состояний может быть несколько. Их можно отследить и задать им CSS свойства. Для этого используются псевдоклассы: ":hover" - это псевдокласс, который указывает на состояние, при котором на ссылку навели курсор мыши. Пример использования в CSS коде:
a:hover{
   font-size: 30px;
   color: red;
}
Псевдокласс ":hover" есть не только у ссылок, но и у любых других тегов. Этот псевдокласс часто применяется для создания выпадающих меню, которые появляются при наведении мышкой на пункт-родитель.


":active" - указывает на то, что на элемент кликнули и зажали кнопку мыши, но ещё не отпустили.

":visited" - указывает на то, что пользователь уже переходил по этой ссылке.

":link" - псевдокласс по умолчанию. Указывает на ссылку, которую ещё не посетили.

К примеру, если вы уже переходили по ссылке на странице, то она изменяет свой цвет. Если поднести курсор мыши к ссылке, то она окрасится в другой цвет. Если кликнуть на ссылку и зажать кнопку мыши, то . Свойства таких ссылок можно задать через CSS. Попробуем это сделать, на примере использования псевдокласса ":visited".
a:visited {
   color: green;
}
MouseDC.ru - хостинг, виртуальный хостинг, покупка доменов, проверка доменов, WHOIS, покупка SSL сертификатов, доработка сайтов, сопровождение сайтов, разработка сайтов, техподдержка сайтов
Была ли эта статья полезна? Есть вопрос?
Cмотрите другие статьи: