关闭

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

标签: scroll浏览器cssurlhtmlie
451人阅读 评论(0) 收藏 举报
分类:
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

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:40975次
    • 积分:570
    • 等级:
    • 排名:千里之外
    • 原创:9篇
    • 转载:16篇
    • 译文:0篇
    • 评论:5条
    文章分类
    最新评论