Учебники

CSS — Ссылки

Сентябрь 21, 2018

Эта глава научит вас, как устанавливать разные свойства гиперссылки с помощью CSS. Вы можете установить следующие свойства гиперссылки —

Мы вернемся к тем же свойствам, когда будем обсуждать псевдоклассы CSS.

  • Ссылка: обозначает непосещенные гиперссылки.

  • Посещение означает посещенные гиперссылки.

  • : Hover обозначает элемент, на котором в данный момент находится курсор мыши пользователя.

  • : Active обозначает элемент, по которому пользователь в данный момент щелкает.

Ссылка: обозначает непосещенные гиперссылки.

Посещение означает посещенные гиперссылки.

: Hover обозначает элемент, на котором в данный момент находится курсор мыши пользователя.

: Active обозначает элемент, по которому пользователь в данный момент щелкает.

Обычно все эти свойства хранятся в заголовочной части документа HTML.

Помните, что: hover ДОЛЖЕН идти после определения: link и a: посещения в определении CSS, чтобы быть эффективным. Кроме того, a: active ДОЛЖЕН идти после: hover в определении CSS следующим образом: 

<style type = "text/css">
   a:link {color: #000000}
   a:visited {color: #006600}
   a:hover {color: #FFCC00}
   a:active {color: #FF00CC}
</style>

Теперь мы увидим, как использовать эти свойства для создания разных эффектов для гиперссылок.

Установить цвет ссылок

В следующем примере показано, как установить цвет ссылки. Возможные значения могут быть любым именем цвета в любом допустимом формате.

Live Demo 

<html>
   <head>
      <style type = "text/css">
         a:link {color:#000000}
     </style>
   </head>

   <body>
      <a href = "">Link</a>
   </body>
</html>

Это даст следующую черную ссылку —

Установить цвет посещенных ссылок

В следующем примере показано, как установить цвет посещаемых ссылок. Возможные значения могут быть любым именем цвета в любом допустимом формате.

Live Demo 

<html>
   <head>
      <style type = "text/css">
         a:visited {color: #006600}
      </style>
   </head>

   <body>
      <a href = ""> link</a> 
   </body>
</html>

Будет произведена следующая ссылка. Как только вы нажмете эту ссылку, она изменит свой цвет на зеленый.

Изменить цвет ссылок, когда мышь над

В следующем примере показано, как изменить цвет ссылок, когда мы наводим указатель мыши на эту ссылку. Возможные значения могут быть любым именем цвета в любом допустимом формате.

Live Demo 

<html>
   <head>
      <style type = "text/css">
         a:hover {color: #FFCC00}
      </style>
   </head>

   <body>
      <a href = "">Link</a>
   </body>
</html>

Будет произведена следующая ссылка. Теперь вы наведите курсор мыши на эту ссылку и увидите, что она меняет свой цвет на желтый.

Изменить цвет активных ссылок

В следующем примере показано, как изменить цвет активных ссылок. Возможные значения могут быть любым именем цвета в любом допустимом формате.

Live Demo 

<html>
   <head>
      <style type = "text/css">
         a:active {color: #FF00CC}
      </style>
   </head>

   <body>
      <a href = "">Link</a>
   </body>
</html>

Будет произведена следующая ссылка. Он изменит свой цвет на розовый, когда пользователь щелкнет по нему.

44
Share: