CSS - 链接

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

当我们讨论CSS的伪类时,我们将重新访问相同的属性.

  • :link 表示未访问的超链接.

  • :visited 表示访问过的超链接.

  • :hover 表示当前用户鼠标指针悬停在上方的元素它.

  • :active 表示用户当前点击的元素.

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

请记住:hover必须在:链接和a:在CSS定义中访问以便有效.此外,a:主动必须在a之后:在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:visited {color: #006600}
      </style>
   </head>

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

Set the Color of Visited Links

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

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

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

它将产生以下链接。 单击此链接后,它会将其颜色更改为绿色。

Change the Color of Links when Mouse is Over

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

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

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

它将产生以下链接。 现在,您将鼠标悬停在此链接上,您将看到它将其颜色更改为黄色。

Change the Color of Active Links

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

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

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

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