CSS - 链接

本章教您如何使用 CSS 设置超链接的不同属性。您可以设置超链接的以下属性 -

当我们讨论 CSS 的伪类时，我们将重新讨论相同的属性。

:link表示未访问的超链接。
:visited表示已访问的超链接。
:hover表示当前用户的鼠标指针悬停在其上的元素。
:active表示用户当前正在单击的元素。

通常，所有这些属性都保存在 HTML 文档的标头部分。

请记住，在 CSS 定义中，a:hover 必须位于 a:link 和 a:visited 之后才能生效。另外，在 CSS 定义中，a:active 必须位于 a:hover 之后，如下所示 -

<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>

它将产生以下链接。当用户单击它时，它会将其颜色更改为粉红色。