---

下面是一个小练习。

以下的练习将帮助你尝试练习串接样式表的一些属性。你的任务：只使用HTML和样式表复制
[url=day2_page6.htm]这张样式表实例[/url]
，记住，你必须有4.0版的浏览器，以便使实例显示效果正常。



完成之后，想想有没有其它方法作出同样的效果。

今天我们探索了字体的奇妙世界：字型、字号、加重显示、斜体字、大写、下划线等等。利用传统的HTML你的确也可以作很多事情，但不是所有事，而且也达不到样式表对字体的控制程度。



串接样式表的字体属性总结：





字模系列定义字体以何种字体显示字号使你可以利用points,pixels，

关键字及其它尺寸单位控制文字的尺寸。 字体风格用于斜体字显示。 字重对字体加重显示的程度作全面的控制。 字体参数（font-variant）将文字以小一半的尺寸大写显示。 文字变形（text-transform）控制大写。
文字修饰（text-decoration）可以控制文字的多种细节的变化，如下划线、闪烁等等。

还需提到另外一项重要的属性，字体。字是一种将字号、行高度及字母系列一次义的快捷方式。例： LI { font: 12pt/16pt courier }
这条规则将<LI>文字设置为：尺寸12points，行高度 16points，（我们将在明天谈到该属性），字型采用Courier。



使用字体属性时，必须设定字号和字型，但可以选择是否设定行高度。设定的顺序必须严格按照例子中的顺序。



这只是我们探索CSS众多属性的开始。明天我们将更深入研究字体属性及图文和布局。



我们在第2天的教程中学习了字体及控制文字字符的方法.今天我们将学习这些字符、单词和每行的内容之间是如何定位的。我们将学会如何设定字与字之间、字母之间的距离，以及行距（垂直间距）、文字的对齐方式、边距、边框及浮动要素等，列表如下：

字间距 字母间距 行高 文字对齐方式 垂直对齐方式 文字缩位 顶边距、左边距等 空格填充－顶部、左边等等 边框－宽度、颜色、样式等 浮动
清除

很显然，今天我们要学很多东西，所以我们得抓紧时间。让我们开始吧！

下面要学习的属性可以使你做到HTML标签做不到的事情：控制字间距及字母间距。
字间距 利用字间距属性，你可以在字之间加入更的距离：

H3 { word-spacing: 1em }

你所使用的参数值将加入任何浏览器的缺设置，你可以使用我们昨天谈到的任何种长度单位：

in （英寸） cm （厘米） mm （毫米） pt （点数） pc （打字机字间距） em （ems） ex (x-height)
px （象素）

以下为显示结果：

Behold the power of cheese.

