这一次简单介绍下CSS3链接的使用
CSS链接的4种状态:
a:link 普通的、未被访问过链接时
a:visited 用户已经访问过链接时
a:hover 鼠标指针位于链接的上方时
a:active 链接被点击时
注意:当为链接的不同状态设置样式时,请按照以下次序规则:
- a:hover 必须位于 a:link 和 a:visited 之后
- a:active 必须位于 a:hover 之后
常见的链接的样式:
text-decoration属性大多用于去掉链接种的下划线
直接上代码:
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>css3链接</title> 6 <style type="text/css"> 7 a:link{ 8 /* 在没访问过该网页时的颜色 */ 9 color: blue; 10 /* 去除链接下面的下划线 */ 11 text-decoration: none; 12 /* 链接的背景颜色 */ 13 background-color: white; 14 } 15 /* 曾经访问过该网页时的颜色 */ 16 a:visited{color:red;} 17 /* 光标移动到该链接上面时的颜色 */ 18 a:hover{color: aqua;} 19 /* 鼠标点击该链接时的颜色 */ 20 a:active{color: yellowgreen;} 21 </style> 22 </head> 23 <body> 24 <a href="https://www.bilibili.com/video/BV1Mx411m7fd?p=96">【极客学院】Web前端开发</a> 25 </body> 26 </html>
打开网页后的效果
这个是从未点击过链接的时候,此时链接下面本该有一条下划线的,这里是没有的
因为我们去除了链接下面的下滑线 text-decoration: none;
这里是我们把光标移动到链接上面(没有点击)时,链接颜色变为天蓝色(aqua)
这里是我们鼠标点击链接时(此时说还未松开左键),链接变为黄绿色(yellowgreen)
点击链接后,进入视频教程页面,随后我们按下返回键,回到一开始的页面,这时,链接变为红色
划重点:这里我们如果再刷新页面,会发现页面上的链接颜色为红色,不是为蓝色,就算你关闭浏览器,
重新打开该HTML文件,链接的颜色也为红色,为什么呢?
因为我们之前是有点击过该链接的,浏览器是有历史记录的,所以链接肯定为红色
如果你想让链接变回蓝色,即处于从未被点击过的状态时,可以去清除浏览器的相关的历史记录
再回到链接所在的页面,这时链接重新变回蓝色
总结
这次写的内容也是短小精炼,理解起来应该也没啥难度,实操一下基本都懂
最后希望这篇简单的随笔能对你们有所帮助吧(= ̄ω ̄=)
没用就当看着玩啦[狗头]