无涯教程网

关注我们

CSS - 链接(Links)

CSS - 链接(Links)

当无涯教程讨论CSS的伪类时，将重新访问相同的属性。

:link : 表示普通的、未被访问的链接。
:visited : 表示用户已访问的链接。
:hover : 表示鼠标指针位于链接的上方。
:active : 表示链接被点击的时刻。

记住a:hover必须在CSS定义中的a:link和a:之后，才能生效。另外，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>

现在将看到如何使用这些属性为超链接赋予不同的效果。

:link 属性

普通的、未被访问的链接，下面的示例演示如何设置链接颜色。

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

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

它将产生以下黑色链接-

:visited 属性

用户已访问的链接，下面的示例演示如何设置访问链接的颜色。

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

它将产生以下链接。现在，将鼠标移到该链接上，您将看到它的颜色变为黄色。

:active 属性

链接被点击的时刻，下面的示例演示如何更改活动链接的颜色。

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

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

它将产生以下链接。当用户单击它时，它的颜色将变为粉红色。

祝学习愉快！(内容编辑有误？请选中要编辑内容 -> 右键 -> 修改 -> 提交！)

技术教程推荐

Spring Boot与Kubernetes云原生微服务实践 -〔杨波〕

性能测试实战30讲 -〔高楼〕

深入浅出云计算 -〔何恺铎〕

Spark核心原理与实战 -〔王磊〕

体验设计案例课 -〔炒炒〕

Python自动化办公实战课 -〔尹会生〕

手把手带你写一个Web框架 -〔叶剑峰〕

超级访谈：对话玉伯 -〔玉伯〕

Dubbo源码剖析与实战 -〔何辉〕

好记忆不如烂笔头。留下您的足迹吧 :)