Домой / Учебник Css / 4 Урок. Ссылки в css

4 Урок. Ссылки в css

В 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. Даже можно замаскировать ссылки так, чтобы он вообще не бросались в глаза и сливались с основным текстом.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *