В css мы можем задать любой стиль ссылкам. Рассмотрим, как это сделать. Что такое ссылки можно посмотреть тут - 7 Урок. Ссылки в HTML.
Стиль ссылок для всей страницы
Посмотрим, как указываются свойства к ссылкам в css:
- a:link - обычная ссылка;
- a:visited - посещенная ссылка;
- a:hover - ссылка в момент наведения;
- a:active - ссылка в момент нажатия.
Давайте сразу посмотрим, как задать стили для всех ссылок на странице. В html части ничего особенного писать не нужно, достаточно наличие ссылки:
<HTML>
<head>
<title>Моя страница</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<a href="#">Ссылка</a>
</body>
</HTML>
Тут ссылка ведёт сама на себя.
Css часть:
a:link {color: red;}
a:visited {color: red;}
a:hover {color: green;}
a:active {color: blue;}
Вот такую ссылку мы получим:
Примечание: По умолчанию все ссылки подчеркнутые. Чтобы убрать подчеркивание - достаточно прописать в стили text-decoration: none. В общем, можно писать любые свойства, которые применяются к тексту.
В примере выше мы сделали одинаковые стили к обычной и посещенной ссылке. Но можно и не писать 2 раза одинаковые стили, а записать более короче:
a {color: red;}
a:hover {color: green;}
a:active {color: blue;}
Стиль ссылок для отдельного элемента
Если нужно задать стиль не для всей страницы, а лишь для какого-то элемента, например, параграфа, то в css нужно записать так:
p a {color: red;}
p a:hover {color: green;}
p a:active {color: blue;}
В этом случае ссылки изменятся только в параграфах. Таким же образом можно задать стиль для ссылок, например, которые находятся в контейнере <div>.
Стиль для отдельной ссылки
Если мы хотим задать стиль только одной ссылки, можно это сделать с помощью селектора класса.
Для этого ссылке нужно прописать класс:
<a href="#" class="xxx">Ссылка с классом</a>
А в стилях при оформлении ссылки указываем ее класс:
a.xxx {color: red;}
a:hover.xxx {color: green;}
a:active.xxx {color: blue;}
Тогда остальные ссылки на странице останутся нетронутыми, изменения произойдут только в ссылке с классом xxx.
Есть еще один вариант, чтобы задать стиль только одной ссылке. Можно просто заключить ее в какой-то элемент, например, span, а потом в css прописать стили к span.
Html часть:
<span class="xxx"><a href="#">Ссылка</a></span>
Css часть:
span.xxx a {color: red;}
span.xxx a:hover {color: green;}
span.xxx a:active {color: blue;}
Заключение
Таким образом можно делать любые стили к ссылками в css. Даже можно замаскировать ссылки так, чтобы он вообще не бросались в глаза и сливались с основным текстом.
