VB.net 2010 视频教程 VB.net 2010 视频教程 python基础视频教程
SQL Server 2008 视频教程 c#入门经典教程 Visual Basic从门到精通视频教程
当前位置:
首页 > 网站开发 > css >
  • div+css视频教程之5日精通css样式表


 
5日精通css样式表-第3日  
我们在第2天的CSS教程中学习了字体及控制 文字字符的方法.今天我们将学习这些字 符、单词和每行的内容之间是如何定位 的。我们将学会如何设定字与字之间、字 母之间的距离,以及行距(垂直间距)、 文字的对齐方式、边距、边框及浮动要素 等,列表如下:
  • 字间距
  • 字母间距
  • 行高
  • 文字对齐方式
  • 垂直对齐方式
  • 文字缩位
  • 顶边距、左边距等
  • 空格填充-顶部、左边等等
  • 边框-宽度、颜色、样式等
  • 浮动
  • 清除
很显然,今天我们要学很多东西,所以我 们得抓紧时间。让我们开始吧!
 
 
 
 
第1页:5日精通css样式表-第3日
第2页:css字间距及字母间距
第3页:css行距
第4页:css文字对齐及缩行
第5页:css边距及空格填充
第6页:css边框
第7页:css浮动要素
第8页:第3天的css练习
第9页:复习css
[第1天][第2天][第3天][第4天][第5天]
 
 


 
第2页:css控制字间距和字母间距
下面要学习的CSS属性可以使你做到HTML标签 做不到的事情:控制字间距及字母间距。
字间距
利用字间距属性,你可以在字之间加入更 多的距离:
H3 { word-spacing: 1em }
你所使用的参数值将加入任何浏览器的缺 省设置,你可以使用我们昨天谈到的任何 一种长度单位:
  • in (英寸)
  • cm (厘米)
  • mm (毫米)
  • pt (点数)
  • pc (打字机字间距)
  • em (ems)
  • ex (x-height)
  • px (象素)
以下为显示结果:
Behold the power of cheese.
如果你的浏览器不支持这种CSS属性,请 点击这里查看显示效果。
如果你看不到任何不同之处,则说明你的 浏览器不支持这种属性,只有MAC机用的IE 4能支持这种字间距设置。
字母间距
字母间距可以在IE 4中应用,但 Communicator不行,唉...
H3 { letter-spacing: 10px }
字母间距的功能和字间距的很类似:其参 数值将被加入到浏览器的缺省设置中,你 可以使用上述任何一种长度单位。
如果你用的是IE 4,这里是一个例子:
Behold the power of cheese.
对于这两种属性,你都可以使用normal参 数。从而使其按照浏览器的原有缺省设置 显示。
别沮丧,还有很多CSS属性可以在两种浏 览器上都可使用。下文中就是一个例子。


 
 
 
第1页:5日精通css样式表-第3日
第2页:css字间距及字母间距
第3页:css行距
第4页:css文字对齐及缩行
第5页:css边距及空格填充
第6页:css边框
第7页:css浮动要素
第8页:第3天的css练习
第9页:复习css
[第1天][第2天][第3天][第4天][第5天]
 
 


 
第3页:css行距  
行与行之间的距离最常用的称呼是行距, 而当网页设计者们发现他们能够控制行距 时最常用的称呼是"Weee!"
行高 行高简直是上帝发给人间的福音。利用CSS行高我们可以随心所欲地控制行与行之间的 垂直距离。
B { line-height: 16pt }
你所用的参数就是相邻两行的基准线(基 准线就是英文小写字母如x,a的下阶线, 但不包括诸如y,g等字母超过下阶线的部 分)之间的垂直距离。注意你所设定的参 数将完全代替浏览器的缺省参数。 Netscape Communitor和Internet Explorer在行之前加入行高参数。所以如 果你将参数设为10px,浏览器将把文字的 第1行以10px的高度显示。 有3种设定行高的方法:
  • 数字
  • 长度单位
  • 比例
