这里需要注意的是书写链接变化的代码时,顺序是一定的,即按照
A:link 链接文字的普通状态
A:visited 链接被鼠标点击过后的状态
A:hover 鼠标移到链接文字上的状态
A:active 鼠标点击了链接,但新页面还没出现时的状态
的顺序定义,否则可能出现意想不到的问题
从以上超级链接的形式可总结如下格式
A:link {属性名称1:属性值1;属性名称2:属性值2;………}
A:visited {属性名称1:属性值1;属性名称2:属性值2;………}
A:hover {属性名称1:属性值1;属性名称2:属性值2;………}
A:active {属性名称1:属性值1;属性名称2:属性值2;………}
文本修饰属性text-decoration允许通过以下属性值来修饰文本
Underline (下划线),overline(上划线),line-through(删除线),blink(闪烁)和默认的none
问题引出:要是想在一个页面中实现不同的链接效果,请看如下例子
<html>
<head>
<style type="text/css">
A.a1:link {color:blue; text-decoration:none; font-size:12pt}
A.a1:visited {color:brown; text-decoration:none; font-size:12pt}
A.a1:hover {color:red; text-decoration:underline; font-size:12pt}
A.a1:active {color:green; text-decoration:underline;font-size:12pt}
A.a2:link {color:red; text-decoration:underline; font-size:12pt}
A.a2:visited {color:blue; text-decoration:none; font-size:12pt}
A.a2:hover {color:green; text-decoration:underline; font-size:12pt}
A.a2:active {color:brown; text-decoration:underline;font-size:12pt}
A.a3:link {color:yellow; text-decoration:none; font-size:12pt}
A.a3:visited {color:navy; text-decoration:none; font-size:12pt}
A.a3:hover {color:white; text-decoration:underline; font-size:12pt}
A.a3:active {color:oranage; text-decoration:underline;font-size:12pt}
</style></head>
<a href="http://www.sohu.com" class=a1>搜狐</a>
<a href="http://www.newhua.com" class=a2>华军</a>
<a href="http://www.chinaren.com" class=a3>中国人</a>
</body></html>
新闻热点
疑难解答
