Ссылки и CSS

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

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

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

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