Links

优质

小牛编辑

122浏览

2023-12-01

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

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

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

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

记住a:hover必须在a:link和a:在CSS定义中访问才能生效。此外，a:主动必须在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>

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