用数字设行距
B { font-size: 12pt; line-height: 2 }
当你用数字设定行高的时候,浏览器将利 用字号来确定行距:它将字号乘以设定的 参数值。所以,在本例中,行高将是24点。 显示效果如下:
Four score and seven years ago, the Web wasn't yet a glimmer in anyone's eye. No one needed it, no one missed it. Eighty-seven years from now, what will people laugh at us for lacking?
你还可以用小数设定参数值。
(你应该知道IE 3 不支持数字参数值, 在IE 3 中使用数字参数将出现大片文字 的互相重叠。)
用长度单位设定行距
B { font-size: 12pt; line-height: 11pt }
设定行高的另一种方法就是利用先前学过 的长度单位(em及pt是最常用的单位), 以下为显示效果:
Four score and seven years ago, the Web wasn't yet a glimmer in anyone's eye. No one needed it, no one missed it. Eighty-seven years from now, what will people laugh at us for lacking?
你既可以轻松地将行距缩小也可以将行距 放大。有了样式表,这一切都易如反掌!
用比例设定行距
B { font-size: 10pt; line-height: 140% }
在本例中,行距是长度10points的140%, 即14points。明白了吗?
让文字互相重叠!
你可能会问这样的问题:如果行距太小的 话,文字岂不就重叠在一起了吗?是这样 的。我们来看看这个例子:
B { font-size: 28pt; line-height: 2pt }
以下为显示效果:
Whoa. Cool.
"Whoa" 使用了浏览器的缺省行高设置。但"Cool"的行高很小所以它和第1行重叠 了。 
(Communicator 和 Internet Explorer 对行高的诠释有所不同。 Communicator 将只是将文字的上半部分重叠一点,而IE 则将其全部重叠。)
如果你计划将你的网页中的某些内容重叠 显示,行高设置还不是最佳的选择,因为 不同的浏览器对其的支持有差别。在第5 天的课程中我们将研究文字及图象布局的 最佳方式。
 
 
 
 
第1页:5日精通css样式表-第3日
第2页:css字间距及字母间距
第3页:css行距
第4页:css文字对齐及缩行
第5页:css边距及空格填充
第6页:css边框
第7页:css浮动要素
第8页:第3天的css练习
第9页:复习css
[第1天][第2天][第3天][第4天][第5天]
 
 


 

第4页:css文字对齐及缩行

现在我们谈谈CSS段落及图象的对齐和加入段落 缩行。
文字对齐
利用文字对齐属性,你可以控制段落的水平 对齐:
H4 { text-align: center }
这项属性只用于整块的内容,如<P>、 <H1> -<H6>、<BLOCKQUOTE>和 <UL>。
以下为各种选项:

left指将要素左对齐,如本段所示。

center指将要素居中,如本段所示。

justify指将要素左右对齐,如本段所示。


  • top将要素顶部同最高的母体要素对齐。
  • bottom将要素的底部同最低的母体要 素对齐。 
  • text-top将要素的顶部同母体要素文字 的顶部对齐。
  • text-bottom将要素的底部同母体要素 文字的底部对齐。
  • baseline将要素的基准线同母体要素的 基准线对齐。
  • middle将要素的中点同母体要素的中点 对齐。
  • sub将要素以下标的形式显示。
  • super将要素以 上标的形式显示。
 
第1页:5日精通css样式表-第3日
第2页:css字间距及字母间距
第3页:css行距
第4页:css文字对齐及缩行
第5页:css边距及空格填充
第6页:css边框
第7页:css浮动要素
第8页:第3天的css练习
第9页:复习css
[第1天][第2天][第3天][第4天][第5天]
 
 


 
第5页:css边距及空格填充  
我们都知道可以用HTML设定边距,但你必 须使用表格,别无它法。而样CSS式表则...... 快速定义边距
首先,我们应该了解样式表语言的术语, 以便我们理解正在谈什么。每一个整块的 要素或替代要素都包含在样式表生成器称 之为box的容器之内。box包括:
  • 要素本身
  • 围绕要素的空格填充(padding)
  • 围绕空格填充的边框(border)
  • 围绕边框的边距(空白-margin)
