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

转载 2007年09月19日 16:11:00
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指文字滚动时,背景图象保持固定。 

PMBOK(第五版)学习笔记 —— ITTO(输入、工具与技术及输出)汇总

PMBOK(第五版)ITTO(输入、工具与技术及输出)汇总。
  • AntreeHuang
  • AntreeHuang
  • 2015年05月15日 10:56
  • 8835

大牛的《深度学习》笔记,Deep Learning速成教程

雷锋网(搜索“雷锋网”公众号关注)按:本文由Zouxy责编,全面介绍了深度学习的发展历史及其在各个领域的应用,并解释了深度学习的基本思想,深度与浅度学习的区别和深度学习与神经网络之间的关系。 深度学...
  • huangtingting1
  • huangtingting1
  • 2016年08月23日 00:05
  • 5877

寻找最好的笔记软件:三强篇(EverNote、Mybase、Surfulater)

寻找最好的笔记软件:三强篇(EverNote、Mybase、Surfulater) (v1.0) (2007-08-07 13:25:48) 转载▼ 分类: VIM/text [转载请保留]   版...
  • w630636065
  • w630636065
  • 2013年10月05日 19:38
  • 2150

CSS层叠样式表技术手册

  • 2015年11月03日 07:56
  • 623KB
  • 下载

多媒体技术-----层叠样式表CSS

  • 2011年10月22日 14:38
  • 620KB
  • 下载

CSS层叠样式表技术参考手册

  • 2016年02月15日 18:49
  • 730KB
  • 下载

ObjectARX学习笔记(二十五)---如何在两个dwg里面拷贝字体样式表AcGiTextStyle ,AcDbTextStyleTableRecord

//两个dwg拷贝字体信息 bool CopyTextStyleIdInfo(AcDbDatabase *pFromDataSrc/*in*/,AcDbDatabase *pToDataDes/*in...
  • jangdong
  • jangdong
  • 2014年09月28日 09:48
  • 1725

层叠样式表 CSS 学习笔记

1.CSS的基本用法   1.1 如何在HTML内插入样式表     从样式表的插入形式来看基本分为三种: a. 内联式样式表: 直接写在现有的HTML标签中,如:     这里是红色...
  • liluo_2951121599
  • liluo_2951121599
  • 2017年03月26日 13:24
  • 288

Qt学习笔记外观篇(四):Qt 样式表实例

如图:
  • wangyanphp
  • wangyanphp
  • 2014年08月13日 17:28
  • 1457

Css权威指南学习笔记之第一章 候选样式表

候选样式表, 就是允许为一个页面提供多种风格的样式表,用户在浏览该页面时可以选择自己喜欢的页面风格. 具体做法通过下面一个例子来说明: 1.建立3个css文件 red.css: p {color: r...
  • linfengtingyu1
  • linfengtingyu1
  • 2013年10月30日 19:13
  • 877
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:精通样式表技术笔记(五)
举报原因:
原因补充:

(最多只允许输入30个字)