CSS教程（六）

---《网猴》版权所有

我们都知道可以用HTML设定边距，但你必须使用表格，别无它法。而样式表则......

快速定义边距

首先，我们应该了解样式表语言的术语，便我们理解正在谈什么。每一个整块的要素或替代要素都包含在样式表生成器称为box的容器之内。 box包括：

你可以分别控制空格填充、边框和边距，如我们即将做的。

顶边距、底边距、左边距和右边距

这4项属性可以使你控制一个要素的四周的边距。如下：

你可以看到，每一个边距都可以有不同的置。或者你可以设置一个边距，然后让览器用缺省设置设定其它的几个边距。可以将边距应用于文字和替代要素（如象）。

设定边距参数值最明显的方法是利用长度位：px(象素）、pt（点数）等。你也可以用比例值设定边距。

将边距值设为负值，你就可以将两个要素叠在一起，例：

Books

are mind food

上例中， "are mind food" 的底边距为－55象素，右边距为60象素。

使用负值使要素重叠的的缺陷是不同的浏器对其处理方式不同。比如，在显示上例子时，不同的4种主要浏览器（Communicator for PC, Communicator for Mac, IE for PC, IE for Mac）对文字重叠的程度不同。

另一个缺陷是你不能完全控制位于底部的内容，而且不同的浏览器对其显示也不同。例如， Communicator总是将图象显示在文字的上部。 IE似乎是将个要素按照其载入浏览器窗口的顺序显示各要素。

换句话说，如果你打算将几个要素叠放在一起，就不要对边距使用负值。今天的教程将教你如何叠放个要素。

浏览器对该属性的支持方面还应注意以下几点：

顶空格填充，底空格填充，左空格填充和
右空格填充

空格填充的作用类似于边距控制，你可以设定一个要素的前后左右的空格填充的尺寸。

你可以使用任何一种长度单位或比例值设定空格填充。其使用方法同边距的属性。

但是空格填充不能使用负值（而且，IE 3不支持空格填充属性）。

下面我们将探讨位于边距和空格填充之间的边框。

有几种样式表属性可以将网页要素周围加上s2es@#边框。

（注意：IE 3和IE 4不支持任何边框属性。）

顶边框宽度，底边框宽度，左边框宽度和右边框宽度

你可以控制整个边框的宽度，也可以分别控制每一边的边框宽度：

以下是上述CSS规则的显示结果：

你还可以给替代要素加上边框，很好玩，是吧？

你无须给一个要素的每一边都加上边框。

你可以使用上述任何一种长度单位设定边框宽度，也可以使用内置关键字设定宽度：

本段文字的顶边框宽度参数值为thin。

本段文字的顶边框宽度参数值为medium。

本段文字的顶边框宽度参数值为thick。

如果你想使边框四面应用相同的宽度，很简单，使用border-width标签就可一次完成，例：

边框颜色

例：

本段文字显示上述代码的执行效果。

你可以使用浏览器认可的颜色或者直接使用RGB参数值，例：

如果你想使边框的四边显示不同的颜色，你可以在设置中分别列出各种颜色：

浏览器将第1种颜色理解为顶边框的颜色参数值，第2种颜色为右边框，然后是底边框，然后是左边框。

本段文字显示上述代码的执行效果。

注意： Communicator 不能识别多色彩，在Communicator中，你只能使用一种颜色。（如果你使用多色彩，Communicator很有可能用蓝色显示整个边框。我们也对此感到莫名其妙）

如果不使用边框颜色属性，则边框将以要素自身的颜色显示边框颜色。

边框样式

你还可以设定边框线的样式，例：

P { border-style: double; border-width: 3px }

可以使用的关键字参数值如下：

注意：Communiactor只支持其中的几种关键字属性。

我们在网页中经常看到浮动的图象和表格，只需对一个<IMG>标签使用ALIGN=left属性，文字就会绕到浮动图象的右边继续显示。样式表对于浮动要素有一个更为灵活的语法，也就是本篇中将要谈到的主题。

（IE3和IE 4不支持本页中谈到的任何功能。如果你使用IE 4，你将会看到一些奇怪的格式。）

浮动

浮动属性使你能将一个要素周围用文字包裹，不仅仅是包裹图象，而且能包裹整块的文字。

本标题文字为向左浮动。

你可以看到这项CSS规则应用于<H4>的文字。而本段内容则包裹在标题文字的右下边，就象是用文字包裹图象时的效果那样。你也可以使用向右浮动的参数值。

如果浮动要素周围的边距太小，你可以使用之前学过的空格填充属性给它加大四周的空间（但似乎使用边距会造成问题）。

清除

如果你想使一段文字包裹某一要素，而下一段文字不包裹，你可以使用clear属性，很象HTML的CLEAR属性的用法（例： CLEAR=right）。

例：

day3_7b.gif (12436 bytes)

第1、2段文字包裹了向左浮动的第1幅图象。

而使用了清除（clear）属性后，第4、5段文字中只有第4段包裹了图象，而第5段文字没有包裹。

小问题：如何只使用CSS和HTML而无须gif就制造出下落阴影的效果？答案见明天的课程。

今天是个好天气。我们扩展了串接样式表等方面的学习，将文字和图象都置于我们的自由控制之下。它使我们可以做到普通的HTML标签不能做到的事情。

以下是我们今天学习内容的总结：

明天我们将继续探索串接样式表的神奇魅力。