CSS教程（五）
2008-03-09 11:30:53 来源：WEB开发网核心提示：---《网猴》版权所有我们在第2天的教程中学习了字体及控制文字字符的方法.今天我们将学习这些字符、单词和每行的内容之间是如何定位的，我们将学会如何设定字与字之间、字母之间的距离，CSS教程（五），以及行距（垂直间距）、文字的对齐方式、边距、边框及浮动要素等，列表如下：* 字间距* 字母间距* 行高* 文字对齐方式* 垂
---《网猴》版权所有
我们在第2天的教程中学习了字体及控制文字字符的方法.今天我们将学习这些字符、单词和每行的内容之间是如何定位的。我们将学会如何设定字与字之间、字母之间的距离，以及行距（垂直间距）、文字的对齐方式、边距、边框及浮动要素等，列表如下：
* 字间距
* 字母间距
* 行高
* 文字对齐方式
* 垂直对齐方式
* 文字缩位
* 顶边距、左边距等
* 空格填充－顶部、左边等等
* 边框－宽度、颜色、样式等
* 浮动
* 清除
很显然，今天我们要学很多东西，所以我们得抓紧时间。让我们开始吧！
先来看一年例子。
下面要学习的属性可以使你做到HTML标签做不到的事情：控制字间距及字母间距。
字间距
利用字间距属性，你可以在字之间加入更的距离：
H3 { word-spacing: 1em }
你所使用的参数值将加入任何浏览器的缺设置，你可以使用我们昨天谈到的任何种长度单位：
* in （英寸）
* cm （厘米）
* mm （毫米）
* pt （点数）
* pc （打字机字间距）
* em （ems）
* ex (x-height)
* px （象素）
以下为显示结果：
Behold the power of cheese.
如果你的浏览器不支持这种CSS属性，请点击这里查看显示效果。
如果你看不到任何不同之处，则说明你的览器不支持这种属性，只有MAC机用的IE4能支持这种字间距设置。
字母间距
字母间距可以在IE 4中应用，但Communicator不行，唉...
H3 { letter-spacing: 10px }
字母间距的功能和字间距的很类似：其参值将被加入到浏览器的缺省设置中，你以使用上述任何一种长度单位。
如果你用的是IE 4，这里是一个例子：
Behold the power of cheese.
对于这两种属性，你都可以使用normal参数。从而使其按照浏览器的原有缺省设置显示。
别沮丧，还有很多CSS属性可以在两种浏览器上都可使用。
下文中就是一个例子。
行与行之间的距离最常用的称呼是行距，而当网页设计者们发现他们能够控制行距时最常用的称呼是"Weee!"
行高
行高简直是上帝发给人间的福音。利用行高我们可以随心所欲地控制行与行之间的垂直距离。
B { line-height: 16pt }
你所用的参数就是相邻两行的基准线（基准线就是英文小写字母如x,a的下阶线，但不包括诸如y,g等字母超过下阶线的部分）之间的垂直距离。注意你所设定的参数将完全代替浏览器的缺省参数。
Netscape Communitor和Internet Explorer在行之前加入行高参数。所以如果你将参数设为10px，浏览器将把文字的第1行以10px的高度显示。
有3种设定行高的方法：
* 数字
* 长度单位
* 比例
用数字设行距
B { font-size: 12pt;
line-height: 2 }
当你用数字设定行高的时候，浏览器将利用字号来确定行距：它将字号乘以设定的参数值。所以，在本例中，行高将是24点。显示效果如下：
我们在第2天的教程中学习了字体及控制文字字符的方法.今天我们将学习这些字符、单词和每行的内容之间是如何定位的。我们将学会如何设定字与字之间、字母之间的距离，以及行距（垂直间距）、文字的对齐方式、边距、边框及浮动要素等，列表如下：
* 字间距
* 字母间距
* 行高
* 文字对齐方式
* 垂直对齐方式
* 文字缩位
* 顶边距、左边距等
* 空格填充－顶部、左边等等
* 边框－宽度、颜色、样式等
* 浮动
* 清除
很显然，今天我们要学很多东西，所以我们得抓紧时间。让我们开始吧！
先来看一年例子。
下面要学习的属性可以使你做到HTML标签做不到的事情：控制字间距及字母间距。
字间距
利用字间距属性，你可以在字之间加入更的距离：
H3 { word-spacing: 1em }
你所使用的参数值将加入任何浏览器的缺设置，你可以使用我们昨天谈到的任何种长度单位：
* in （英寸）
* cm （厘米）
* mm （毫米）
* pt （点数）
* pc （打字机字间距）
* em （ems）
* ex (x-height)
* px （象素）
以下为显示结果：
Behold the power of cheese.
如果你的浏览器不支持这种CSS属性，请点击这里查看显示效果。
如果你看不到任何不同之处，则说明你的览器不支持这种属性，只有MAC机用的IE4能支持这种字间距设置。
字母间距
字母间距可以在IE 4中应用，但Communicator不行，唉...
H3 { letter-spacing: 10px }
字母间距的功能和字间距的很类似：其参值将被加入到浏览器的缺省设置中，你以使用上述任何一种长度单位。
如果你用的是IE 4，这里是一个例子：
Behold the power of cheese.
对于这两种属性，你都可以使用normal参数。从而使其按照浏览器的原有缺省设置显示。
别沮丧，还有很多CSS属性可以在两种浏览器上都可使用。
下文中就是一个例子。
行与行之间的距离最常用的称呼是行距，而当网页设计者们发现他们能够控制行距时最常用的称呼是"Weee!"
行高
行高简直是上帝发给人间的福音。利用行高我们可以随心所欲地控制行与行之间的垂直距离。
B { line-height: 16pt }
你所用的参数就是相邻两行的基准线（基准线就是英文小写字母如x,a的下阶线，但不包括诸如y,g等字母超过下阶线的部分）之间的垂直距离。注意你所设定的参数将完全代替浏览器的缺省参数。
Netscape Communitor和Internet Explorer在行之前加入行高参数。所以如果你将参数设为10px，浏览器将把文字的第1行以10px的高度显示。
有3种设定行高的方法：
* 数字
* 长度单位
* 比例
用数字设行距
B { font-size: 12pt;
line-height: 2 }
当你用数字设定行高的时候，浏览器将利用字号来确定行距：它将字号乘以设定的参数值。所以，在本例中，行高将是24点。显示效果如下：
中查找“CSS教程（五）”更多相关内容
中查找“CSS教程（五）”更多相关内容更多精彩
赞助商链接
