精通CSS层叠样式表2

核心提示：我们探索了字体的奇妙世界：字型、字号、加重显示、斜体字、大写、下划线等等，利用传统的HTML你的确也可以作很多事情，精通CSS层叠样式表2，但不是所有事，而且也达不到样式表对字体的控制程度，即14points，明白了吗？ 让文字互相重叠! 你可能会问这样的问题：如果行距太小的话，串接样式表的字体属性总结：字模系列定义字

我们探索了字体的奇妙世界：字型、字号、加重显示、斜体字、大写、下划线等等。利用传统的HTML你的确也可以作很多事情，但不是所有事，而且也达不到样式表对字体的控制程度。

串接样式表的字体属性总结：

字模系列定义字体以何种字体显示字号使你可以利用points,pixels，
关键字及其它尺寸单位控制文字的尺寸。
字体风格用于斜体字显示。
字重对字体加重显示的程度作全面的控制。
字体参数（font-variant）将文字以小一半的尺寸大写显示。
文字变形（text-transform）控制大写。
文字修饰（text-decoration）可以控制文字的多种细节的变化，如下划线、闪烁等等。


还需提到另外一项重要的属性，字体。字是一种将字号、行高度及字母系列一次义的快捷方式。例：


LI { font: 12pt/16pt courier }


这条规则将<LI>文字设置为：尺寸12points，行高度 16points，（我们将在明天谈到该属性），字型采用Courier。

使用字体属性时，必须设定字号和字型，但可以选择是否设定行高度。设定的顺序必须严格按照例子中的顺序。

这只是我们探索CSS众多属性的开始。明天我们将更深入研究字体属性及图文和布局。

我们将学习这些字符、单词和每行的内容之间是如何定位的。我们将学会如何设定字与字之间、字母之间的距离，以及行距（垂直间距）、文字的对齐方式、边距、边框及浮动要素等，列表如下：


字间距
字母间距
行高
文字对齐方式
垂直对齐方式
文字缩位
顶边距、左边距等
空格填充－顶部、左边等等
边框－宽度、颜色、样式等
浮动
清除

字间距及字母间距
下面要学习的属性可以使你做到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点。显示效果如下：


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 中使用数字参数将出现大片文字的互相重叠。）


用长度单位设定行距


B { font-size: 12pt; line-height: 11pt }


设定行高的另一种方法就是利用先前学过的长度单位（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?


你既可以轻松地将行距缩小也可以将行距放大。有了样式表，这一切都易如反掌！


用比例设定行距


B { font-size: 10pt; line-height: 140% }


在本例中，行距是长度10points的140％，即14points。明白了吗？


让文字互相重叠!


你可能会问这样的问题：如果行距太小的话，文字岂不就重叠在一起了吗？是这样的。我们来看看这个例子：


B { font-size: 28pt; line-height: 2pt }

9 7 3 123 4 8 :