В этой статье рассказывается о том, как установить различные свойства гиперссылки с помощью CSS. Вы легко сможете установить следующие свойства гиперссылки - Мы перейдем к тем же свойствам, когда будем обсуждать псевдоклассы CSS.
- :link означает непосещенную гиперссылку.
- :visited означает посещенную гиперссылку.
- :hover означает элемент, над которым в настоящее время находится указатель мыши пользователя, зависший над ним.
- :active обозначает элемент, на который пользователь в данный момент нажимает.
Обычно все эти свойства хранятся в заголовочной части документа HTML.
Помните a:hover ДОЛЖЕН быть после a:link и a:visited в определении CSS, чтобы быть эффективным. Кроме того, a:active ДОЛЖЕН прибыть после a:hover в определении CSS -
<style type="text/css">
a:link {color: #000000}
a:visited {color: #006600}
a:hover {color: #FFCC00}
a:active {color: #FF00CC}
</style>
Теперь мы увидим, как использовать эти свойства, чтобы давать разные эффекты для гиперссылок.
Установка цвета ссылок
В следующем примере показано, как установить цвет ссылки. Возможные значения могут быть любым именем цвета в любом допустимом формате.
<html>
<head>
<style type="text/css">
a:link {color:#000000}
</style>
</head>
<body>
<a href="">Link</a>
</body>
</html>
Он произведет следующую черную ссылку:
Установка цвета посещенных ссылок
В следующем примере показано, как установить цвет посещенных ссылок. Возможные значения могут быть любым именем цвета в любом допустимом формате.
<html>
<head>
<style type="text/css">
a:visited {color: #006600}
</style>
</head>
<body>
<a href=""> link</a>
</body>
</html>
Он выдает следующую ссылку.
Как только вы нажмете эту ссылку, она изменит свой цвет на зеленый.
Изменение цвета ссылок при наведении курсора мыши
В следующем примере показано, как изменить цвет ссылок, когда мы наводим указатель мыши на эту ссылку. Возможные значения могут быть любым именем цвета в любом допустимом формате.
<html>
<head>
<style type="text/css">
a:hover {color: #FFCC00}
</style>
</head>
<body>
<a href="">Link</a>
</body>
</html>
Он выдает следующую ссылку.
Теперь вы наводите указатель мыши на эту ссылку, и вы увидите, что она меняет свой цвет на желтый.
Изменение цвета активных ссылок
В следующем примере показано, как изменить цвет активных ссылок. Возможные значения могут быть любым именем цвета в любом допустимом формате.
<html>
<head>
<style type="text/css">
a:active {color: #FF00CC}
</style>
</head>
<body>
<a href="">Link</a>
</body>
</html>
Он выдает следующую ссылку.
Когда пользователь нажмет на него, он изменит свой цвет на розовый.
