CSS 基础学习-102 css 使用a元素链接的四种状态

hrs 提交于 2021/10/14 - 22:42 , 周四

四种链接状态分别是:

  • a:link - 正常的,未访问的链接
  • a:visited - 用户访问过的链接
  • a:hover - 用户将鼠标悬停在链接上时
  • a:active - 链接被点击时

实例代码:

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <style>
      a{
        font-size:30px;
     }
      p{
        color:red;
      }
      a:link{
        color:;#2440b3  /*未访问的链接*/
      }
      a:visited{
        color:green;/*已访问的链接*/
      }
      a:hover{
      color:#42a9f4;  /*当鼠标移动到链接时*/
      }
      a:active{
        color:red;/*按下链接时*/
      }
    </style>
  </head>
  <body>
    <h1>css 四种链接状态</h1>
    <p><b><a href="https://www.dwoke.com" target="_blank">你行网</a>
    </b></p>
    <p>注:移动鼠标到链接感受链接颜色的变化。</p>
      </body>
</html>
        

运行效果:

css-102.png

 

标签