CSS 链接

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

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

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

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

请记住，a:hover必须在CSS定义中的a:link和a:visited之后，并且a:active必须在CSS定义中的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>

它将产生以下黑色链接−

CSS 链接

设置已访问链接的颜色

下面的示例演示了如何设置已访问链接的颜色。可能的值可以是任何有效格式中的任何颜色名称。

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

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

它将生成以下链接。当您点击此链接时，它将把颜色改变为绿色。

CSS 链接

当鼠标悬停在链接上时更改链接颜色

以下示例演示了当我们将鼠标指针悬停在链接上时如何更改链接的颜色。可能的值可以是任何有效格式的任何颜色名称。

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

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

它将生成以下链接。现在，将鼠标移动到此链接上，您会看到它的颜色会变成黄色。

CSS 链接

更改活动链接的颜色

以下示例演示了如何更改活动链接的颜色。可能的值可以是任何有效格式中的任何颜色名称。

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

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

它将产生以下链接。当用户点击时，它将变成粉色。

CSS 链接