CSS的超级链接知识点

mac2024-01-26 31

1、伪类选择器

什么是伪类选择器？

伪类选择器是用来给超级链接的不同状态来设置样式。

超级链接的不同状态

- 正常访问超级链接没有被访问 :link - 访问过后状态超级链接已经被访问 :visited - 鼠标放上状态鼠标放在超级链接上面，但是并没有将鼠标的左键按下去 :hover - 激活状态鼠标左键已经按下去，但是并没有将鼠标的左键弹出 :active <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>伪类选择器</title> </head> <body> <a href="http://www.baidu.com">baidu</a> <a href="http://www.133.com">133</a> <a href="http://www.134.com">134</a> </body> </html>

打开后是显示这个超级链接的页面

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>伪类选择器</title> <style> /*使用伪类选择器来给超级链接的不同状态来设置样式*/ /*正常状态*/ a:link{ color: #f00; ------->图1 } /*访问过后状态*/ a:visited{ color: #000; ------->图2 } /*鼠标放上状态*/ a:hover{ color: gold; ------->图3 } /*激活状态*/ a:active{ color: #0f0; ------->图4 } </style> </head> <body> <a href="http://www.baidu.com">baidu</a> <a href="http://www.133.com">133</a> <a href="http://www.134.com">134</a> </body> </html>

图1

图2

图3

图4

注意：

超级链接的不同状态其实是有序的，也就是说伪类选择器设置其实是有顺序。如果不按照伪类选择器的顺序，那么样式就会失效。顺序：要遵循“爱恨准则”要先有爱，才有恨。“Love Hate”

2、超级链接的美化

我们通常会去掉超级链接的下划线，然后同时会给超级链接设置一个颜色。一般情况下：正常状态与访问过后的状态的样式设置为一样当鼠标放上的时候给其设置另一个颜色激活状态一般不会设置因为激活状态的时间太短

举例： a:link, a:visited(去掉超级链接的下划线；设置一个颜色；) a:hover(设置另外一个颜色；增加一张下划线；)

/*对超级链接进行美化*/ /*正常状态与访问过后的状态*/ a:link,a:visited{ text-decoration: none;color: #444; /*文本设置颜色*/ } /*鼠标放上状态*/ a:hover{ color: #f00; /*设置颜色*/ text-decoration: underline; /*对文本加下划线*/ }

最新回复(0)