CSS - 链接(Links)

CSS - 链接(Links) 首页 / CSS入门教程 / 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 属性

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

链接:https://www.learnfk.comhttps://www.learnfk.com/css/css-links.html

来源:LearnFk无涯教程网

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

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

:hover 属性

鼠标指针位于链接的上方,以下示例演示了将鼠标指针移到链接上时如何更改链接的颜色。

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

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

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

技术教程推荐

深入浅出区块链 -〔陈浩〕

深入剖析Kubernetes -〔张磊〕

Netty源码剖析与实战 -〔傅健〕

移动端自动化测试实战 -〔思寒〕

小马哥讲Spring核心编程思想 -〔小马哥〕

.NET Core开发实战 -〔肖伟宇〕

张汉东的Rust实战课 -〔张汉东〕

物联网开发实战 -〔郭朝斌〕

Kubernetes入门实战课 -〔罗剑锋〕

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