margin 和 padding 都是用来调节上下左右的距离，具体的，两者有什么区别？

简单的说，margin 是调节一个元素的边框外（与其它元素之间）的距离，padding 是调节一个元素的边框内（元素的内容和边框之间）的距离。

首先看一下下面的图示：

从上面的图中，便可以清楚地看出 margin 和 padding 的区别，对 margin 的调节，是在调节元素的边框（border）以外的部分，而对 padding 的调节，是在调节元素的边框（border）以内的部分。用一个不是很十分恰当的例子来说，如果将一个房子作为一个元素，当 padding 的大小改变时，改变的是这个房子四面墙壁，而 margin 的改变，是改变这个房子以外的院墙。

标签：CSS, margin, padding.

在样式表（CSS）中，可以对连接的不同状态作出相应的设定，针对个人的要求，来完成不同的表达方式。

先来看看各种连接状态的属性：
A:link: – 正常显示的连接状态
A:visited: – 连接被访问过后的显示状态
A:active: – 连接被按下时的状态
A:hover: – 鼠标悬停在连接上的连接状态

对上述的连接，可以像对正常的文字一样，做出任何你喜欢的修饰。

<style type="text/css">
A:link {
background: #FFCC00;
font-family: sans-serif;
font-size: 14px;
color: #CC3366;
text-decoration: none
}
A:visited {
background: #FFCC00;
font-family: sans-serif;
font-size: 14px;
color: #CC3366;
text-decoration: none
}
A:active {
background: #FFCC00;
font-family: sans-serif;
font-size: 14px;
color: #CC3366;
text-decoration: none
}
A:hover {
background: #FFCC00;
font-family: sans-serif;
font-size: 14px;
color: #CC3366;
text-decoration: none
}
</style>

你可以对上面的任何一项进行调整和修改，比如你想改成文字有下划线，只要将 text-decoration: none 改成 text-decoration: underline 就可以了。
同时，有时候我们不需要对每一项都进行设定，只需要强调其中一项，那末只要写出这一项就可以了，其他的自然就是显示默认的属性。
比如：

<style type="text/css">
A:link {
color: red;
</style>

标签：A:active, A:hover, A:link, A:visited, CSS, 样式表, 连接属性.

我正在做一个网站，按照惯例分为三部分，分别是头部（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, 样式表, 网站, 网页.