自W3C（The World Wide Web Consortium）制定了代号为Cougar的HTML的4.0版本以来，存在在Web页面中的动态效果首次被正式的承认了，W3C把动态超文本（Dynamic HTML）的实现分为了三个部分：脚本、支持动态效果的浏览器和CSS。前两者也许你经常用到，但CSS是什么或许你并不清楚，如果有过制作Web页面的经历，你可能听说过样式单或风格单，如果对此你亦无耳闻，不要紧，只要你想制作出具有更多新特性的W eb页，本文将同样适合于你。
一、什么是CSS？
CSS是Cascading Style Sheet的缩写，有些书上把它译为“层叠样式单”或“级联样式单”（下文简称“样式单”），在1997年W3C颁布HTML4标准的同时也公布了有关样式单的第一个标准CSS1。样式单是对以前的HTML（3.2以前的H TML版本）语法的一次重大革新，以前的HTML版本中，各种功能的实现是通过标记元素实现的，这也造成了各个浏览器厂商为了标新立意创建各种只有自家支持的标记，各种标记互相嵌套，就可以达到不同的效果，比如要在一段文字中把一部分文字变成红色，H TML3.2中应该是这样的：
<p><font color=red>这里显示红色字</font></p>
而在样式单中，把某些标记（如上例中的“font”标记）属性化，利用样式单，上例可以变成：
<p style="color:red">这里显示红色字</p>
这就是样式单的全部功能吗？远远不是！前面说过样式单是DHTML的一部分，建立样式单的真正意义在于把对象真正引入了HTML，使得可以使用脚本程序（如javascript、VBScript）调用对象属性，并且可以改变对象属性，达到动态的目的，这在以前的H TML中是无法实现的，如果你使用过如VB等面向对象的编程工具，你会更快的发现，用样式单做DHTML是多么容易。样式单的另一项贡献是简化了HTML中各种繁琐的标记，使得各个标记的属性更具有一般性和通用性，并且样式单扩展了原先的标记功能，能够实现更多的效果，样式单甚至超越了W eb页面的本身显示功能，而把样式扩展到多种媒体上，显示了难以抗拒的魅力。
样式单自从CSS1的版本之后，又在1998年5月发布了CSS2版本，样式单得到了更多的充实。Internet Explorer4和Netscape Navigator4都宣传支持样式单，但从各方面来看IE4的效果都要超过NE4，这是因为IE4和NE4的javascript文档模型（DOM）不同而造成的，从表面看，二者的模型区别不大，但实质上却是大相径庭，IE4的模型能够更加容易的把动态效果引入W eb页面，虽然现在IE4的模型只有微软自己支持，但它却已被清楚的写入了W3C的DHTML标准；而NE4的样式单并不能通过脚本调用对象的属性，说的不好听一点，它的样式单只是徒有其表罢了。（Netscape公司自己开发了一种样式单称作J SSS，它利用javascript来定义样式，但是并没有得到W3C的承认。）
二、进一步了解样式单
Cascading Style Sheet中的Cascading是“层叠”的意思，也就是说在同一个Web文档中可以有多个样式单存在，这些样式单根据所在的位置，拥有不同的优先级，优先级越高，就会被最后在显示时采用。从样式单插入的形式来看可以分为三种：
内联式样式单：它利于现有的HTML标记，把特殊的样式加入到那些由标记控制的信息中，比如刚才的例子。
嵌入式样式单：它和javascript一样可以嵌入到HTML文件的头部中去（<html>和<body>标记之间），使用<Style>和</Style>容器装载，例如：“<style> p {color : red ; font-weight : bold} </style>”，这样会对页面中所有<p>标记都起作用。
外部式样式单是一种保存在外部的样式单文件，外部文件以.CSS为扩展名，例如“<link rel=stylesheet href=”main-sheet.css” type=”text/css”>”。
在应用时可以根据需要随意运用以上三种方式，但在实际中内联式样式单和嵌入式样式单使用得更多一些。
三、样式单的语法特征
样式单有自己独特的书写方法，掌握了它的语法特征，再了解它的各种属性，那么你会发现在Web页面中运用样式单会是多么轻松。例如有一个最简单的HTML文档：
<html>
<body>
<p>Text goes here…<p>
</body>
</html>
我们可以用嵌入式样式单规定样式。
<html>
<style>
<!--
p {color:red; font-weight : bold}
- ->
</style>
<body>
<p>这里显示红色字</p>
</bdoy>
</html>
可以看到，在这个文档里，多了“Style”标记，之间用<!-- ……… - ->注释，以防止不能识别样式单的浏览器把样式单当作内容显示出来，然后是关键的一句：
p {color:red；font-weight : bold }
这整行称为一个声明（Statement），在样式单中，声明分为两种，一种是象这样的，叫做“rule set”，另一种则称为“at-rule”。
At-rule以“@”作为关键字，放在元素的最前面，at-rule通常用来对媒体（Media）的声明，并且如果对同一个at-rule进行声明，那么只有位置靠前的会起到作用，如：
@import "subs.css"
H1 {color:blue}
@import "list.css"
后一个At-Rule无效。
而rule set就象我们前面看到的样子了，它由几个部分组成，其中包括选择器、属性和属性值。一般的书写是这样的：
Selector1 {property1:value1; property2:value2;……}
Selector2 {……}
其中刚才例子中的“P”代表段落标记元素，为选择器，“{}”为一个块（Block），表示对标记属性的声明（Declaration），有多个属性的时候使用“;”隔开，属性在样式单中的一般表示方法是前面是一类属性的名称，后面是具体属性的名称，中间用“- ”隔开，而在脚本中使用属性的时候，则把“-”去掉，并把第二部分的开头字母大写。属性值的表示可以使用10进制，16进制数值（如＃FFFFFF），百分数（如100%），字符串，URL（如url(http://www.m ysite.com)）和RGB（如rgb(255,255,255)）等多种方式表示。下面我将对其中的重点部分进行更详细的解释：
1、选择器（Selector）
选择器不只是文档中的元素标记，它还可以是类（Class，这不同于Java或C＋＋中的类）、ID（给予元素特殊的名称，也便于在脚本中使用）或是元素的某种状态（如：a:link）。如：
<html>
<style>
<!--
p {color:red；font-weight : bold }
.bigFont {font-size:200%}
#blueBack {background-color:blue;color:yellow}
-->
</style>
<body>
<p>利用<span class="bigFont">Class</span>和<span id="blueBack">ID</span>显示内容。</p>
</body>
</html>
其中.someclass代表类，#someID代表ID。类和ID也可以和元素标记合用，比如：
p.bigFont {……}
则表示必须在某个为bigFont类的P标记（<p class="bigFont">）才执行样式单，同样的也适合于ID。
为了简化声明某些重复属性的标记，可以用“,”把不同的选择器隔开，表示它们都表示成相同的属性，如：
H1,H2 {color:red}
Div, p.mytext {……}
有时我们还希望能够在特定的范围内使样式单生效：
p em {color:red}
元素标记间又空格隔开，表示在<p>和</p>间的<em>、<em>用红色表示。另外还可以利用“~”表示一个选择器后面紧跟另一个选择器，并且两边以“/”围住：
/ Selector1 ~ Selector2/ {……}
表示如果Selector2紧跟着Selector1则使用该样式单。
2、属性值的单位
在样式单中，属性的单位多为长度单位，包括px（象素）、pt（磅）、em（一种排版中的单位，1em＝12pt）、mm（毫米）、cm（厘米）、pc（1pc＝12pt）、in（英寸），这些单位可以使用整数（如px）表示，也可以使用实数（如e m）表示，并且元素中对数值还有继承（inherit）的关系比如：
body {font-size:12pt;
text-indent:3em;
}
H1 {font-size:15pt}
那么在显示中H1的text-indent属性就不是36pt而是45pt。
有的属性的单位甚至可以是负值，如margin，可以达到一些特殊的效果，如元素之间的重叠。
另外还有一些其他的单位如角度，它的单位有deg（度）、grad（梯度）和rad（弧度）；频率的单位，Hz和kHz，这些都是我们非常熟悉的。
3、注释及空格
样式单也有注释语句：可以用“/*……*/”作为注释标记，在浏览器中有一个对样式单的分析器，它负责对样式单的检查，分析器将忽略注释标记之间的内容。空格在样式单中是有效的，如果字符之间有超过一个空格存在，它将省略其余空格，而只保留一个，特别是在声明某些字体的时候，空格一定不能省略。
 要注意的方面
首先，样式单是区分大小写的，所以要注意拼写；其次对于CSS2未声明的属性和方法，样式单的分析器会忽略它的存在，如：
H1 ,H2 {color:green}
H3 ,H4 & H5 {color:red}
P {color:blue ;font-variant:small-caps}
其中“&”是样式单中没有的标号，第二行整个被分析器略过，第三行中的font-variant不是一个合法属性，也被略过（“color:blue”有效）。
了解了以上规则，你就已经对样式单入门了，下面我将详细介绍样式单的各种属性及属性值。
CSS2快速参考之二
关键词：其他
四、CSS属性：
1、媒体（Media）类型
样式单的一个最重要的特点就是它可以作用于多种媒体，比如页面、屏幕、电子合成器等等。特定的属性只能作用于特定的媒体，如“font-size”属性只对可卷动的媒体类型有效（屏幕）。
声明一个媒体属性可以用@import或@media引入：
@import url(loudvoice.css) speech;
@media print {
/* style sheet for print goes here */
}
也可以在文档标记中引入媒体：
<LINK rel="stylesheet" type="text/css" media="print" href="foo.css">
可以看出，@import和@media的区别在于，前者引入外部的样式单用于媒体类型，后者直接引入媒体属性。@import的使用方法是@import加样式单文件的URL地址再加媒体类型，可以多个媒体共用一个样式单，媒体类型之间用“，”分割符分开。@ media用法则是把媒体类型放在前面，其他规则和rule-set基本一样。下面列出各种媒体类型：
SCREEN：指计算机屏幕。
PRINT：指用于打印机的不透明介质。
PROJECTION：指用于显示的项目。
BRAILLE：盲文系统，指有触觉效果的印刷品。
AURAL：指语音电子合成器。
TV：指电视类型的媒体。
HANDHELD：指手持式显示设备（小屏幕，单色）
ALL：适合于所有媒体。
2、BOX模型（BOX Model）属性
什么是BOX？CSS把HTML中以<somesign>……</somesign>的部分称为BOX（容器），BOX有三类属性：padding、margin和border。
Margin属性：
Margin属性分为margin-top、margin-right、margin-bottom、margin-left和margin五个属性，分别表示BOX里内容离边框的距离，它的属性值是数值单位，可以是长度、百分比或auto，margin甚至可以设为负值，造成B OX与BOX之间的重叠显示，关于margin的属性详见下表：
属性名称: 'margin-top'、'margin-right'、'margin-bottom'、'margin-left'
属性值: <margin-width>
初始值: 0
适合对象: 所有元素
是否继承: no
百分比备注: 相对于BOX的宽度
例如：
H1 { margin-top: 2em }
H2 { margin-right: 12.3% }
Margin还有一个快捷的书写方法，就是直接用margin属性，例如：
BODY { margin: 1em 2em 3em 2em}
等同于：
BODY {
margin-top:1em;
margin-right:2em;
margin-bottom:3em;
margin-left:2em;
}
margin属性后面可以有四个值，中间用空格隔开（记住不是逗号），顺序是“上右下左”，当然margin后面可以不足四个值，例如：
BODY { margin: 2em } /* 所有的margin都设为2em */
BODY { margin: 1em 2em } /* 上下margin为1em，右左margin为2em */
BODY { margin: 1em 2em 3em } /* 上margin为1em，右左margin为2em，下margin为3em*/
Padding属性：
Padding属性用来描述BOX的边框和内容之间插入多少空间，和margin属性类似，它也分为上右下左和一个快捷方式padding，关于margin的属性详见下表：
属性名称: 'padding-top'、'padding-right'、'padding-bottom'、'padding-left' 、'padding'
属性值: <padding-width>
初始值: 0
适合对象: 所有元素
是否继承: no
百分比备注: 相对于BOX的宽度
例如：
BLOCKQUOTE { padding-top: 0.3em }
padding属性和margin类似此处略去。
Border属性：
平时我们在查看HTML文档时，看到一段文字，并不会把它当作一个BOX，实际上BOX是有边框的，只是平时不显示出来罢了，而border属性就是用来描述BOX边框的。Border属性分为border-width、border-co lor和border-style，而这些属性下面又有分支。
border-width属性：
border-width属性又分为：border-top-width、border-right-width、border-bottom-width、border-left-width和border-width属性，border-width用长度表示为“thin/medium/thick”或长度单位表示，下面是b order-width属性的详细列表：
属性名称: 'border-top-width'、'border-right-width'、'border-bottom-width'、'border-left-width'、'border-width'
属性值: <border-width>
初始值: medium
适合对象: 所有元素
是否继承: no
百分比备注: 被禁止
border-width为快捷方式，顺序为上右下左，值之间用空格隔开。
border-color属性：
border-color属性用来显示BOX边框颜色，分为border-top-color、border-right-color、border-bottom-color、border-right-color和border-color属性，属性值为颜色，可以用十六进制表示，也可用rg b()表示，属性见下：
属性名称: 'border-top-color'、'border-right-color'、'border-bottom-color'、'border-left-color'、
'border-color'
属性值: <color>
初始值: 元素颜色的初始值
适合对象: 所有元素
是否继承: no
百分比备注: 被禁止
border-color为快捷方式，顺序为上右下左，值之间用空格隔开。
border-style属性：
border-style属性用来设置BOX对象边框的样式，它的属性值为CSS规定的关键字，平常看不到border是因为，初始值是none的缘故。属性见下：
属性名称: 'border-top-style'、'border-right-style'、'border-bottom-style'、'border-left-style'、'border-style'
属性值: <border-style>
初始值: none
适合对象: 所有元素
是否继承: no
百分比备注: 被禁止
border-color为快捷方式，顺序为上右下左，值之间用空格隔开。
属性值的名称和代表意义如下：
none：无边框。
dotted：边框为点线。
dashed：边框为长短线。
solid：边框为实线。
double：边框为双线。
groove、ridge、inset和outset：显示不同效果的3D边框（根据color属性）。
border属性：
border属性为Border的快捷方式，属性值间用空格隔开，顺序是“边框宽度 边框样式 边框颜色”，例如：
<h1 style="border:.5em outset red">hello!</h1>
还可以用border-top、border-right、border-bottom、border-left分别作为上右下左的快捷方式，属性值顺序同border属性。
CSS2快速参考之三
关键词：其他
3、布局（Layout）属性：
在以前的HTML里，元素的位置只能靠元素的依次排列觉得，而在CSS里你可以更精确的定位元素。Netscape曾提出过Layer标记，它对于精确布局很有好处，但是并没有被W3C承认，W3C在CSS提出了类似于Lay er标记的功能。
position属性：
position属性用来决定元素的位置类型，详见属性：
属性名称: 'position'
属性值: absolute | relative | static
初始值: static
适合对象: 所有元素
是否继承: no
百分比备注: 被禁止
其属性值分别代表：
absolute：屏幕上的绝对位置。
relative：屏幕上的相对位置。
static：固有位置。
direction属性：
direction属性决定BOX的排列方向，详见属性：
属性名称: 'direction'
属性值: ltr| rtl
初始值: ltr
适合对象: 所有元素
是否继承: yes
百分比备注: 被禁止
float和clear属性：
在HTML中图片可以选择飘浮的位置，现在BOX对象通过CSS对于也可以选择飘浮的位置。改变BOX的float属性，BOX将飘浮在其他元素的左或右方：
属性名称: 'float'
属性值: left| right|none
初始值: none
适合对象: 所有元素
是否继承: no
百分比备注: 被禁止
例如：
<STYLE type="text/css">
IMG { float: left }
BODY, P, IMG { margin: 2em }
</STYLE>
<BODY>
<P>
<IMG src=img.gif>
Some sample text that has no other...
</B
