html结构：超级链接a
<a href="http://www.baidu.com" target="_blank">超级链接 </a>
1、a的四个状态
a标签与其他标签不同，它有四个显示状态，可以设置不同的显示样式，代码↓
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>Document</title> <style type="text/css"> *{ margin: 0; padding: 0; } /*链接颜色蓝色*/ a:link{ color: blue; } /*点击链接一次后刷新界面的状态 链接颜色紫色*/ a:visited{ color: purple; } /*鼠标指针悬停在链接上状态 链接颜色红色*/ a:hover{ color: red; } /*点住链接不撒手时状态 链接颜色绿色*/ a:active{ color: green; } </style> </head> <body> <a href="http://www.baidu.com">点击转到百度</a> </body> </html>
效果图脑补一下就好。
这四个状态是根据用户的动作产生变化，动作未发生 ，对应的样式也不会加载出来。
如：.box 这个选择器，给他添加的样式是工作人员手动添加的，在网页加载时这些样式会立即加载。
a的四个状态里 例如：a：hover，它添加的是用户行为对应的状态属性，这些样式在加载网页时不会立即加载，只有用户行为触发了这种状态时，这些样式才会被加载。
:hover 这就叫做伪类 这个选择器与类选择器权重一样。
2、a标签四个状态的书写顺序
a的四个伪类都有自己的权重，权重相同，根据书写顺序不同，会有层叠效果。代码↓
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>Document</title> <style type="text/css"> *{ margin: 0; padding: 0; } a:link{ color: blue; } a:hover{ color: red; } a:active{ color: green; } a:visited{ color: purple; } </style> </head> <body> <a href="http://www.baidu.com">点我进百度</a> </body> </html>
我把visited放到最下面，当你第一次加载点击连接的时候，这4个效果都会正常出现，当你第二次加载时，你会发现悬停、点击时候的链接颜色效果都被visited层叠掉，也就是无论你怎么弄，这个链接就是紫色。
所以这四个状态的书写顺序是：link，visited，hover，active
记住顺序：爱恨准则 Love hate。
3、实际应用
a标签是一个行内标签，不能设置宽高。
a标签的一部分文本属性不能继承父级：color、text-decoration。代码↓
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>Document</title> <style type="text/css"> *{ margin: 0; padding: 0; } body{ font-size: 30px; color: #333; line-height: 50px; font-family: "微软雅黑"; font-weight: bold; font-style: italic; text-indent: 2em; text-decoration: none; text-align: center; } div{ width: 200px; height: 50px; border: 1px solid #000; } </style> </head> <body> <div> <a href="http://www.baidu.com">点我进百度</a> </div> </body> </html>
效果图↓
如果设置a标签的文字样式，color、text-decoration样式不能靠继承，只能单独设置。
a四个状态中：link和visited状态一般是一样的样式。代码↓
<title>Document</title> <style type="text/css"> *{ margin: 0; padding: 0; } body{ font-size: 30px; color: #333; line-height: 50px; font-family: "微软雅黑"; font-weight: bold; font-style: italic; text-indent: 2em; text-decoration: none; text-align: center; } div{ width: 200px; height: 50px; border: 1px solid #000; } a:link,a:visited{ color: #333; text-decoration: none; } a:hover{ color: red; text-decoration: underline; } </style> </head> <body> <div> <a href="http://www.baidu.com">点我进</a> </div> </body> </html>
效果图↓
实际中除了color、text-decoration其他的文本样式都可以靠继承，或者都写在a选择器里，a盒子的内容也写在a标签选择器内。默认样式可以给四个状态都设置成一样的，然后谁发生变化就单独给谁设置伪类。
四个状态全部设置一样的：用a标签选择器。谁不一样的话就添加伪类单独设置，注意书写位置顺序。代码↓
a{/*表示四个伪类的初始值都是以下的样式*/
color: #333;
text-decoration: none;
}
a:hover{/*hover需要设置另一个样式，所以把它拿出来单独设置*/
color: red;
text-decoration: underline;
}
练习↓
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>Document</title> <style type="text/css"> *{ margin: 0; padding: 0; } body{ font-size: 30px; color: #333; line-height: 50px; font-family: "微软雅黑"; font-weight: bold; text-decoration: none; text-align: center; } a{ display: block; width: 200px; height: 50px; border: 1px solid #000; color: #333; text-decoration: none; background: pink; } a:hover{ color:#fff; text-decoration: underline; background: green; } </style> </head> <body> <a href="#">点我跳转</a> </body> </html>
效果图↓
鼠标悬停前→
鼠标悬停后→