ccs中a链接的四种状态

最新推荐文章于 2022-12-14 11:20:49 发布

diaotuie2676

最新推荐文章于 2022-12-14 11:20:49 发布

阅读量719

点赞数

原文链接：http://www.cnblogs.com/lei-zi/p/11127904.html

版权

什么是超链接？

超链接通俗地指从一个网页指向一个目标的连接关系,这个目标可以是另一个网页,也可以是相同网页上的不同位置，还可以是一个图片，一个电子邮件地址，一个文件，甚至是一个应用程序。而在一个网页中用来超链接的对象，可以是一段文本或者是一个图片。当浏览者单击已经链接的文字或图片后,链接目标将显示在浏览器上，并且根据目标的类型来打开或运行。

ccs中a链接的有四种状态

1、a:link

设置a对象在未被访问前（未点击过和鼠标未经过）的样式表属性。也就是html a锚文本标签的内容初始样式。

2、a:hover
设置对象在其鼠标悬停时的样式表属性，也就是鼠标刚刚经过a标签并停留在A链接上时样式。

3、a:active
设置A对象在被用户激活（在鼠标点击与释放之间发生的事件）时的样式表属性。也就是鼠标左键点击html A链接对象与释放鼠标右键之间很短暂的样式效果。

4、a:visited
设置a对象在其链接地址已被访问过时的样式表属性。也就是html a超链接文本被点击访问过后的CSS样式效果。

定义CSS时候的顺序不同，也会直接导致链接显示的效果不同。原因可能在于浏览器解释CSS时遵循的“就近原则”。正确的顺序：a:link、a:visited、a:hover、a:active

鼠标经过的“未访问链接”同时拥有a:link、a:hover两种属性，后面的属性会覆盖前面的属性定义；

鼠标经过的“已访问链接”同时拥有a:visited、a:hover两种属性，后面的属性会覆盖前面的属性定义；

所以，a:hover定义一定要放在a:link、a:visited的后面

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>菜鸟教程(runoob.com)</title>
 6 <style>
 7 body {background-color:tan;}
 8 h1   {color:maroon;font-size:20pt;}
 9 hr   {color:navy;}
10 p    {font-size:11pt;margin-left:15px;}
11 a:link    {color:green;}
12 a:visited {color:yellow;}
13 a:hover   {color:black;}
14 a:active  {color:blue;}
15 </style>
16 </head>
17 
18 <body>
19 
20 <h1>这是标题</h1>
21 <hr>
22 
23 <p>你可以看到这个段落是
24 被设定的 CSS 渲染的。</p>
25 
26 <p><a href="https://www.runoob.com" 
27 target="_blank">这是一个链接</a></p>
28 
29 </body>
30 </html>

参考：https://zhidao.baidu.com/question/163547266.html

转载于:https://www.cnblogs.com/lei-zi/p/11127904.html

diaotuie2676

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
ccs中a链接的四种状态

什么是超链接？超链接通俗地指从一个网页指向一个目标的连接关系,这个目标可以是另一个网页,也可以是相同网页上的不同位置，还可以是一个图片，一个电子邮件地址，一个文件，甚至是一个应用程序。而在一个网页中用来超链接的对象，可以是一段文本或者是一个图片。当浏览者单击已经链接的文字或图片后,链接目标将显示在浏览器上，并且根据目标的类型来打开或运行。ccs中a链接的有四种状态1、a:li...
复制链接

扫一扫