|
在HTML教程中，我们已经了解到，可以在<body>标记中设置超链接的颜色，格式为：
<body link = 颜色值 alink =颜色值 vlink =颜色值>
其中link设置的是链接文字的颜色；alink设置的是当单击链接文字（在文字上按下鼠标）时的文字颜色；vlink设置的是已经访问过的链接文字颜色。
如果利用CSS，则可以对超链接进行更多的设置。
1、为超链接去掉下划线
例如，如果想为超链接去掉下划线，可以这样设置：
<style type = "text/css">
a{text-decoration:none;}
</style>
对标记<a>这样设置，就可以去掉超链接下划线了。当然，现在人们都习惯于下划线的文字就是超链接，所以去掉下划线可能反而让很多人不适应。
如果大部分超链接都要下划线，但只有少数不要，可以这样定义样式：
<style type = "text/css">
a.nonunderline{text-decoration:none;}
</style>
然后在定义无下划线的超链接时这样写：
<a href = "……" class = "nonunderline">超链接文字</a>
【例20】简单的超连接设置。
<html>
<head>
<title>itsway ---- 超链接</title>
<style type = "text/css">
a.nonunderline{color:#008080; text-decoration:none;font-size:18pt;}
</style>
</head>
<body>
正常的超链接：<a href = "http://www.sohu.com">搜狐</a><br><br>
自定义的超链接：<a href = "http://www.163.com" class = "nonunderline">网易</a>
</body>
</html>
2、:link、:hover、:active和:visited
如果要设置未被访问过的超链接的样式，可以使用“:link”，例如：
a: link{font-size: 14pt; text-decoration: underline; color: blue;}
它设置由标记<a>定义的、未被访问过的超链接的样式为：字体大小为14pt、有下划线，并且字体为蓝色。
也可以这样定义：
a.demo: link{font-size: 14pt; text-decoration: underline; color: blue;}
它定义了标记<a>的一个子类demo，用于设置未被访问过的超链接的样式。
注意，这里用的是“:link”而非“link”。实际上，“:link”、“:hover”等都是伪类（pseudo-class），伪类用于和用户交互时对标记或控件的修饰。关于伪类的概念大家不必深纠，我们只要会用即可，而且很容易使用。
如果要设置鼠标悬停在超链接上时的状态，可以使用“:hover”，格式为：
a: hover{样式}
或者：
a.类名: hover{样式}
例如：
a: hover{font-size: 14pt; text-decoration: underline; color: red;}
或者：
a.demo: hover{font-size: 14pt; text-decoration: underline; color: red;}
如果要设置鼠标单击超链接时的状态（此时鼠标左键按下并且还未抬起，表示“正在单击”，此时超链接处于“活动”状态），可以使用“:active”，格式为：
a: active{样式}
或者：
a.类名: active{样式}
例如：
a: active{font-size: 14pt; text-decoration: underline; color: yellow;}
或者：
a.demo: active{font-size: 14pt; text-decoration: underline; color: yellow;}
与之类似，如果要设置超链接已经被访问过的状态（已经单击过超链接了），可以使用“:visited”，格式为：
a: visited{样式}
或者：
a.类名: visited{样式}
例如：
a: visited{font-size: 14pt; text-decoration: underline; color: maroon;}
或者：
a.demo: visited{font-size: 14pt; text-decoration: underline; color: maroon;}
【例21】超连接设置。
<html>
<head>
<title>itsway ---- 超链接</title>
<style type = "text/css">
a.demo{ padding: 8px; width: 240px; font-size: 14px;
line-height:20px; background: #F0EBD6;
text-decoration: underline; color: #0000ff; }
a.demo:hover{background: #FFC080;
text-decoration:underline; color: #ff0000; }
a.demo:active{background: #CCCFFF;
text-decoration:underline; color: #008000; }
a.demo:visited{background: #FF3300;
text-decoration:none; color: #000080; }
</style>
</head>
<body>
<a class = "demo" href="none.html" onclick="return false;"> Forgive and forget. 恢弘大度，勿念旧恶。</a>
</body>
</html>
在四种浏览器中的浏览结果如下图所示。
这里故意把浏览器窗口缩得很小，是为了让读者看到有些浏览器（IE、Firefox、Opera）会自动折行，而有些不会（Netscape）。另外，在超链接中有这样的代码：
onclick="return false;"
这是一段很短的JavaScript代码，意思是当单击时不执行任何操作。
可以看到，使用样式表可以对超链接做得更花哨。但如果网页中有多种变幻的颜色，我认为大可不必，那样太晃眼了。除非你希望有很酷的效果。
上一篇：15、列表 下一篇：17、用:focus设计特色表单
|
