css中a标签的样式.docx
《css中a标签的样式.docx》由会员分享，可在线阅读，更多相关《css中a标签的样式.docx（7页珍藏版）》请在冰豆网上搜索。
css中a标签的样式
CSS中a标签的样式简介本文向大家描述一下CSS中a标签的样式，主要包括经常用于定义链接样式的四个伪类，链接定义的顺序，定义局部链接样式等三大本分内容，相信本文介绍一定会让你有所收获。
CSS中a标签的样式介绍CSS为一些特殊效果准备了特定的工具，我们称之为“伪类”。
其中有几项是我们经常用到的，下面我们就详细介绍一下经常用于定义链接样式的四个伪类，它们分别是：
定义链接样式的四个伪类viewsourceprint?
1.2.
3.4.
5.6.
7.1：
link2：
visited3：
hover4：
active因为我们要定义链接样式，所以其中必不可少的就是超级链接中的锚标签--a，锚标签和伪类链接起来书写的方法就是定义链接样式的基础方法，它们的写法如下：
viewsourceprint?
1.2.
3.4.
5.6.
7.示例：
1a：
link，定义正常链接的样式；2a：
visited，定义已访问过链接的样式；3a：
hover，定义鼠标悬浮在链接上时的样式；4a：
active，定义鼠标点击链接时的样式。
viewsourceprint?
1.2.
3.4.
5.01a：
link{02color：
#FF00;03text-decoration：
underline;
6.7.
8.9.
10.1
1.1
2.1
3.1
4.1
5.1
6.1
7.1
8.1
9.2
0.2
1.2
2.2
3.2
4.2
5.2
6.2
7.2
8.2
9.3
0.3
1.3
2.3
3.3
4.3
5.3
6.3
7.04}0506a：
visited{07color：
#00FF00;08text-decoration：
none;09}1011a：
hover{12color：
#000;13text-decoration：
none;14}1516a：
active{17color：
#FFF;18text-decoration：
none;19}上面示例中定义的链接颜色是红色，访问过后的链接是绿色，鼠标悬浮在链接上时是黑色，点击时的颜色是白色。
如果正常链接和已访问过的链接样式相同，鼠标悬浮和点击时的样式相同，也可以将它们合并起来定义：
viewsourceprint?
1.2.1a：
link,a：
visited{
3.2color：
#FF00;
4.5.3text-decoration：
underline;
6.7.4}
8.9.
510.1
1.6a：
hover,a：
active{
12.1
3.7color：
#000;
14.1
5.8text-decoration：
none;
16.1
7.9}
18.1
9.链接定义的顺序
20.没有规矩不成方圆，虽然链接定义写好了，但它也是有规则的，如果这四项的书写顺序稍有差错，链接的效果可能就没有了，所以每次定义链接样式时务必确
21.认定义的顺序，link--visited--hover-active，也就是我们常说到的LoVeHAte原则（大写字母就是它们的首字母）。
老外总结了一个便于记忆的“爱恨原则”（LoVe/HAte），即四种伪类的首字母：
LVHA。
定义A链接样式的正确的顺序：
a：
link、a：
visited、a：
hover、a：
active。
为什么我们不能改变定义的顺序？
做下测试就可以了。
假设我们想实现下面的样式：
鼠标移入时，并没有变黄。
而是当这个链接已经被访问过后，鼠标移入才变黄：
viewsourceprint?
1.2.1a：
visited{color：
red;}
3.4.
5.6.
7.2a：
hover{color：
yellow;}3a：
link{color：
blue;}4a：
active{color：
green;}这是因为，一个鼠标经过的未访问的链接同时拥有a：
link，a：
hover两种属性，在上述的CSS样式中，a：
link离他最近，先满足a：
link，而放弃a：
hover的重复定义。
而使用LVHA顺序声明后，它首先检查a：
hover的符合标准，先变色。
所以说，为了符合浏览器解释CSS遵循的"就近原则"。
我们在定义CSS中，宜将最一般的条件放在最上面，并依次向下，最下面放最特殊的。
在W3C规范中，也规定了链接的声明顺序：
在CSS定义中，a：
hover必须被置于a：
link和a：
visited之后，才是有效的。
在CSS定义中，a：
active必须被置于a：
hover之后，才是有效的。
2
2.定义局部链接样式在CSS中写上a：
link{}这样的定义会使整个页面的链接样式改变，但有些局部链接需要特殊化，这个问题也不难解决，只要在链接样式定义的前面加上指定的id或class就可以了。
viewsourceprint?
1.2.
3.4.
5.6.
7.8.
9.1
0.1
1.1
2.1
3.1
4.1#sidebara：
link,#sidebara：
visiteid{2color：
#FF00;3text-decoration：
none;4}56#sidebara：
hover,#sidebara：
active{7color：
#000;
15.1
6.1
7.1
8.8text-decoration：
underline;9}HTML调用：
viewsourceprint?
1链接到aa页面class的定义方法和id相同，只要将#sidebar改为.sidebar就行了，还有一种方法是直接定义链接的样式，那样更直接，不过调用时比较麻烦，需要给每个特定的链接加上定义的代码。
viewsourceprint?
19.2
0.2
1.2
2.2
3.2
4.2
5.2
6.2
7.2
8.2
9.3
0.3
1.3
2.3
3.3
4.3
5.3
6.3
7.01a.redlinka：
link,a.redlinka：
visiteid{02color：
#FF00;03text-decoration：
none;04}0506a.redlinka：
hover,a.redlinka：
active{07color：
#000;08text-decoration：
underline;09background：
#FFF;10}
升级会员 