css стили ссылок

CSS стили ссылокПозволю себе напомнить Вам, что ссылки одна из важнейших составляющих интернета. Попробуйте представить себе сайт без навигации, браузер без адресной строки и панели закладок, или электронную книгу без страницы с содержанием. Можно продолжить перечисление, но думаю, Вы и сами понимаете всю важность гиперссылок. Я уже писал о создании ссылок с помощью языка HTML. Однако, CSS стили позволяют более удобно проводить различные манипуляции с созданием ссылок и оформлением их внешнего вида.

CSS стили ссылок для работы используют псевдоклассы — это классы CSS, с помощью которых возможно динамическое изменение состояния веб-объектов во времени, или под воздействием посетителей. Применение псевдоклассов для изменения внешнего вида ссылки в определённый момент — характернейший пример работы последних. Вот основные из таких псевдоклассов (в примере сразу показан и листинг написания):

  • А:hover { параметр: значение; } — вид ссылки при наведённом курсоре мыши.
  • active — вид активной ссылки.
  • visited — вид посещённой ссылки.
  • link — ссылку ещё не посещали (по умолчанию).

Посмотрим, как это выглядит в коде и на скриншоте:

<html>
<head>
<title>hover</title>
<style type="text/css">
a:link {
color: #ff50dc;
text-decoration: none;
}
a:hover {
text-decoration: underline;
color: #018000;
}
a:visited {
color: #ff7625;
text-decoration: none;
}
</style>
</head>
<body>
<p><a href="#">Неактивная ссылка</a></p>
<p><a href="#">Ссылка при наведённом курсоре</a></p>
<p><a href="#">Посещённая ссылка</a></p>
</body>
</html>

Стили CSS для ссылок

На рисунке видно, что убрано подчёркивание в непосешённых и посещённых ссылках, а при наведении курсора мыши подчёркивание появляется.

Теперь позволю себе напомнить понятие состояния ссылок.

  • Ссылка считается активной в момент нажатия на нее курсором мышки, данный момент очень незначителен по времени, и я не вижу смысла в применении данного значения.
  • Посещённой ссылка становится после перехода по ней на указанный адрес.
  • Неактивная ссылка — это ссылка в своём обычном состоянии, когда с ней не производится никаких действий.
  • Ну, и ссылка в момент наведения на неё курсора в объяснении не нуждается.

Управление ссылками с помощью стилей CSS возможно и без использования псевдоклассов. Делается это с помощью обращения CSS стилей ссылок к тегу А. Данный приём используется для задания ссылкам одинаковых параметров при любых состояниях (при желании не выделять ссылки из всего текста), или для определения лишь неактивных ссылок, с последующим использованием псевдоклассов. Допускается применение сокращённой записи при задании свойств CSS для тега А. Давайте посмотрим пример:

<html>
<head>
<title>link</title>
<style type="text/css">
a {color:black; text-decoration:none;}
a:hover {
text-decoration: none;
color: #018000;
background-color: #ffe7d8
}
a:visited {
color: #ff7625;
text-decoration:line-through;
}
</style>
</head>
<body>
<p><a href="#">Неактивная ссылка</a></p>
<p><a href="##">Ссылка при наведённом курсоре</a></p>
<p><a href="###">Посещённая ссылка</a></p>
</body>
</html>

CSS стили ссылок

Применение других параметров CSS стилей к оформлению ссылок, расположенных, например в составе меню, различных отступов, рамок, фонов и т.п. будет рассмотрено отдельно. А пока всё.

Поделиться в соц. сетях

Опубликовать в Google Buzz
Опубликовать в Google Plus
Опубликовать в LiveJournal
Опубликовать в Мой Мир
Опубликовать в Одноклассники

Реклама

Оставить комментарий

Перед отправкой формы:
Human test by Not Captcha