CSS基础总结

<img src=”” Style:”filter:blur(strength=10)”风格—滤镜—模糊—程度

<img src=”” Style:”filter:alpha(capcity=透明程度（1-100）finishcapcity=指定结束时的透明度（1-100）style=指定透明区域的形状特征（0代表统一形状1代表线性2代表放射性3代表长方形startx=渐变开始的x坐标, starty=starty,finishx=finishx,finishy=finishy）

<img src=”” Style:”filter:blur(add=true（是否产生模糊效果false or true）direction（模糊产生的方向，数值为角度的大小，如45度125度）strength=10（模糊的程度大小）)”也可以设置文字的模糊

<img src=”” Style:”filter:fliph”>图片左右反转

<img src=”” Style:”filter:flipv”>图片上下翻转

<img src=”” Style=”filter:chroma(color=blue，strength=10)”设定指定的blue区域为透明

<img src=”” Style=”filter:mask(color=blue)”在这张图片上覆盖一张蓝色的膜

<img src=”” Style=”filter:mask(enabled=true or false)”>设置相片的底片效果

<img src=”” Style:”filter:wave(add=true（确定要使用这个效果）freq=3（一共产生多少个完整的波纹）lightlength=50(波纹增强光影效果phase=20（正弦波的偏移量）strength=50（振幅大小)”

<head>

P{font-style:italic(斜体)normal（正常）

Color：red（字体颜色）

font-family:Tahoma, Geneva, sans-serif;（设置系统字体）；

src：url（使用绝对或相对 url 地址指定OpenType字体文件，自己的电脑上面没有该地址就引用另外一个地址上的）；

font-size：10px / 20%

font-weight：bold（设置成粗体）；

xx-small :绝对字体尺寸。根据对象字体进行调整。最小

x-small:绝对字体尺寸。根据对象字体进行调整。较小

small:绝对字体尺寸。根据对象字体进行调整。小

medium:默认值。绝对字体尺寸。根据对象字体进行调整。正常

large:绝对字体尺寸。根据对象字体进行调整。大

x-large:绝对字体尺寸。根据对象字体进行调整。较大

xx-large:绝对字体尺寸。根据对象字体进行调整。最大

larger :相对字体尺寸。相对于父对像中字体尺寸进行相对增大。使用成比例的 em 单位计算

smaller:相对字体尺寸。相对于父对像中字体尺寸进行相对减小。使用成比例的 em 单位计算

length:百分数 | 由浮点数字和单位标识符组成的长度值，不可为负值。其百分比取值是基于父对象中字体的尺寸。请参阅长度单位

background-color=red（设置该行文字所在的行的背景颜色，而非整个页面的背景颜色）；

body{<style type=”text/css”>

..................

</style>}(可以在外面编写这一段代码，然后将它嵌入到<head>和<body>里面)

p { font-family: arial, courier; font-size-adjust: none（默认值。允许字体序列中每一字体遵守它的自己的尺寸）; }

p { font-family: verdana, courier; font-size-adjust: .56（为字体序列中所有字体强迫指定同一尺寸）; }

p{font-stretch(设置字体的拉伸) :

normal （正常）；

narrower（使用比当前设置的值导致字体宽度更小的值；

wider（使用比当前设置的值导致字体宽度更大的值）

ultra-condensed

extra-condensed

condensed

semi-condensed

semi-expanded

expanded

extra-expanded

ultra-expanded}

normal:默认值。不应用拉伸变形

narrower :使用比当前设置的值导致字体宽度更小的值

wider :使用比当前设置的值导致字体宽度更大的值}

<head>

<title>villardlee<title>

</head>

<head>

<title>villardlee<title>

@import url（css。Css）//将一段代码嵌入到html之中，原理和上面的一样

</head>

<head>

<title>villardlee</title>

p.ha1{font-style: italic;color:#00F;}

</style>

<body>

<p class-=”ha1”>villardlee</p>

</body>-------p.ha1,p.ha2,在嵌入代码区里面调用body里面具体的段落，先在<p class=”自定义名字“，再在嵌入代码区里面p点调用

<head>

<title>villardlee</title>

P#ha1t-style: italic;color:#00F;}

</style>

<body>

<p id-=”ha1”>villardlee</p>

</body>-------p.ha1,p.ha2,在嵌入代码区里面调用body里面具体的段落，先在<p id=”自定义名字

，再在嵌入代码区里面p点调用，和上面的例子不同调用格式为p#ha1

上面两个不同点：id每一页只能用在一个元素上面

<head>

<title>villardlee</title>

P#ha1t-style: italic;color:#00F;}

P#ha1{font-style:iltalic}

<!--

P,h1{text-align:centure}；

群组化定义，就是把所有代码都往中间位置摆放

</style>

<body>

<h1>liwei</h1>

<p id-=”ha1”>villardlee</p>

<p id-=”ha2>villardlee</p>

</body>-------p.ha1,p.ha2,

<head>

<title>villardlee</title>

p.ha1{font-style: italic;color:#00F; div {color: red }直接写名字

div { color: rgb(100,14,200); }rgb的数值

div{color: rgb（20%，30%，50%）}三种颜色的百分比

div {color: inherit; } }继承上面的数值

设置图片或文字边框

H4 {font-style：italic；

border-top-width: 2px; 上部的宽度

border-bottom-width: 5px; 。。。

border-left-width: 1px; 左边宽度。。。

border-right-width: 1px

border-width：thin四边的宽度设置为thin

border-width：medium。。。。。

border-width：thick。。。

border-width：10px设置指定数值的宽度

border-color：blue；设置边框颜色

border-style：none：缺省值

hidden：隐藏

dotted：点阵式包围图片

dashed：虚线式包围图片

solid：普通的实体线

double：两条细线组成的边框

groove：立体凹槽

ridge：立体起皱

inset：立体插进

outset：立体突出}

指定两个元素边框之间的距离

H4 {font-style：italic；

Margin-：30px;四边的间距

Margin-top：。。。

Margin-button:。。

Margin-left:。。。。

Margin-right:。。。。

Margin:top,bottom,left,right依顺序依次

填充属性FF1A控制边框内元素空间的大小

Padiing-：30px;四边的间距

Padding-top：。。。

Padding -button:。。

Padding -left:。。。。

Padding -right:。。。。

Padding:top,bottom,left,right依顺序依次

body{background-img:url(图像001_调整大小.jpg)—设置背景图片

p{background-img:url””}—在段落里面设置一张图片

背景图片的重复

body{background-img:url(图像001_调整大小.jpg；；；；background-repeat=

repeat；整个页面重复

repeat-x水平重复

repeat-y垂直重复

no-repeat不重复

inherit)—设置背景图片

p{background-img:url””}—在段落里面设置一张图片

背景随网页的滚动而滚动

body{background-img:url(图像001_调整大小.jpg；；；；background-repeat=

repeat；整个页面重复

repeat-x水平重复

repeat-y垂直重复

no-repeat不重复

inherit)—设置背景图片

backgroun-attachment：scroll背景随着滚动

fixed背景固定

inhreit

显示背景的显示位置：

body{background-img:url(图像001_调整大小.jpg；；；；

background-repeat=

repeat；整个页面重复

repeat-x水平重复

repeat-y垂直重复

no-repeat不重复

inherit)—设置背景图片

backgroun-attachment：scroll背景随着滚动

fixed背景固定

inhreit

background-position：top，bottom，left，right，centrue

《x》《y》坐标位置可以是100px，100Px也可以：10%90%

设置字体的粗细程度：

P{font-weight:

Bold:粗体

Nornal:

Bolder:比bold更粗

Lighter:比normal更小

<100-900>:设置具体的数值}

行间距属性：设定行与行之间的垂直间距

P{font-weight:bold；

Font-size：10 px

Font-height：2em

小写变大写

P{font-weight:

Font-variant：noamal不改变

Font-variant：small caps原来是

对每个段落首杭进行缩进

P{font-weight:

Font-variant：noamal不改变

Font-variant：small caps原来是

Text-indent：length（根据具体数值进行缩进）--20px

Text-indent：根据百分比进行缩进 --30%

一个段落，希望整个段落都往右移，但第一行缩进2个空格

P{font-weight:

Font-variant：noamal不改变

Font-variant：small caps原来是

Padding-right：40px，整个段落往右移40px

Text-indent：length（根据具体数值进行缩进）--20px-----第一行再缩进二个空格

Text-indent：根据百分比进行缩进 --30%

文本对齐属性

P{text-align：left

text-align：right

text-align：center

text-align：justif

文本的装饰效果

P{text-decoration:none

text-decoration:underlin;下划线

text-decoration:overline；上划线

text-decoration:line-through删除线

文本字幕的大小写互相转换

P{text-transform:capitalize首字母大写

text-transform:uppercase 全部大写

text-transform:none

text-transform:lowercase }全部小写

:link化类别（pseudo-class）指定没有访问过的连接的属性

：link a:link{...}未访问过的连接属性

：visited a:visited{...}访问过的

：active a:active{...}鼠标点击和释放时

：hover a:hover{...}鼠标悬停时

a:visited{color:#CC0000;background:#6600FF; }

a:link{color:#CC0000;background:#6600FF; }

a:active{color:#CC0000;background:#6600FF; }

a:hover{color:#CC0000;background:#6600FF; }

设置或检索对象中文本的文字是否有阴影及模糊效果。

text-shadow : color:red;

length:20px(由浮点数字和单位标识符组成的长度值。可为负值。指定阴影的水平延伸距离。)

length: 由浮点数字和单位标识符组成的长度值。可为负值。指定阴影的垂直延伸距离。

Opacity(指定模糊效果的作用距离。如果你仅仅需要模糊效果，将前两个 length 全部设定为 0)

行与行之间的距离

Line-height：normal

20px

15%

1cm

设置对象中的文字之间的间隔。

letter-spacing : normal

length

div {letter-spacing:6px; }
div {letter-spacing:0.5pt; }

设置对象中的单词之间插入的空隔。

word-spacing : normal

length由浮点数字和单位标识符组成的长度值，允许为负值。

div { word-spacing : 10; }
div { word-spacing : 10px; }

E [ attr ] { sRules } ---
E [ attr = value ] { sRules }
E [ attr ~= value ] { sRules }
E [ attr |= value ] { sRules }

H[title]{}---选择所有具有title属性的h对象h

span[class=demo] { color: red; }
div[speed="fast"][dorun="no"] { color: red; }
a[rel~="copyright"] { color:black; }

包含组

table td { font-size:14px; }
div.sub a { font-size:14px; }

</head>

子对象选择符。选择所有作为 E1 子对象的 E2 。

body > p { font-size:14px; } 所有作为body的子对象的p对象字体尺寸为14px */
div ul>li p { font-size:14px; }

设置 E 的第一个子对象的样式。

p a:first-child { color: green }p段落里面的a的第一个对象的形式。
table td:first-child { width:200px; }

设置页面容器第一页使用的样式

@page :first { margin: 4cm }

设置页面容器位于装订线左边的所有页面使用的样式。

@page :left { margin: 4cm }

设置对象使用特殊语言的内容的样式。
blockquote:lang(fr) { quotes: '?' ' ?' }
/* 使用法语显示由quotes属性指定的法语的嵌套标记 */

设置对象在成为输入焦点(该对象的 onfocus 事件发生)时的样式。

a:focus { font-size: 14pt; text-decoration: underline; color: blue; }
a:focus img { border: thin solid green }

改变段落的背景颜色

P{background-color:red}

改变背景颜色

Body{background-color：red}

使用css布局

设置边框属性

Border-width:thin/medium/thick/10px/2em

Border-top-width：

Border-right-width：

Border-botton-width：

Border-left-width：

Border-color

设置边界风格

设置maigin（两个元素之间的距离）

body {font-family:arial;margin-top:10px;margin-left:180px;margin-right:180px;margin-botton:50px}

填充属性用来控制元素边框内空间的大小

作为body元素的背景在body里面加，在段落里面的背景在段落里面加

P{background-color:white;

Padding:5px

Border:solid thin gray;

Background-image:url(“www.google.combackground-image:repeat-x

背景控制：

Background-attachment：scroll（背景随着滚动）

Background-attachment：fixed（背景固定）

设置背景的位置、：

Background-position：<x><y>(如：30%,30% or 100px,100px)

Background-position：[top/center/bottom]

Background-position：[left/center/right]

设置行间距：

P{line-height：16px}

P{line-height：2em}

文本缩进属性：

text-indent：<length>根据具体数值

text-indent：<percentage>根据百分比

<text-indent>和padding-left区别：前者是首行缩进，后者是整个段落缩进

4.6 快捷特性

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

IE 3中你必须这样应用（如我们以前提过的），你也有可能会在所有浏览器中应用它。

背景（background）

利用背景属性，你可以设定背景颜色、图象、平铺方法、固定及滚动显示及定位。例：

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

本段应用了上述规则。你可以看到背景是浅绿色，背景图象只垂直平铺，第1次平铺的位置在右上角。注意Communicator不支持背景定位属性。

如果你看不到该段文字描述的效果，则说明你的浏览器不支持这项CSS属性。

使用背景属性时，你无须设定背景的每一项目内容。你可以只设定你所要的背景图象和色彩，或者设定其它组合。

使用快捷特性时也会碰到使用单另的背景属性时遇到的各种浏览器问题。

4.2 为你的世界添加色彩

首先，我们谈一下将颜色加到网页要素上。

颜色

颜色属性并不陌生，它的用法很象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版本的浏览器都支持。

3.7 浮动要素

我们在网页中经常看到浮动的图象和表格，只需对一个<IMG>标签使用ALIGN=left属性，文字就会绕到浮动图象的右边继续显示。样式表对于浮动要素有一个更为灵活的语法，也就是本篇中将要谈到的主题。

（IE3和IE 4不支持本页中谈到的任何功能。如果你使用IE 4，你将会看到一些奇怪的格式。）

浮动

浮动属性使你能将一个要素周围用文字包裹，不仅仅是包裹图象，而且能包裹整块的文字。

H4 { float: left }

本标题文字为向左浮动。

你可以看到这项CSS规则应用于<H4>的文字。而本段内容则包裹在标题文字的右下边，就象是用文字包裹图象时的效果那样。你也可以使用向右浮动的参数值。

如果浮动要素周围的边距太小，你可以使用之前学过的空格填充属性给它加大四周的空间（但似乎使用边距会造成问题）。

清除

如果你想使一段文字包裹某一要素，而下一段文字不包裹，你可以使用clear属性，很象HTML的CLEAR属性的用法（例： CLEAR=right）。

P { clear: left }

3.5 边距及空格填充

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

快速定义边距

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

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

图示如下：

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

顶边距、底边距、左边距和右边距

这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不支持空格填充属性）。

下面我们将探讨位于边距和空格填充之间的边框。

3.3 行距

行与行之间的距离最常用的称呼是行距，而当网页设计者们发现他们能够控制行距时最常用的称呼是"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天的课程中我们将研究文字及图象布局的最佳方式。

3.2 字间距及字母间距

下面要学习的属性可以使你做到HTML标签做不到的事情：控制字间距及字母间距。

字间距

利用字间距属性，你可以在字之间加入更的距离：

H3 { word-spacing: 1em }

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

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

以下为显示结果：

Behold the power of cheese.

如果你的浏览器不支持这种CSS属性，请点击这里查看显示效果。

如果你看不到任何不同之处，则说明你的览器不支持这种属性，只有MAC机用的IE4能支持这种字间距设置。

字母间距

字母间距可以在IE 4中应用，但Communicator不行，唉...

H3 { letter-spacing: 10px }

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

如果你用的是IE 4，这里是一个例子：

Behold the power of cheese.

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

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

3.6 边框

有几种样式表属性可以将网页要素周围加上边框。

（注意：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

5.3 相对定位

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

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

请点击查看代码的执行效果

相对定位的关键在于定位了的要素的位置是相对于它通常应在的位置进行定位。如果你停止使用相对定位，则文字的显示位置将恢复正常。范例。

使用相对定位时要小心，否则容易将页面弄得非常乱。

除了相对定位和绝对定位，你还可以使用static（静止）参数值。它的使用方法同普通HTML中的定位方法，不能附加特殊的定位设置。

还不错吧？下面我们将学习如何控制定位了的要素。

5.5 叠放文字和图象

下面我将要谈到我一直吹嘘的在页面上重叠要素的方法。它不是通过设定边距负值或采用更小的行高来实现，而是通过......

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>。）范例。

5.2 绝对定位

定位（左边和顶部）

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

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

这项CSS规则让浏览器将<H4>的起始位置精确地定在距离浏览器左边100象素，距离其顶部43象素的位置，请观看代码的执行效果。

注意这里唯一设置了的是左边和顶部，也就说，文字将从左到右，从上到下载入浏览窗口。

左边和顶部属性很直观，左边（left)设定要素距浏览器窗口左边的距离，顶部(top)设定距离浏览器窗口顶部的距离。

设定这些距离时，你可以使用所学过的各种度单位或比例值。使用比例值时，比例值的是相对于母体要素的尺寸。

你可以定位什么呢？任何东西！段落、单词、GIF和JPEG图象、QUICKTIME电影等等。范例。

5.4 控制定位了的要素

除了控制定位要素的左上角位置，你还可以控制要素的宽度和高度，及要素在页面的可视性。

宽度

定位了的要素在页面上显示时仍然会从左到右一直显示。利用宽度属性就可以设定字符向右流动的限制，即设定要素的宽度。

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

浏览器接到这项规则时，它将文字按照规则规定的效果显示，还将段落的最大水平尺寸限制在150象素。见范例。

宽度属性只适用于绝对定位的要素。你可以使用我们学过的任何一种长度单位，或使用比例值设定宽度，比例值指相对于母体要素的比例。

IE 4中，这项属性还可用于图象。你可以通过宽度设置人为地拉宽或压缩图象。

高度

理论上讲，高度应该和宽度的设置类似，只不过是在垂直方向上：

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

这里我用了“理论上讲”，因为常用的几种浏览器都不支持高度属性。（你最多只能在IE 4中用高度设置拉长图象。）