CSS. Ссылки.

     Из уроков HTML вы знаете что ссылки специфицируются тегом <a>. Так вот, в CSS мы также можем использовать этот тег в качестве селектора. Так, например, мы можем задать цвет ссылок на всей странице.

Пример:

<html>
<head>
<title>Ссылки</title>
<style type="text/css">
a {color: red;}
</style>
</head>
<body>
Внутренняя ссылка:<br>
<a href="kartinki.php">Вставляем картинки </a> <br>
</body>
</html>

 

Результат: (открыть в браузере)


 

     Но, ведь ссылки еще могут иметь разные состояния: посещённая или непосещённая, или создавать всевозможные эффекты при прохождении указателя мыши над ней. Для этого используются псевдоклассы: link, visited, active, hover.
     Рассмотрим каждый их этих четырёх псевдоклассов.
     Псевдокласс: link.
Используется для непосещённых ссылок.
     Псевдокласс: visited.
Используется для посещённых ссылок.
     Псевдокласс: active.
Используется для активных ссылок.
     Псевдокласс: hover.
используется для ссылок, над которыми находится указатель мыши.

Пример:

<html>
<head>
<title>Ссылки</title>
<style type="text/css">
a:link {font-size:12px; color:red;}
a:visited {font-size:12px; color:#6699CC;}
a:hover {font-size:13px; color:gray;}
</style>
</head>
<body>
Ссылка на другой сайт <br>
<a href="https://www.spylog.ru/">Счетчик для сайта</a>
</body>
</html>
 

Результат: (открыть в браузере)


 

     Итак, что мы видим: непосещенная ссылка красного цвета (если нет, почистите кэш в браузере), при наведении на ссылку- серый цвет и увеличение размера букв с 12 до 13 px., а посещенная ссылка синего цвета. Псевдокласс active я не использовал.

  Смотрите также:

     Как удалить подчёркивание ссылок?

Загрузка...