Rumah > hujung hadapan web > tutorial css > a标签的css样式中的四个状态

a标签的css样式中的四个状态

不言
Lepaskan: 2018-06-12 11:17:20
asal
4376 orang telah melayarinya

这篇文章主要介绍了关于a标签的css样式中的四个状态,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下

a标签有四个“状态”的先后过程是:a:link ->a:hover ->a:active ->a:visited。另外,a:active不能设置有无下划线(总是有的),下面有个示例大家可以看看

表示所有状态下的连接 如 a{color:red}
① a:link:未访问链接 ,如 a:link {color:blue}
② a:visited:已访问链接 ,如 a:visited{color:blue}
③ a:active:激活时(链接获得焦点时)链接的颜色 ,如a:active{color:blue}
④ a:hover:鼠标移到链接上时 ,如 a:hover {color:blue}
一般a:hover和a:visited链接的状态(颜色、下划线等)应该是相同的。
前三者分别对应body元素的link、vlink、alink这三个属性。
四个“状态”的先后过程是:a:link ->a:hover ->a:active ->a:visited。另外,a:active不能设置有无下划线(总是有的)。
举例:伪类的常见状态值 

<style type = “text/css”> 
a {font-size:16px} 
a:link {color: blue; text-decoration:none;} //未访问:蓝色、无下划线 
a:active:{color: red; } //激活:红色 
a:visited {color:purple;text-decoration:none;} //已访问:purple、无下划线 
a:hover {color: red; text-decoration:underline;} //鼠标移近:红色、下划线 
</style>
Salin selepas log masuk

以上就是本文的全部内容,希望对大家的学习有所帮助,更多相关内容请关注PHP中文网!

相关推荐:

CSS Border属性之solid的使用介绍

css鼠标样式cursor的讲解

Atas ialah kandungan terperinci a标签的css样式中的四个状态. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan