CSS教程（五）
---《网猴》版权所有
我们在第2天的教程中学习了字体及控制文字字符的方法.今天我们将学习这些字符、单词和每行的内容之间是如何定位的。我们将学会如何设定字与字之间、字母之间的距离，以及行距（垂直间距）、文字的对齐方式、边距、边框及浮动要素等，列表如下：
字母间距
行高
文字对齐方式
垂直对齐方式
文字缩位
顶边距、左边距等
空格填充－顶部、左边等等
边框－宽度、颜色、样式等
浮动
清除
很显然，今天我们要学很多东西，所以我们得抓紧时间。让我们开始吧！
先来看一年例子。
下面要学习的属性可以使你做到HTML标签做不到的事情：控制字间距及字母间距。
字间距
利用字间距属性，你可以在字之间加入更的距离：
你所使用的参数值将加入任何浏览器的缺设置，你可以使用我们昨天谈到的任何种长度单位：
- in （英寸）
- cm （厘米）
- mm （毫米）
- pt （点数）
- pc （打字机字间距）
- em （ems）
- ex (x-height)
- px （象素）
以下为显示结果：
Behold the power of cheese.
如果你的浏览器不支持这种CSS属性，请点击这里查看显示效果。
如果你看不到任何不同之处，则说明你的览器不支持这种属性，只有MAC机用的IE4能支持这种字间距设置。
字母间距
字母间距可以在IE 4中应用，但Communicator不行，唉...
字母间距的功能和字间距的很类似：其参值将被加入到浏览器的缺省设置中，你以使用上述任何一种长度单位。
如果你用的是IE 4，这里是一个例子：
Behold the power of cheese.
对于这两种属性，你都可以使用normal参数。从而使其按照浏览器的原有缺省设置显示。
别沮丧，还有很多CSS属性可以在两种浏览器上都可使用。
下文中就是一个例子。
行与行之间的距离最常用的称呼是行距，而当网页设计者们发现他们能够控制行距时最常用的称呼是"Weee!"
行高
行高简直是上帝发给人间的福音。利用行高我们可以随心所欲地控制行与行之间的垂直距离。
你所用的参数就是相邻两行的基准线（基准线就是英文小写字母如x,a的下阶线，但不包括诸如y,g等字母超过下阶线的部分）之间的垂直距离。注意你所设定的参数将完全代替浏览器的缺省参数。
Netscape Communitor和Internet Explorer在行之前加入行高参数。所以如果你将参数设为10px，浏览器将把文字的第1行以10px的高度显示。
有3种设定行高的方法：
比例
用数字设行距
当你用数字设定行高的时候，浏览器将利用字号来确定行距：它将字号乘以设定的参数值。所以，在本例中，行高将是24点。显示效果如下：
Four score and seven
years ago,
the Web wasn't yet a glimmer in
anyone's eye. No one needed it,
no one missed it. Eighty-seven
years from now, what will
people laugh at us for lacking?
你还可以用小数设定参数值。
（你应该知道IE 3 不支持数字参数值，在IE 3
中使用数字参数将出现大片文字的互相重叠。）
用长度单位设定行距
设定行高的另一种方法就是利用先前学过的长度单位（em及pt是最常用的单位），以下为显示效果：
Four score and seven
years ago,
the Web wasn't yet a glimmer in
anyone's eye. No one needed
it, no one missed it.
Eighty-seven years from now,
what will people laugh at us
for lacking?
你既可以轻松地将行距缩小也可以将行距放大。有了样式表，这一切都易如反掌！
用比例设定行距
在本例中，行距是长度10points的140％，即14points。明白了吗？
让文字互相重叠!
你可能会问这样的问题：如果行距太小的话，文字岂不就重叠在一起了吗？是这样的。我们来看看这个例子：
以下为显示效果:
"Whoa" 使用了浏览器的缺省行高设置。但"Cool"的行高很小所以它和第1行重叠了。
（Communicator和Internet Explorer对行高的诠释有所不同。
Communicator将只是将文字的上半部分重叠一点，而IE则将其全部重叠。）
如果你计划将你的网页中的某些内容重叠显示，行高设置还不是最佳的选择，因为不同的浏览器对其的支持有差别。在第5天的课程中我们将研究文字及图象布局的最佳方式。
现在我们谈谈段落及图象的对齐和加入段落缩行。
文字对齐
利用文字对齐属性，你可以控制段落的水平对齐：
这项属性只用于整块的内容，如<P>、
<H1>-<H6>、
<BLOCKQUOTE>和 <UL>。
以下为各种选项：
left指将要素左对齐，如本段所示。
right指将要素右对齐，如本段所示。
center指将要素居中，如本段所示。
justify指将要素左右对齐，如本段所示。justify
属性可用于Communicator(两种操作平台)及IE 4
(Windows版), 但不能用
于MAC机的IE 3或IE 4。
截止现在，我们所谈到的只是将CSS用于文字，但CSS
的属性页可以用于其它替代要素（替代要素指用其它内容代替了的要素，图象是最常用的替代内容，还有Java
applets,QuickTime movies和其它内容。）
所以我们可以将图象右对齐，如下所示：
（如果你将样式表属性直接加到<IMG>之上，Communicator有时候可能会捣乱。为了安抚它的这种驴脾气，你可以将<IMG>包含在<SPAN>或<DIV>之内，然后将样式表加到<SPAN>或<DIV>上，最好是加在<DIV>上，因为IE
4有时候对于联结到<SPAN>上的样式会闹一点小性子。
垂直对齐
目前浏览器根本还不能支持初衷对齐属性，但愿5.0版的浏览器能够做
到这一点。
H4 { vertical-align: top }
垂直对齐可以使你控制文字或替代要素（比如图象）相对于其母体要素的的垂直位置。例如，如果你将一个2x2象素的GIF图象同其母体要素文字的顶部垂直对齐，则该GIF图象将在该行文字的顶部显示。
以下为各项参数：
top将要素顶部同最高的母体要素对齐。
bottom将要素的底部同最低的母体要素对齐。
text-top将要素的顶部同母体要素文字的顶部对齐。
text-bottom将要素的底部同母体要素文字的底部对齐。
baseline将要素的基准线同母体要素的基准线对齐。
middle将要素的中点同母体要素的中点对齐。
sub将要素以下标的形式显示。
super将要素以 上标的形式显示。
目前只有IE 4能支持这项属性，它支持最后的两项参数。
文字缩行
你想使段落缩行吗？（在Internet上呆一段时间之后，你可能已经忘
了缩行是怎么一回事！）
P { text-indent: 2em }
在本段中你就可以看到缩行的应用。该属性只应用于整块的内容。你可以使用任何一种熟悉的长度单位设定缩行。
你还可以使用比例参数。
例如，本段
的缩行为40％的比例，即本段的第1行的起始位置比其正常位置缩进
了40％。
(Windows版的IE 4假定比例指相对于整个浏览器窗口。而不是指段落的宽度）
如果你将文字缩行赋予一个负值，则文字第1行的起始位置比其正常位置还偏左。
本段的文字缩行赋值为－10象素。IE 4对这项属性不太适应，它有可能不显示最初的几个字母。
充分运用你的缩行威力吧，年轻的杰地战士！