Dreamweaver教程: 定义CSS样式链接状态(2)

   

Dreamweaver教程: 定义CSS样式链接状态(2)

 

 

 

7.选择“a:active”标签,a:active是指在链接上按下鼠标时的状态。

定义字体为宋体,大小为12像素,颜色为灰色#999999。

在浏览器中,鼠标在链接上按上时,链接变成灰色。注意到没有,在链接上按下时有虚线框。

8.选择“a:visited”标签。a:visited是指访问过的链接。

定义字体为宋体,大小为12像素,下划线为“无”,颜色为黑色。

 

在浏览器中点击链接,鼠标离开链接后,链接颜色就变成黑色。跟旁边灰色的链接还是有细微差别的。

最后,看看在浏览器中,鼠标作用于链接表现出来的样式。

链接1是访问过的颜色,链接2是鼠标按下时的状态,链接3是鼠标放在链接上的状态,链接4是没有接触过的状态。

各种链接状态的用途:

“a:link”(没有接触过的链接):用于定义了链接的常规状态。如果希望各种链接都相同,就只需要定义这种链接状态。这种链接状态是基本的,推荐至少要定义这种链接。

“a:hover”(鼠标放在链接上的状态):用于产生视觉效果。鼠标放到一个链接上,链接就会产生变化。推荐“a:hover”链接颜色使用红色,红色链接能产生极好的视觉效果。当鼠标离开这个链接时,这种状态的链接就消失。多用于讲究视觉效果的网站。

“a:visited”访问过的链接:用于阅读文章,能清楚的判断已经访问过的链接。“a:visited”链接状态的颜色要和普通文本的链接和其它状态颜色不同。多用于以内容为主的网站。讲究视觉效果的网站可以不用。

“a:active”在链接上按下鼠标时的状态:用于表现鼠标按下时的链接状态。实际中应用很少。如果没有特别的需要,可以定义成和“a:link”状态或者“a:hover”状态一样的。

    象本文这种“仅对该文档”的CSS,定义好后直接就对文档生效了。如果是定义成外部CSS样式表文件,就需要把每种链接状态的定义都保存在同一个CSS文件里面,需要应用时,链接这个CSS文件就可以了。

        

 

推荐阅读