精通样式表技术笔记(五)

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指文字滚动时,背景图象保持固定。 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值