利用行高我们可以随心所欲地控制行与行之间的垂直距离。
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指文字滚动时,背景图象保持固定。