我正在做一个网站，按照惯例分为三部分，分别是头部（header），中间部分（body），尾部（footer ）。我计划设置每个部分的连接颜色不同，比如头部的默认连接为蓝色字体，中间部分的连接文字为红色而尾部的连接颜色为褐色。

对待复杂的网页，通常的做法是应用样式表（CSS – Cascading Style Sheets），针对网页不同的部分进行不同的设置，这样在达到网页生动吸引人的同时，又不至于造成混乱。
如果要达到上述的效果，要在样式表里建立3个不同的class，每个分别针对头部、中间部分、尾部，然后在这3个class 里设置连接的颜色。
比如：

<style type="text/css">
<!--

a.header:link {color: #0000FF; text-decoration: none;}
a.header:visited {color: #00FF00; text-decoration: none;}
a.header:active {color: #00FF00; text-decoration: none;}
a.header:hover {color: #00FF00; text-decoration: none;}

a.body:link {color: #FF0000; text-decoration: none;}
a.body:visited {color: #00FF00; text-decoration: none;}
a.body:active {color: #00FF00; text-decoration: none;}
a.body:hover {color: #00FF00; text-decoration: none;}

a.footer:link {color: #800000; text-decoration: none;}
a.footer:visited {color: #00FF00; text-decoration: none;}
a.footer:active {color: #00FF00; text-decoration: none;}
a.footer:hover {color: #00FF00; text-decoration: none;}

-->
</style>

当然，上面只是说了连接的颜色，对是否使用下划线，字体的变化等等，都可以做出适当的调节。
这样，在头部的连接代码里，注明要使用的连接class：
<a class="header" href="http://www.asklaosan.com/">头部连接</a>
同样的，在其他部分的连接里：
中间部分连接：
<a class="body" href="连接地址">中间连接</a>
尾部的连接：
<a class="footer" href="连接地址">尾部连接</a>

需要注意的是，因为不同的颜色在不同背景下显示的效果不同，所以在设置不同部分连接颜色的同时，要考虑到整个网页的背景颜色。如果某一部分的连接颜色和背景颜色出现不协调，还要考虑对这一部分的背景颜色做出适当的调整。

标签：CSS, 样式表, 网站, 网页