图示如下:
day3_page5.gif (1383 bytes)
你可以分别控制空格填充、边框和边距, 正如我们即将做的。
顶边距、底边距、左边距和右边距 这4项属性可以使你控制一个要素的四周 的边距。如下:
H4 { margin-top: 20px; margin-bottom: 5px; margin-left: 100px; margin-right: 55px }
你可以看到,每一个边距都可以有不同的 设置。或者你可以设置一个边距,然后让 浏览器用缺省设置设定其它的几个边距。 你可以将边距应用于文字和替代要素(如 图象)。
设定边距参数值最明显的方法是利用长度 单位:px(象素)、pt(点数)等。你也可 以用比例值设定边距。 以下是几个例子:
将边距值设为负值,你就可以将两个要素 重叠在一起,例:
Books
are mind food
上例中, "are mind food" 的底边距为 -55象素,右边距为60象素。
使用负值使要素重叠的的缺陷是不同的浏 览器对其处理方式不同。比如,在显示上 述例子时,不同的4种主要浏览器(Communicator for PC, Communicator for Mac, IE for PC, IE for Mac)对文 字重叠的程度不同。
另一个缺陷是你不能完全控制位于底部的 内容,而且不同的浏览器对其显示也不同。 例如, Communicator总是将图象显示在文 字的上部。 IE似乎是将个要素按照其载入 浏览器窗口的顺序显示各要素。
换句话说,如果你打算将几个要素叠放在 一起,就不要对边距使用负值。今天的教 程将教你如何叠放个要素。
浏览器对该属性的支持方面还应注意以下 几点:
  • 当你在IE 3中使用标尺单位(如英寸 和厘米)时,IE 3有时会加大底边 距。同样,有些HTML标签可以适用 底边距,有些则不能,
  • IE 4有时在对替代要素(如图象)设 定左边距时会出现问题,你可以将图 象包在一个<DIV>中,然后给<DIV>设 定样式。
顶空格填充,底空格填充,左空格填充和 右空格填充
空格填充的作用类似于边距控制,你可以 设定一个要素的前后左右的空格填充的尺 寸。
H4 { padding-top: 20px; padding-bottom: 5px; padding-left: 100px; padding-right: 55px }
你可以使用任何一种长度单位或比例值设 定空格填充。其使用方法同边距的属性。
但是空格填充不能使用负值(而且,IE 3 不支持空格填充属性)。
下面我们将探讨位于边距和空格填充之间 的边框。
 
 
 
 
第1页:5日精通css样式表-第3日
第2页:css字间距及字母间距
第3页:css行距
第4页:css文字对齐及缩行
第5页:css边距及空格填充
第6页:css边框
第7页:css浮动要素
第8页:第3天的css练习
第9页:复习css
[第1天][第2天][第3天][第4天][第5天]
 
 


 

第6页:css边框

 
有几种CSS样式表属性可以将网页要素周围加 上边框。 (注意:IE 3和IE 4不支持任何边框属性。)
顶边框宽度,底边框宽度,左边框宽度和 右边框宽度
你可以控制整个边框的宽度,也可以分别 控制每一边的边框宽度:
H4 { border-top-width: 2px; border-bottom-width: 5px; border-left-width: 1px; border-right-width: 1px }
以下是上述CSS规则的显示结果:

你还可以给替代要素加上边框,很好玩, 是吧?

