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