• RSS

Главная ›› Уроки по 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 позволяют предать ссылкам определенное визуальное отображение, что также весьма полезно.

Поделиться ссылкой:


« 
 »

Читайте также:

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


  • RSS

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

2011–2017 © Siteblogger.ru
16+
Рейтинг@Mail.ru  
Наверх