以文本方式查看主题

-  中文XML论坛 - 专业的XML技术讨论区  (http://bbs.xml.org.cn/index.asp)
--  『 XSL/XSLT/XSL-FO/CSS 』  (http://bbs.xml.org.cn/list.asp?boardid=8)
----  [原创]精通样式表技术笔记（五）  (http://bbs.xml.org.cn/dispbbs.asp?boardid=8&rootid=&id=9685)

--  作者：卷积内核
--  发布时间：9/2/2004 8:24:00 AM

--  [原创]精通样式表技术笔记（五）
21、行高

利用行高我们可以随心所欲地控制行与行之间的垂直距离。

B { line-height: 16pt }

你所用的参数就是相邻两行的基准线（基准线就是英文小写字母如x,a的
下阶线，但不包括诸如y,g等字母超过下阶线的部分）之间的垂直距离。

有3种设定行高的方法：

数字
长度单位
比例


用数字设行距

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

用长度单位设定行距

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

用比例设定行距

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

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

让文字互相重叠!

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

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


22、文字对齐

利用文字对齐属性，你可以控制段落的水平对齐：

H4 { text-align: center }

这项属性只用于整块的内容，如<P>、 <H1>-<H6>、
<BLOCKQUOTE>和 <UL>。


垂直对齐

目前浏览器根本还不能支持初衷对齐属性，但愿5.0版的浏览器能够做到这一点。

H4 { vertical-align: top }

垂直对齐可以使你控制文字或替代要素（比如图象）相对于其母体要素的的垂直位置。
例如，如果你将一个2x2象素的GIF图象同其母体要素文字的顶部垂直对齐，则该GIF图象将在该行文字的顶部显示。

以下为各项参数：

top将要素顶部同最高的母体要素对齐。
bottom将要素的底部同最低的母体要素对齐。  
text-top将要素的顶部同母体要素文字的顶部对齐。
text-bottom将要素的底部同母体要素文字的底部对齐。
baseline将要素的基准线同母体要素的基准线对齐。
middle将要素的中点同母体要素的中点对齐。
sub将要素以下标的形式显示。
super将要素以 上标的形式显示。


23、文字对齐

利用文字对齐属性，你可以控制段落的水平对齐：

H4 { text-align: center }

这项属性只用于整块的内容，如<P>、 <H1>-<H6>、
<BLOCKQUOTE>和 <UL>。

以下为各种选项：

left指将要素左对齐，如本段所示。
right指将要素右对齐，如本段所示。
center指将要素居中，如本段所示。
justify指将要素左右对齐


24、垂直对齐

H4 { vertical-align: top }

垂直对齐可以使你控制文字或替代要素（比如图象）相对于其母体要素的的垂直位置。
例如，如果你将一个2x2象素的GIF图象同其母体要素文字的顶部垂直对齐，
则该GIF图象将在该行文字的顶部显示。

以下为各项参数：

top将要素顶部同最高的母体要素对齐。
bottom将要素的底部同最低的母体要素对齐。  
text-top将要素的顶部同母体要素文字的顶部对齐。
text-bottom将要素的底部同母体要素文字的底部对齐。
baseline将要素的基准线同母体要素的基准线对齐。
middle将要素的中点同母体要素的中点对齐。
sub将要素以下标的形式显示。
super将要素以 上标的形式显示。

25、颜色

颜色属性并不陌生，它的用法很象HTML中使用的参数值。

B { color: #333399 }

B { color: rgb(51,204,0) }

背景色

利用CSS在网页要素后面加入固定的背景色及图象。

P.yellow { background-color: #FFFF66 }

你可以很轻松地将GIF或JPEG图象加到一个要素后面：

B { background-image: url(background.gif) }

背景重复(background-repeat)

背景图象通常是平铺在背景上的，对吗？错。利用这项CSS属性，你可以控制是否将其平铺。

P { background-repeat: no-repeat; background-image: url(
background.gif) }
上述规则应用于整个段落。

如果你只想让图象垂直或者水平方向平铺，你以使用repeat-x将其水平平铺，用repaet-y将其垂直平铺。
而repeat参数值则将图象从水平和垂直两个方向平铺。

固定背景（background－attachment）

在HTML中，背景图象通常会随页面的滚动而一起滚动。但利用CSS的固定背景（background）属性，
你可以建立不滚动的背景图象，页面滚动时，背景图象可以保持固定。

BODY { background-attachment: fixed; background-image: url(background.gif) }

这个例子你可以看到页面滚动时，背景仍保持固定。（注意：Communicator不支持这项属性，IE可以。）

该属性只用于页面背景，即<BODY>标签内设定的背景图象。

其参数有两种选择：

scroll指背景图象随文字内容一起滚动，即通常所见的方式。
fixed指文字滚动时，背景图象保持固定。

W 3 C h i n a ( since 2003 ) 旗 下 站 点
苏ICP备05006046号《全国人大常委会关于维护互联网安全的决定》《计算机信息网络国际联网安全保护管理办法》
 31.250ms