你无须给一个要素的每一边都加上边框。
你可以使用上述任何一种长度单位设定边 框宽度,也可以使用内置关键字设定宽度:
本段文字的顶边框宽度参数值为thin。
本段文字的顶边框宽度参数值为medium。
本段文字的顶边框宽度参数值为thick。
如果你想使边框四面应用相同的宽度,很 简单,使用border-width标签就可一次完 成,例:
IMG { border-width: 1in }
边框颜色
例:
P { border-color: green; border-width: 3px }
本段文字显示上述代码的执行效果。
你可以使用浏览器认可的颜色或者直接使 用RGB参数值,例:
H4 { border-color: #FF0033; border-width: thick }
如果你想使边框的四边显示不同的颜色, 你可以在设置中分别列出各种颜色:
P { border-color: #666699 #FF0033 #000000 #FFFF99; border-width: 3px }
浏览器将第1种颜色理解为顶边框的颜色参 数值,第2种颜色为右边框,然后是底边框, 然后是左边框。
本段文字显示上述代码的执行效果。
注意: Communicator 不能识别多色彩, 在Communicator中,你只能使用一种颜色。 (如果你使用多色彩,Communicator很有 可能用蓝色显示整个边框。我们也对此感 到莫名其妙)
如果不使用边框颜色属性,则边框将以要 素自身的颜色显示边框颜色。
边框样式
你还可以设定边框线的样式,例:
P { border-style: double; border-width: 3px }
可以使用的关键字参数值如下:
  • solid
  • double
  • dotted
  • dashed
  • groove
  • ridge
  • inset
  • outset
注意:Communiactor只支持其中的几种关 键字属性。
 
 
 
第1页:5日精通css样式表-第3日
第2页:css字间距及字母间距
第3页:css行距
第4页:css文字对齐及缩行
第5页:css边距及空格填充
第6页:css边框
第7页:css浮动要素
第8页:第3天的css练习
第9页:复习css
[第1天][第2天][第3天][第4天][第5天]
 
 

 

 

第7页:css浮动要素

 
我们在网页中经常看到浮动的图象和表格,CSS只需 对一个<IMG>标签使用ALIGN=left属性,文字就会 绕到浮动图象的右边继续显示。样式表对于浮动 要素有一个更为灵活的语法,也就是本篇中将要 谈到的主题。
(IE3和IE 4不支持本页中谈到的任何功能。如果 你使用IE 4,你将会看到一些奇怪的格式。)
浮动
浮动属性使你能将一个要素周围用文字包裹,不 仅仅是包裹图象,而且能包裹整块的文字。
H4 { float: left }

本标题文字为向左浮动。

你可以看到这项CSS 规则应用于<H4>的文字。而本段内容则包裹在标 题文字的右下边,就象是用文字包裹图象时的效 果那样。你也可以使用向右浮动的参数值。
如果浮动要素周围的边距太小,你可以使用之前 学过的空格填充属性给它加大四周的空间(但似 乎使用边距会造成问题)。
清除
如果你想使一段文字包裹某一要素,而下一段文 字不包裹,你可以使用clear属性,很象HTML的 CLEAR属性的用法(例: CLEAR=right)。
P { clear: left }
例:
day3_7b.gif (12436 bytes)
第1、2段文字包裹了向左浮动的第1幅图象。
而使用了清除(clear)属性后,第4、5段文字中 只有第4段包裹了图象,而第5段文字没有包裹。
 
 
 
 
第1页:5日精通css样式表-第3日
第2页:css字间距及字母间距
第3页:css行距
第4页:css文字对齐及缩行
第5页:css边距及空格填充
第6页:css边框
第7页:css浮动要素
第8页:第3天的css练习
第9页:复习css
[第1天][第2天][第3天][第4天][第5天]
 
 

第8页:第3天的css练习

 
下面我们做一个CSS练习,自己效果。 该例中只有一幅图象,其余均为HTML和串 接样式表。
(注意:由于不同的浏览器显示效果不同, 所以你实际所看到的显示效果在IE 中可 能有所差别。)
小问题:如何只使用CSS和HTML而无须gif 就制造出下落阴影的效果?答案见明天的 课程。
 
 
 
 
 
 

第9页:复习css

 
我们扩展了串接CSS样式表 等方面的学习,将文字和图象都置于我们 的自由控制之下。它使我们可以做到普通 的HTML标签不能做到的事情。
以下是我们今天学习内容的总结:
  • 字间距设定字与字之间的距离。
  • 字母间距设定每个字母之间的距离。
  • 行高设定每行文字之间的垂直距离。
  • 文字对齐用于设定段落的左、右对 齐、居中和左右两边对齐。
  • 垂直对齐用于垂直对齐文字。
  • 文字缩行可以使段落缩行。
  • 各种边距属性设定围绕文字块、图 象等的边距。
  • 空格填充属性用于设定空格填充的 属性。
  • 边框属性用于设定边框的宽度、颜 色和样式。
  • 浮动和清除用于控制各要素之间的 包裹。
明天我们将继续探索串接样式表的神奇 魅力。
 
 
 
 
 

相关教程