CSS样式中,定义链接的各种状态

a:link  没有接触过的链接
用于定义了链接的常规状态。如果希望各种链接都相同,就只需要定义这种链接状态。这种链接状态是基本的
a:visited  访问过的链接
能清楚的判断已经访问过的链接
a:hover 鼠标放在链接上的状态
鼠标放到一个链接上,链接就会产生变化;当鼠标离开这个链接时,这种状态就消失
a:active 在链接上按下鼠标时的状态
注意选择器的顺序:
a:link, a:visited, a:hover, a:active  
<style type=“text/css”>
a:link, a:visited {text-decoration: none;}
a:hover, a:active {text-decoration:underline;}
</style>
  
<style type=“text/css”>
a:hover, a:active {text-decoration:underline;}
a:link, a:visited {text-decoration: none;}
</style>由于层叠,:link,:visited样式覆盖:hover,:active样式,鼠标停留和激活样式就不起作用了
  
在链接样式中应用background属性
使用图像创建下划线
区别不同类型的链接
外部链接、内部链接、邮件链接,AIM即时消息协议等
根据链接的href属性值来区分
创建按钮效果的链接
使用display属性将链接显示为块级元素,然后应用背景,这样点击块中任意位置都会触发链接 
<style type=“text/css”>
a:link, a:visited {
  text-decoration: none;
  background: url(images/underline1.gif) repeat-x left bottom;
}
a:hover, a:active {
  background-image: url(images/underline1-hover.gif);
}
</style>
  
<style type=“text/css”>
a[href^="mailto:"] {
  background: url(images/email.png) no-repeat right top;
}
</style> 
 
已访问过的链接样式
创建一个背景图像,同时包含两种图样
根据链接状态改变背景图放置的位置,显示出两种不同的效果
CSS工具提示(tooltip)
使用span标签界定提示文本
对span应用样式
 
<style type=“text/css”>
li a {
  display: block;  text-decoration: none;…..
  background: #94B8E9 url(images/visited.gif) no-repeat left top;
}
li a:visited {  background-position: right top;}
</style>
  
<style type=“text/css”>
a.tooltip {  position: relative; }
a.tooltip span {  display: none;}
a.tooltip:hover span {
  display:block;
  position:absolute;
  top:1em;  left:2em;……
}
</style>