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;}---鼠标放上，点击时，有线，粗体。

 

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

 

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

３可以用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;
}

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

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;
}