日期:2014-05-17  浏览次数:20671 次

CSS样式学习笔记之三:对链接应用样式

1简单的链接样式实例:

a{
color:red;
}


a:link {color:#0033FF;}/*未被访问过的链接*/


a:visited {color:green;}/*已经被访问过的链接*/


a:hover ,a:action {color:red;}/*鼠标停留或点击的时候链接的颜色为红色*/

/*访问过的和没访问过的都没有线,而当鼠标放在上面或点击时就有线了
并且这两种情况的写法不能互换,不然就不起作用了。
这是由层叠找成的,当两个规则具有相同的特殊性时,后定义的优先。
*/
a:link,a:visited{text-decoration:none ; font-weight:bold;} ---未访问和已经访问,无线,粗体
a:hover,a:active{text-decoration:underline ; font-weight:bold;}---鼠标放上,点击时,有线,粗体。

?

2可以让下划线更有趣,默认为虚线, 鼠标放上或点击时是实线

?

a:link,a:visited{
text-decoration:none;
font-weight:bold;
border-bottom:1px dotted #000;
}
a:hover,a:active{
border-bottom-style :solid ;
}
/*dotted是虚线的意识。原来是虚线,当鼠标放上去或点击的时候就编程实线*/

3可以用a标记创按钮和翻转 (实际上通过改变他的背景颜色实现的翻转)

a{
display:block;
width:6em;
padding:5px;
line-height:1.4;
background-color:#99CCFF;
color:#FF0099;
text-decoration:none;
text-align:center;
}

a:hover {
background-color:#369;
color:#fff;
}

4通过改变背景图像来实现翻转。

a:link,a:visited{
display:block;
width:50px;
height:40px;
line-height:40px;
color:#000;
text-decoration:none;
background :#94B8E9 url(an1.gif) ;
text-indent:50px;
}
a:hover{
background :#94B8E9 url(an2.jpg);
color:#fff;
}

?