Оформление ссылок с использованием стиля css

 

css

По умолчанию все ссылки в сайте выделяются синим цветом и имеют стандартный вид.

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

  • - a:link - ссылки не посещенные;
  • - a:visited - ссылки после посещения  пользователем;
  • - a:hover -  пользователь провел над;
  • - a:active - ссылки активные. 

Для оформления ссылок используются псевдоклассы. Для каждой ссылки можно установить и применить  следующие параметры: 

{font-size; text-decoration; color; font-weight;  font –family; } 

При этом создается новый стиль, а последовательность выше описанную -  необходимо соблюдать.

Существует возможность оформления ссылки в любом тэге, так называемый комбинированный способ. Далее приводится несколько примеров  оформления ссылок. 

Изменение цвета подчеркивания

Со ссылками, при помощи CSS, можно сделать интересную особенность. Цвет ссылки, при наведении на нее курсора мыши, остается неизменным, но зато у нее появляется подчеркивание другого цвета, нежели сама ссылка. Данный прием не работает в браузерах Netscape 4.x и Internet Explorer 5. 

Пример: Изменение цвета подчеркивания у ссылок

<html>
<head> 

<style>
a:link { color: blue; text-decoration: none }
 a:hover { color: red; text-decoration: underline }
.link { color: blue }
</style> 

<body>
<a href=link1.html><span class=link>Ссылка</span></a>
</body>

</head>

</html> 

Создание подчеркивания

Подчеркивание текста у ссылок настолько устоялось, что любое другое применение такого оформления будет с ними ассоциироваться. Чтобы не вводить посетителей сайта в заблуждение, никогда не используйте подчеркивание для обычного текста, только для ссылок. Но подчеркивание можно использовать разное, например, в виде пунктирной линии. Для этого создадим новый стиль, в котором будем использовать параметр border-bottom, он создает линию под текстом; 

Пример:  Создание пунктирного подчеркивания для ссылок

<html>
<head>

<style>
A {color: #FF0000;}
A:visited {color: #666666;}
A:hover { text-decoration: none; border-bottom: 1px dashed blue; }</style>

</head> 

<body>
<a href=1.html>Подчеркнутая ссылка</a>
</body>

</html>  

В примере создается стиль для ссылки, который при наведении не нее курсором мыши создает у текста пунктирное подчеркивание синего цвета.