如果你的浏览器不支持这种CSS属性，请点击
[url=#]这里[/url]
查看显示效果。 如果你看不到任何不同之处，则说明你的览器不支持这种属性，只有MAC机用的IE4能支持这种字间距设置。 字母间距 字母间距可以在IE 4中应用，但Communicator不行，唉...

H3 { letter-spacing: 10px }

字母间距的功能和字间距的很类似：其参值将被加入到浏览器的缺省设置中，你以使用上述任何一种长度单位。 如果你用的是IE 4，这里是一个例子：

Behold the power of cheese.

对于这两种属性，你都可以使用normal参数。从而使其按照浏览器的原有缺省设置显示。

别沮丧，还有很多CSS属性可以在两种浏览器上都可使用。下文中就是一个例子。

行与行之间的距离最常用的称呼是行距，而当网页设计者们发现他们能够控制行距时最常用的称呼是"Weee!"
行高



行高简直是上帝发给人间的福音。利用行高我们可以随心所欲地控制行与行之间的垂直距离。

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天的课程中我们将研究文字及图象布局的最佳方式。
现在我们谈谈段落及图象的对齐和加入段落缩行。
文字对齐 利用文字对齐属性，你可以控制段落的水平对齐：

H4 { text-align: center }

这项属性只用于整块的内容，如<P>、 <H1>-<H6>、<BLOCKQUOTE>和 <UL>。 以下为各种选项：
left指将要素左对齐，如本段所示。
right指将要素右对齐，如本段所
示。

center指将要素居中，如本段所示。
justify指将要素左右对齐，如本段所示。justify 属性可用于Communicator(两种操作平台)及IE 4 (Windows版), 但不能用于MAC机的IE 3或IE 4。
截止现在，我们所谈到的只是将CSS用于文字，但CSS 的属性页可以用于其它替代要素（替代要素指用其它内容代替了的要素，图象是最常用的替代内容，还有Java applets,QuickTime movies和其它内容。）
所以我们可以将图象右对齐，如下所示：





（如果你将样式表属性直接加到<IMG>之上，Communicator有时候可能会捣乱。为了安抚它的这种驴脾气，你可以将<IMG>包含在<SPAN>或<DIV>之内，然后将样式表加到<SPAN>或<DIV>上，最好是加在<DIV>上，因为IE 4有时候对于联结到<SPAN>上的样式会闹一点小性子。垂直对齐 目前浏览器根本还不能支持初衷对齐属性，但愿5.0版的浏览器能够做到这一点。

H4 { vertical-align: top }




垂直对齐可以使你控制文字或替代要素（比如图象）相对于其母体要素的的垂直位置。例如，如果你将一个2x2象素的GIF图象同其母体要素文字的顶部垂直对齐，则该GIF图象将在该行文字的顶部显示。

以下为各项参数：


top将要素顶部同最高的母体要素对齐。
bottom将要素的底部同最低的母体要素对齐。?
text-top将要素的顶部同母体要素文字的顶部对齐。
text-bottom将要素的底部同母体要素文字的底部对齐。
baseline将要素的基准线同母体要素的基准线对齐。
middle将要素的中点同母体要素的中点对齐。
sub将要素以下标的形式显示。
super将要素以 上标的形式显示。

目前只有IE 4能支持这项属性，它支持最后的两项参数。
文字缩行



你想使段落缩行吗？（在Internet上呆一段时间之后，你可能已经忘了缩行是怎么一回事！）



P { text-indent: 2em }
在本段中你就可以看到缩行的应用。该属性只应用于整块的内容。你可以使用任何一种熟悉的长度单位设定缩行。你还可以使用比例参数。例如，本段的缩行为40％的比例，即本段的第1行的起始位置比其正常位置缩进了40％。

(Windows版的IE 4假定比例指相对于整个浏览器窗口。而不是指段落的宽度） 如果你将文字缩行赋予一个负值，则文字第1行的起始位置比其正常位置还偏左。
本段的文字缩行赋值为－10象素。IE 4对这项属性不太适应，它有可能不显示最初的几个字母。
充分运用你的缩行威力吧，年轻的杰地战士


我们都知道可以用HTML设定边距，但你必须使用表格，别无它法。而样式表则......



快速定义边距
首先，我们应该了解样式表语言的术语，便我们理解正在谈什么。每一个整块的素或替代要素都包含在样式表生成器称为box的容器之内。box包括：

要素本身 围绕要素的空格填充（padding） 围绕空格填充的边框（border）
围绕边框的边距（空白－margin）

图示如下：



你可以分别控制空格填充、边框和边距，如我们即将做的。顶边距、底边距、左边距和右边距



这4项属性可以使你控制一个要素的四周的边距。如下：

H4 { margin-top: 20px; margin-bottom: 5px; margin-left: 100px; margin-right: 55px }

你可以看到，每一个边距都可以有不同的置。或者你可以设置一个边距，然后让览器用缺省设置设定其它的几个边距。可以将边距应用于文字和替代要素（如象）。 设定边距参数值最明显的方法是利用长度位：px(象素）、pt（点数）等。你也可以用比例值设定边距。



以下是几个例子：


[url=day3_5margin1.htm]顶边距[/url]

[url=day3_5margin2.htm]底边距[/url]


[url=day3_5margin3.htm]左边距和右边距[/url]


将边距值设为负值，你就可以将两个要素叠在一起，例：
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不支持空格填充属性）。
下面我们将探讨位于边距和空格填充之间的边框。
边框
有几种样式表属性可以将网页要素周围加上边框。



（注意：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只支持其中的几种关键字属性。浮动要素
我们在网页中经常看到浮动的图象和表格，只需对一个<IMG>标签使用ALIGN=left属性，文字就会绕到浮动图象的右边继续显示。样式表对于浮动要素有一个更为灵活的语法，也就是本篇中将要谈到的主题。
（IE3和IE 4不支持本页中谈到的任何功能。如果你使用IE 4，你将会看到一些奇怪的格式。） 浮动浮动属性使你能将一个要素周围用文字包裹，不仅仅是包裹图象，而且能包裹整块的文字。

H4 { float: left }

本标题文字为向左浮动。
你可以看到这项CSS规则应用于<H4>的文字。而本段内容则包裹在标题文字的右下边，就象是用文字包裹图象时的效果那样。你也可以使用向右浮动的参数值。 如果浮动要素周围的边距太小，你可以使用之前学过的空格填充属性给它加大四周的空间（但似乎使用边距会造成问题）。 清除 如果你想使一段文字包裹某一要素，而下一段文字不包裹，你可以使用clear属性，很象HTML的CLEAR属性的用法（例： CLEAR=right）。

P { clear: left }

例：

第1、2段文字包裹了向左浮动的第1幅图象。
而使用了清除（clear）属性后，第4、5段文字中只有第4段包裹了图象，而第5段文字没有包裹。为你的世界添加色彩
首先，我们谈一下将颜色加到网页要素上。
颜色 颜色属性并不陌生，它的用法很象HTML中使用的参数值。

B { color: #333399 }

根据这项CSS规则，浏览器将网页上所有的加重体字以设定的颜色显示，象这几个字那样。有3种方法用于设定你所需要的颜色：

颜色名称
CSS所用的颜色名称同我们常用的称呼方式。16种基本色为aqua, black, blue, fuchsia, gray, green, lime,maroon, navy, olive, purple, red, silver, teal, white, and yellow.
但是Netscape和Microsoft的浏览器还认可数百种其它色彩名称，参见


HYPE's Color Specifier
.
16进制（hex）色彩控制
使用16进制数可实现对色彩的更精确的控制，其格式为 #336699。16进制（hex）色彩控制详见
Webreference.com
。

CSS还支持某些hex值的快捷计数法。比如， #336699可以被称为 #369。浏览器会将其按照16进制格式阐释。
RGB值
对于习惯于RGB计数法的用户，这里将提供一种全新的色彩设定方法。RGB法通常用于图象应用软件例如

Photoshop。利用RGB设定色彩的方法如下： B { color: rgb(51,204,0) }



RGB的数值范围从0到255，R代表红色，G代表绿色，B代表蓝色。
IE 3不支持RGB格式，但是4.0版本的浏览器都支持。


背景颜色
在传统的网页设计中，为了在某一要素后面加上背景色，你必须先在要素周围生成表格单元， 然后在表格单元中添加颜色。 利用 CSS添加背景色则相当容易。

背景色
利用CSS在网页要素后面加入固定的背景色及图象。


P.yellow { background-color: #FFFF66 }


The above rule has been applied to this entire paragraph. You can use any of the values we talked about on the previous page: color names, hex numbers, or RGB values.
你甚至可以将要素只加到某一个单词后面。
在IE 3 和 Netscape Communicator中, 第一段文字后的背景色延伸的长度不同.在IE 4中颜色会延伸更多一些，在整个段落后面形成一个较大的方块背景。
(注意：IE 3根本不支持背景色属性。但是它支持背景设置，这种快捷属性也能达到同样的效果。详见第6页。）
你还可以给背景色设定透明属性，也就是说，论背景色原来是什么颜色，都会以透明色显。
背景色的确是太棒了，而如果能给背景加上图，不就更棒了吗？你的梦想可以实现！

背景图象
你可以很轻松地将GIF或JPEG图象加到一个要素后面：



B { background-image: url(background.gif) }


该规则将背景图象加到整个段落之后。你可以将GIF图象采用和背景图象通常的设置类似的方法平铺到文字后面。
你还可以将背景图象只添加到两个单词后面。想把图象添加到整个浏览器窗口吗？那么你可以将其添加到 <BODY>标签。
你可以使用URL调用一幅图象，你既可以使用相对UPL，例如 images/bg.gif或完整的URL,例如

/ShowImg.asp?p=/2006-3-29/64382magesabg.gif.
none参数值将取消对背景图象的任何设置.
当你设定一个背景图象时，最好能指定一种背景色。这样以来,下载背景图象的同时,固定的背景色先出现在屏幕上。而且它将透过背景图象上的透明色区显示出来。例：
CSS makes Webmonkeys gleeful.
你可以看到背景色紫色在GIF图象的透明色区也显示出来。
我们最常用的浏览器中可能会出现以下各种景图象问题：

在本篇所讨论的各种背景属性中，IE 3只支持快捷背景属性，详见第6页。
当使用链接的样式表时，IE 3根本不显示背景图象。
当你仅对段落的某一部分添加背景图象，Communicator (在两种操作平台上) 和IE 4 (Mac操作平台上) 有时候可能会出问题，也许它根本不显示图象，也许会在添加了背景图象的文字中加入行回车。
如果你同时设定了背景图象和背景色，有时候 Communicator将背景色的显示排在优先的地位。


控制背景图象
你不仅可以将图象放在要素后面，你还可以精确地控制背景图象的各项设置。你可以决定是否及如何将其平铺，背景图象应该滚动还是保持固定，及将其放在什么位置。朋友，这是真的！

背景重复(background-repeat)
背景图象通常是平铺在背景上的，对吗？错。利用这项CSS属性，你可以控制是否将其平铺。


P { background-repeat: no-repeat; background-image: url(

background.gif) }


上述规则应用于整个段落。我们以前用过的GIF图象出现在文字后面，但由于我们应用了不重复图象（no-repeat)规则，所以该图象不会重复平铺在整个段落后面，它只显示一幅单独的图象。
如果你只想让图象垂直或者水平方向平铺，你以使用repeat-x将其水平平铺，用repaet-y将其垂直平铺。而repeat参数值则将图象从水平和垂直两个方向平铺。
固定背景（background－attachment）
在HTML中，背景图象通常会随页面的滚动而一起滚动。但利用CSS的固定背景（background）属性，你可以建立不滚动的背景图象，页面滚动时，背景图象可以保持固定。


BODY { background-attachment: fixed; background-image: url(

15/stuff3a/background.gif) }



[url=fixedbg.html]这里是一个例子[/url]
，你可以看到页面滚动时，背景仍保持固定。（注意：Communicator不支持这项属性，IE可以。）
该属性只用于页面背景，即<BODY>标签内设定的背景图象。
其参数有两种选择：

scroll指背景图象随文字内容一起滚动，即通常所见的方式。
fixed指文字滚动时，背景图象保持固定。

背景定位(background-position)
你可以设定将背景插在什么位置显示。


P { background-position: center bottom; background-image: url (background.gif) }


当上述CSS规则应用于本段文字时，背景图象将在本段的中下部开始显示并向右平铺。
如果你看不到上述的显示效果，则说明你所使用的浏览器是Communicator，它不支持背景定位。
设定位置的3种方法：

关键字参数（Keyword values）
关键字设定方法简便易用：

top将背景图象同前景要素的顶部对齐。
bottom将其同前景要素的底部对齐。
left将其同左边对齐。
right将其同右边对齐。
center将其水平居中（如果使用在另一关键字前面）或垂直居中（如果用在另一关键字后面）。

长度参数
长度参数可以使用你对背景图象的位置作出更精确的控制。你可以设定水平和垂直定位起点，例：


P { background-position: 70px 10px; background-repeat: repeat-y; background-image: url

(background.gif) }


本段显示了上述规则的执行效果。IE支持这种属性，将GIF图象设置在从左上角起水平70象素，垂直10象素的位置。由于我设置了 background-repeat: repeat-y，GIF图象将在文字后垂直平铺。
你可以使用我们以前学过的任何一种长度单位，例如pixels, points, inches, ems等。
（IE 3不支持长度单位显示这种效果）
比例值（Percentage values）
你还可以使用比例值设定背景图象的位置，例：
P { background-position: 75% 50%; background-image: url (background.gif) }
当这条CSS规则应用于本段时，背景图象从水平距离段落右端70％，垂直距离段落顶部50％的位置显示。如果你重新调整浏览器窗口的尺寸，使得段落的显示尺寸变化，背景图象的位置也相应发生变化。在本段上不会发生这样的变化，因为本段的尺寸是固定的，不会随着窗口尺寸的调整而变化。



快捷特性
利用快捷特性可以使你将学过的所有背景属性加到一个CSS规则中。

IE 3中你必须这样应用（如我们以前提过的），你也有可能会在所有浏览器中应用它。
背景（background）
利用背景属性，你可以设定背景颜色、图象、平铺方法、固定及滚动显示及定位。例：


P { background: url(background.gif) #CCFFCC repeat-y top right }


本段应用了上述规则。你可以看到背景是浅绿色，背景图象只垂直平铺，第1次平铺的位置在右上角。注意Communicator不支持背景定位属性。
如果你看不到该段文字描述的效果，则说明你的浏览器不支持这项CSS属性。
使用背景属性时，你无须设定背景的每一项目内容。你可以只设定你所要的背景图象和色彩，或者设定其它组合。
使用快捷特性时也会碰到使用单另的背景属性时遇到的各种浏览器问题。

绝对定位
定位（左边和顶部）

定位属性将是网虫们打开幸福之门的钥匙：


H4 { position: absolute; left: 100px; top: 43px }


这项CSS规则让浏览器将<H4>的起始位置精确地定在距离浏览器左边100象素，距离其顶部43象素的位置，请观看
[url=day5_2a.htm]代码的执行效果[/url]
。
注意这里唯一设置了的是左边和顶部，也就说，文字将从左到右，从上到下载入浏览窗口。
左边和顶部属性很直观，左边（left)设定要素距浏览器窗口左边的距离，顶部(top)设定距离浏览器窗口顶部的距离。
设定这些距离时，你可以使用所学过的各种度单位或比例值。使用比例值时，比例值的是相对于母体要素的尺寸。
你可以定位什么呢？任何东西！段落、单词、GIF和JPEG图象、QUICKTIME电影等等。

相对定位
绝对定位使你能精确地定位要素在页面的独立位置，而不考虑页面其它要素的定位设置。相对定位指你所定位的要素的位置相对于在文件中所分配的位置。例：



I { position: relative; left: 40px; top: 10px }


相对定位的关键在于定位了的要素的位置是相对于它通常应在的位置进行定位。如果你停止使用相对定位，则文字的显示位置将恢复正常。
[url=day5_3b.htm]范例[/url]
。
使用相对定位时要小心，否则容易将页面弄得非常乱。
除了相对定位和绝对定位，你还可以使用static（静止）参数值。它的使用方法同普通HTML中的定位方法，不能附加特殊的定位设置。

还不错吧？下面我们将学习如何控制定位了的要素。控制定位了的要素
除了控制定位要素的左上角位置，你还可以控制要素的宽度和高度，及要素在页面的可视性。
宽度 定位了的要素在页面上显示时仍然会从左到右一直显示。利用宽度属性就可以设定字符向右流动的限制，即设定要素的宽度。

DIV { position: absolute; left:

200px; top: 40px; width: 150px }

浏览器接到这项规则时，它将文字按照规则规定的效果显示，还将段落的最大水平尺寸限制在150象素。见
[url=day5_4.htm]范例[/url]
。
宽度属性只适用于绝对定位的要素。你可以使用我们学过的任何一种长度单位，或使用比例值设定宽度，比例值指相对于母体要素的比例。
IE 4中，这项属性还可用于图象。你可以通过宽度设置人为地拉宽或压缩图象。
高度 理论上讲，高度应该和宽度的设置类似，只不过是在垂直方向上：

DIV { position: absolute; left: 200px; top: 40px; height: 150px }

这里我用了“理论上讲”，因为常用的几种浏览器都不支持高度属性。（你最多只能在IE 4中用高度设置拉长图象。） 可视性 利用CSS，你可以隐藏要素，使其在页面上看不见。这条属性对于定位了的和未定位的要素都适用。

H4 { visibility: hidden }

我很想给你看一个例子，但是，因为要将它设为看不见，那我这个例子让你看什么呢？ 选项：

visible使要素可以被看见 hidden使要素被隐藏
inherit指它将继承母体要素的可视性设置。

当一个要素被隐藏后，它仍然要占据浏览器窗口中的原有空间。所以，如果你将文字包围在一幅被隐藏的图象周围，那么，其显示效果将是文字包围着一块空白区域。 这条属性在编写语言和使用动态HTML时很有用，比如你可以使某段落或图象只在鼠标滑过时才显示。
Communicator不支持可视性属性。只有IE 4的用户可以享受其美妙之处！叠放文字和图象
下面我将要谈到我一直吹嘘的在页面上重叠要素的方法。它不是通过设定边距负值或采用更小的行高来实现，而是通过......
z-index 当你定位多个要素并将其重叠时，你可以使用z-index来设定哪一个要素应出现在最上层。

H2 { position: relative; left: 10px; top: 0px; z-index: 10 }

H1 { position: relative; left: 33px; top: -35px; z-index: 1 }

观察这条CSS规则的执行效果（我将<H2>的文字设为绿色，以便你观察其不同之处）：
Stylesheets
Mania
由于<H2>文字的z-index参数值更高，所以它显示在 <H1>文字的上面。（IE 4在MAC机上执行这一项时会出问题，它会将<H1>放在最上面。该参数值使用纯整数。z-index用于绝对定位或相对定位了的要素。
你也可以给图象设定z-index。（对于Communicator，最好将 <IMG>标签包在<SPAN>或 <DIV>标签内，然后将z-index应用到<SPAN>或 <DIV>。）同低版本浏览器的兼容性
好的网页设计同低版本的兼容性都很好。
你为4.0版浏览器设计的网页如果在3.0版的浏览器上是一团糟，则你的设计是失败的。



利用样式表时，你更应该考虑到兼容性的问题，因为许多用户使用的浏览器都不支持CSS属性。当然你可以为不同的浏览器设计出不同的网页。但是我们想尽可能地避免这些麻烦，以减少空间占用和网页维护工作。 让我们看看如何使利用样式表设计的网页能被其它低版本浏览器兼容。 方法#1: 在类似的HTML标签上应用样式表 如果你想利用字重属性控制文字的加重显示程度，为什么不使用<B>标签加入这种效果呢？这样以来，在所有的浏览器中都可以显示出文字的加重显示效果。



尽量使用和CSS说明相应的HTML标签，以便在老的浏览器中也能达到4.0版浏览器相同的显示效果。 方法#2: 用HTML标签重复加入样式 如果你想确保使段落显示蓝色，那么你应该同时使用样式表属性和HTML标签设定段落的颜色。 color: blue同时设定<FONT COLOR="blue">。如果你想使某要素居中，则同时使用text-align: center 和

<CENTER>。 方法#3: 隐藏不想要的要素 如果你使用了大的装饰性的文字符号，而这个文字符号在老的浏览器中显得很怪很傻，你可以使用 <FONT COLOR="xyz"> 使它的要素同背景色相同，从而使得它在老的浏览器中被“隐藏”起来。而在新的浏

览器中，CSS属性仍将它用红色（或其它任何颜色）显示，用户在新浏览器中仍然可以看到它的效果。 使你的网页同老式浏览器兼容并不只是在设计末尾时花几分钟加入几行命令，你必须在整个设计过程中都时刻考虑到兼容性的问题，并作出相应的设计。
而最重要的是：测试、测试、再测试。放眼未来

World Wide Web
组织自规定了样式表标准之后并未止步不前。甚至在主要的几种浏览器尚未完全支持CSS功能时，CSS2已经在酝酿之中。CSS2的标准已经制定。而接下来的问题只是：5.0版本的浏览器是否会支持CSS2。



以下简要介绍CSS的新增功能：
对CSS1的调整 CSS属性中又加了几项，比如icon将意味着文字内容的尺寸应符合计算机正在使用的icon文字的尺寸。定义选择器（selector）和情景选择器（contextual selector）的方法也将更加灵活。 新增的“绝技” 新的文字阴影属性将会受到大家的欢迎。 想使鼠标滑过某一链接时鼠标显示的手形有所改变吗？你可以使用光标属性设定鼠标显示的不同形状。 记得我们怎样用 A:active来设定用户点击链接文字时的属性吗？:hover将使我们能够实现当鼠标移到文字上面时就改变文字显示。很酷吧！这些只是未来CSS的几种小把戏。控制表格
我们设计网页布局时总是要用到表格，学习完本课程之后，我们还可以用CSS来设计网页布局。如果利用CSS能更好地控制表格，那该有多好。是的，它能够做到。



此外，你还能够控制文件打印时的分页，你还可以制定某些打印指令。



你还有可能实现通过声控系统进入你的网页。诸如voice-family和speech-rate等属性将设定如何将你的网页内容用声音自动朗读出来。