В этой статье рассказывается о том, как установить различные свойства гиперссылки с помощью 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>

Он выдает следующую ссылку.


Когда пользователь нажмет на него, он изменит свой цвет на розовый.


Понравилась статья? Поделитесь ею с друзьями и напишите отзыв в комментариях!



We use cookies on our website. Some of them are essential for the operation of the site, while others help us to improve this site and the user experience (tracking cookies). You can decide for yourself whether you want to allow cookies or not. Please note that if you reject them, you may not be able to use all the functionalities of the site.

Ok