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

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

相关文章推荐

层叠样式表 CSS 学习笔记

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

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

如图:

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

候选样式表, 就是允许为一个页面提供多种风格的样式表,用户在浏览该页面时可以选择自己喜欢的页面风格. 具体做法通过下面一个例子来说明: 1.建立3个css文件 red.css: p {color: r...

【笔记】 《js权威指南》- 第16章 脚本化CSS 16.5 脚本化CSS类 - 16.6 脚本化样式表

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

//两个dwg拷贝字体信息 bool CopyTextStyleIdInfo(AcDbDatabase *pFromDataSrc/*in*/,AcDbDatabase *pToDataDes/*in...

【HTML5学习笔记】12:尝试CSS层叠样式表和关键帧

跟着视频写的的3D隧道,用了CSS样式。建立了几个div块,用CSS改变了它的形状,然后添加关键帧使它朝着Y轴周期性移动,就形成了3D隧道的效果。 *测试代码 3D隧道 ...

sass笔记-2|Sass基础语法之让样式表更具条理性和可读性

这一篇主要详述保持sass条理性和可读性的3个最基本方法——嵌套、导入和注释。

CSS(层叠样式表)学习笔记(二)

一,创建css      1.外部样式表:link rel="stylesheet" type="text/css" href="mystyle.css" />   &#...

CSS层叠样式表——学习笔记

1:css是什么?   层叠样式表是一种用来表现HTML文件样式的计算机语言。 2:如何使用?放在那里?(一联,二内,三外)   a:内联样式         b:内部(嵌入式)...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

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