✎ Помощь начинающим и профессиональным блоггерам, создание, поддержка сайтов и блогов e-mail siteblogger@inbox.ru icq 353-724-370

Главная ›› Уроки по CSS, CSS3 ›› Стили ссылок в CSS

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

В одном из уроков рассказывалось, как сделать ссылку в HTML. В этом уроке мы поговорим о том какие стили ссылок используются в CSS и на примерах научимся с ними работать.

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

Как задать стиль ссылке в CSS?

В CSS можно изменить любое свойство ссылок (цвет, шрифт, цвет фона). Также для ссылок можно настроить стили, в зависимости от их состояния:

  • a:link — не посещенная ссылка;
  • a:visited — посещенная ссылка;
  • a:hover — ссылка, над которой находится курсор мыши;
  • a:active — ссылка в момент щелчка мыши.

Пример:

a:link {font-size:12px; color:#ff0000;}
a:visited {font-size:12px; color:#00ff00;}
a:hover {font-size:12px; color:#ff00ff;}
a:active {font-size:12px; color:#0000ff;}

При формировании стилей ссылок следует соблюдать правила:

1. «a:hover» должен определяться только после «a:link» и «a:visited»;
2. «a:active» должен определяться после «a:hover».

При оформлении текста ссылки используют также свойства:

1. text-decoration — задает подчеркивание текста ссылки.

Атрибуты:

  • blink — устанавливает мигающий текст;
  • line-through — создает перечеркнутый текст;
  • overline — линия проходит над текстом;
  • underline — устанавливает подчеркнутый текст;
  • none — отменяет все заданные по умолчанию эффекты;
  • inherit — значение наследуется у родителя.

Пример:

a:link {text-decoration:none;}
a:visited {text-decoration:none;}
a:hover {text-decoration:underline;}
a:active {text-decoration:underline;}

2. background-color — задает цвет фона ссылок.

Пример:

a:link {background-color:#b2аа99;}
a:visited {background-color:#ffff85;}
a:hover {background-color:#gg704d;}
a:active {background-color:#ff7ddd;}

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

Поделитесь ссылкой! Подпишитесь на обновления, чтобы получать новые публикации!

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

Siteblogger.ru – проект, охватывающий достаточно широкий круг вопросов: создание сайтов и блогов на WordPress, поисковые системы, поисковая оптимизация и продвижение сайтов, способы заработка в сети, эффективные инструменты работы в Интернете и другое. Кроме того, мы оказываем услуги создания сайтов и блогов на WordPress с последующим их продвижением, а также занимаемся настройкой и ведением контекстной рекламы Яндекс.Директ и Google Adwords. По поводу сотрудничества просьба обращаться через контакты, все заявки и предложения будут обязательно рассмотрены. При использовании материалов данного сайта, пожалуйста, указывайте прямую индексируемую ссылку на Siteblogger.ru.

«Как создать и продвинуть свой сайт»

2011–2016 © Siteblogger.ru
Рейтинг@Mail.ru