自
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 ），在样式单中，声明分为两种，
一、什么是 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> 用红色表示 。
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">
可以看出，
/ 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 ：适合于所有媒体。
SCREEN ：指计算机屏幕。
PRINT ：指用于打印机的不透明介质。
PROJECTION ：指用于显示的项目。
BRAILLE ：盲文系统，指有触觉效果的印刷品。
AURAL ：指语音电子合成器。
TV ：指电视类型的媒体。
HANDHELD ：指手持式显示设备（小屏幕，单色）
ALL ：适合于所有媒体。
2 、 BOX 模型（ BOX Model ）属性
|
Margin
|
表示
BOX
里内容离边框的距离
|
|
Padding
|
描述
BOX
的边框和内容之间插入多少空间
|
|
Border
|
实际上
BOX
是有边框的，只是平时不显示出来罢了
|
|
z-index
|
在
CSS
中允许元素的重叠显示，这样就有一个显示顺序的问题，
z-index
属性描述了元素的前后位置，如果把电脑屏幕看作
X-Y
平面的话，那么
Z
轴就是垂直于屏幕的，
z-index
使用整数表示元素的前后位置，数值越大，就会显示在相对靠前的位置，并且
C SS
同意在
z-index
中使用负数。
属性名称 : 'z-index' 属性值 : auto|<integer> 初始值 : auto 适合对象 : 使用 position 属性的元素 是否继承 : no 百分比备注 : 被禁止 |
什么是 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...
</BODY>
相反的，使用 clear 属性将禁止元素在 BOX 的左方或右方飘浮：
属性名称 : 'clear'
属性值 : left| right|both|none
初始值 : none
适合对象 : 所有元素
是否继承 : no
百分比备注 : 被禁止
绝对位置属性：
绝对位置属性有四个属性： top 、 right 、 bottom 和 left ，属性值为长度单位或百分数：
属性名称 : 'top' 、 'right' 、 'bottom' 、 'left'
属性值 : <length>|<percentage>|auto
初始值 : none
适合对象 : 所有元素
是否继承 : no
百分比备注 : 被禁止
利用以上属性，用户就可以精确定义元素的位置，如：
<P style="position: relative; margin-right: 10px; left: 10px;">
I used two red hyphens to serve as a change bar. They
will "float" to the left of the line containing THIS
<SPAN style="position: absolute; top: auto; left: 0px; color: red;">--</SPAN>
word.</P>
|
z-index
属性：
在 CSS 中允许元素的重叠显示，这样就有一个显示顺序的问题， z-index 属性描述了元素的前后位置，如果把电脑屏幕看作 X-Y 平面的话，那么 Z 轴就是垂直于屏幕的， z-index 使用整数表示元素的前后位置，数值越大，就会显示在相对靠前的位置，并且 C SS 同意在 z-index 中使用负数。 属性名称 : 'z-index' 属性值 : auto|<integer> 初始值 : auto 适合对象 : 使用 position 属性的元素 是否继承 : no 百分比备注 : 被禁止 |
width 属性：
规定 BOX 的 width 属性，可以使 BOX 的宽度不依靠它所包含的内容的多少：
属性名称 : 'width'
属性值 : <length> | <percentage> | auto
初始值 : auto
适合对象 : 块元素
是否继承 : no
百分比备注 : 根据父元素的 width 而定
在 CSS 中还提供了 min-width 和 max-width 属性，使得 BOX 的宽度在最小宽度和最大宽度之间。
属性名称 : 'min-width'
属性值 : <length> | <percentage>
初始值 : 0
适合对象 : all
是否继承 : no
百分比备注 : 根据父元素的 width 而定
属性名称 : 'max-width'
属性值 : <length> | <percentage>
初始值 : 100%
适合对象 : all
是否继承 : no
百分比备注 : 根据父元素的 width 而定
height 属性：
相同的 BOX 还有 height 属性来控制本身的高度：
属性名称 : 'height'
属性值 : <length> | <percentage> | auto
初始值 : auto
适合对象 : 块元素
是否继承 : no
百分比备注 : 根据父元素的 height 而定
在 CSS 中还提供了 min-height 和 max-height 属性，使得 BOX 的高度在最小高度和最大高度之间。
属性名称 : 'min-height'
属性值 : <length> | <percentage>
初始值 : 0
适合对象 : all
是否继承 : no
百分比备注 : 根据父元素的 height 而定
属性名称 : 'max-height'
属性值 : <length> | <percentage>
初始值 : 100%
适合对象 : all
是否继承 : no
百分比备注 : 根据父元素的 height 而定
|
overflow
属性：
在规定元素的宽度和高度时，如果元素的面积不足以显示全部内容的话就要用到 overflow 属性： 属性名称 : 'overflow' 属性值 : visible | hidden | scroll | auto 初始值 : visible 适合对象 : 元素的 position 属性 是否继承 : no 百分比备注 : 被禁止 属性值含义如下： visible ：扩大面积以显示所有内容。 hidden ：隐藏超出范围的内容。 scroll ：在元素的右边显示一个滚动条。 auto ：当内容超出元素面积时，显示滚动条。 |
clip 属性：
CSS 还提供了一种 clip 属性，可以把元素区域剪切成各种形状，但目前提供的只有方形一种：
属性名称 : 'clip'
属性值 : <shape> | auto
初始值 : auto
适合元素 : 元素的 position 属性被设为 absolute
是否继承 : no
百分比备注 : 被禁止
<shape> 值为 rect(top right bottom left) 。
|
line-height
和
vertical-align
属性：
line-height 属性可以规定元素内部的行间距，使用长度单位或百分数： 属性名称 : 'line-height' 属性值 : normal | <number> | <length> | <percentage> 初始值 : normal 适合对象 : 所有元素 是否继承 : yes 百分比备注 : 根据元素的字体大小而定 例如下面的例子，虽然表达方式不同，但结果一样： DIV { line-height: 1.2; font-size: 10pt } DIV { line-height: 1.2em; font-size: 10pt } DIV { line-height: 120%; font-size: 10pt } |
|
vertical-align
属性决定元素在垂直位置的显示：
[
只适用于表格，并不是用于垂直定位的；是否与基线对齐等
]
属性名称 : 'vertical-align' 属性值 : baseline | sub | super | top | text-top | middle | bottom | text-bottom | <percentage> | <length> 初始值 : baseline 适合对象 : inline elements 适合继承 : no 百分比备注 : 根据元素的 line-height 属性而定 属性值含义如下： baseline ：与元素的基线对齐。 middle ：与元素中部对齐。 sub ：字下沉。 super ：字上升。 text-top ：文本顶部对齐。 text-bottom ：文本底部对齐。 Top ：和本行位置最高元素对齐。 Bottom ：和本行位置最低元素对齐。 |
Visibility 属性 :
该属性用于控制元素的显示或隐藏：
属性名称 : 'visibility'
属性值 : inherit | visible | hidden
初始值 : inherit
适合对象 : 所有元素
是否继承 : 如果该值为 inherit ，则继承父元素属性
百分比备注 : 被禁止
4 、颜色和背景（ Color and Background ）属性：
这里介绍有关 CSS 中前景色和背景颜色、图片的设定方法。
color 属性：
color 属性用于设定元素的前景色：
属性名称 : 'color'
属性值 : <color>
初始值 : 根据用户的初始值而定
适合对象 : 所有元素
是否继承 : yes
百分比备注 : 被禁止
color 属性的值可以是十六进制数值、 rgb() 函数或 CSS 承认的颜色名称。如：
EM { color: red }
EM { color: rgb(255,0,0) }
背景属性：
background-color 属性用于设定背景色，初始值为透明：
属性名称 : 'background-color'
属性值 : <color> | transparent
初始值 : transparent
适合对象 : 所有元素
是否继承 : no
百分比备注 : 被禁止
backgroud-image 属性用于设定背景的图片：
属性名称 : 'background-image'
属性值 : <url> | none
初始值 : none
适合对象 : 所有元素
是否继承 : no
百分比备注 : 被禁止
其中 url 可以为绝对地址，也可以是相对地址，例如：
BODY { background-image: url(marble.gif) }
P { background-image: none }
以上两个属性利用普通的 HTML 属性也可以实现，下面的属性是 CSS 对原有 HTML 的扩展。
background-repeat 属性用来描述背景图片的重复排列方式：
属性名称 : 'background-repeat'
属性值 : repeat | repeat-x | repeat-y | no-repeat
初始值 : repeat
适合对象 : 所有元素
是否继承 : no
百分比备注 : 被禁止
其中属性值的含义为：
repeat ：沿 X 轴和 Y 轴两个方向重复显示图片。
repeat-x ：沿 X 轴方向重复图片。
repeat-y ：沿 Y 轴方向重复图片。
none ：不重复图片。
例如：
BODY {
background: red url(pendant.gif);
background-repeat: repeat-y;
}
/* 表示沿 Y 轴重复图片 “pendant.gif” ，其余部分以红色为背景色 */
|
background attachment
属性表示在滚动整个文档时，背景图片的显示方式。
它的属性值有两种：
fixed
和
scroll
，
fixed
相当于
IE4
里的水印效果，也就是说在拖动文档时，背景相对是静止的，
scroll
则和文档一起滚动
。
|
background-position 属性用来指定背景图片显示的位置：
属性名称 : 'background-position'
属性值 : [<percentage> | <length> ]{1,2} | [top | center | bottom] | | [left | center | right]
初始值 : 0% 0%
适合对象 : 容器元素
是否继承 : no
百分比备注 : refer to the size of the element itself
其中属性值含义为：
“top left” 和 “left top” 表示 “0% 0%” 。
“top” 、 “top center” 和 “center top” 表示 “50% 0%” 。
“right top” 和 “top right” 都表示 “100% 0%” 。
“left” 、 “left center” 和 “center left” 表示 “0% 50%” 。
“center” 和 “center center” 表示 “50% 50%” 。
“right” 、 “right center” 和 “center right” 都表示 “100% 50%” 。
“bottom left” 和 “left bottom” 表示 “0% 100%” 。
“bottom” 、 “bottom center” 和 “center bottom” 都表示 “50% 100%”
“bottom right” 和 “right bottom” 表示 “100% 100%” 。
例如：
BODY { background: url(banner.jpeg) right top } /* 100% 0% */
BODY { background: url(banner.jpeg) top center } /* 50% 0% */
BODY { background: url(banner.jpeg) center } /* 50% 50% */
BODY { background: url(banner.jpeg) bottom } /* 50% 100% */
background 属性是以上背景属性的快捷方式，属性和顺序如下：
属性名称 : 'background'
属性值 : <'background-color'> | | <'background-image'> | | <'background-repeat'> | | <'background-attachment'> | | <'background-position'>
适合对象 : 所有元素
是否继承 : no
百分比备注 : 只在 background-position 中容许使用
CSS2 快速参考之四
关键词：其他
5 、字体（ Font ）属性：
这里定义了关于字体的各种属性。
font-family 属性定义字体的名称，可以是一个字体的名称，也可以是一类字体的名称，字体的名称一定要和计算机系统里的完全一样：
属性名称 : 'font-family'
属性值 : [[ <family-name> | <generic-family> ],]* [<family-name> | <generic-family>]
初始值 : 根据用户定义而定
适合对象 : 所有元素
是否继承 : yes
百分比备注 : 被禁止
有些计算机系统里如果没有样式单要求的字体，可以再设一个次字体以备万一。例如：
BODY { Baskerville, "Heisi Mincho W3", Symbol, serif }
family-name 是指确定的某字体，如 Heisi Mincho W3 ， generic-family 指某一类字体，如 serif 。
|
font-style
属性描述字体的倾斜程度：
属性名称 : 'font-style' 属性值 : normal | italic | oblique 初始值 : normal 适合对象 : 所有元素 是否继承 : yes 百分比备注 : 被禁止 |
font-variant 属性：
属性名称 : 'font-variant'
属性值 : normal | small-caps
初始值 : normal
适合对象 : 所有元素
是否继承 : yes
百分比备注 : 被禁止
一个使用了 small-caps 属性的元素中的小写字母看起来要比正常的大写字母小一些。
font-weight 属性用来描述字重。
属性名称 : 'font-weight'
属性值 : normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
初始值 : normal
适合对象 : 所有元素
是否继承 : yes
百分比备注 : 被禁止
100 到 900 代表 9 种不同的字重， 400 代表 normal ， 700 代表 bold ， 900 是最重的字体， bolder 或 lighter 表示字体的字重比父元素高或低一级，比如父元素字重为 400 ，则 bolder 代表字重 500 ，如果父元素本身字重为 9 00 ，那么 bolder 后，字重还是 900 ，同样的 lighter 也一样。有些字体并没有 100 到 900 那么全的字重，也许是从 300 到 700 ，那么字重的最小和最大值也为 300 到 700 。例如：
P { font-weight: normal } /* 400 */
H1 { font-weight: 700 } /* bold */
font-size 属性描述字体的大小：
属性名称 : 'font-size'
属性值 : <absolute-size> | <relative-size> | <length> | <percentage>
初始值 : medium
适合对象 : 所有元素
是否继承 : yes
百分比备注 : relative to parent element's font size
该属性可以使用绝对大小，也可以使用相对大小，其中绝对大小可以使用，如下关键字表示：
xx-small | x-small | small | medium | large | x-large | xx-large
分别代表最小、较小、小、中等、大、较大和最大。
相对大小可以使用： larger 或 smaller 描述。
例如：
P { font-size: 12pt; }
BLOCKQUOTE { font-size: larger }
EM { font-size: 150% }
EM { font-size: 1.5em }
Font 属性是以上属性的快捷方式，属性如下：
属性名称 : 'font'
属性值 : [ [ <'font-style'> | | <'font-variant'> | | <'font-weight'> ]? <'font-size'> [ / <'line-height'> ]? <'font-family'> ]
适合对象 : 所有元素
是否继承 : yes
百分比备注 : 只在 font-size 使用
例如：
P { font: 12pt/14pt sans-serif } P { font: 80% sans-serif }
P { font: x-large/110% "new century schoolbook", serif }
P { font: bold italic large Palatino, serif }
P { font: normal small-caps 120%/120% fantasy }
6 、文本（ Text ）属性：
这里的属性将影响 WEB 文档中的文本显示情况。
text-indent 属性描述文本的缩进程度：
属性名称 : 'text-indent'
属性值 : <length> | <percentage>
初始值 : 0
适合对象 : 容器元素
是否继承 : yes
百分比备注 : 根据父元素的宽度而定
下面的例子表明段落的缩进值为 3em ：
P { text-indent: 3em }
Alignment 属性表明文本的对齐方式：
属性名称 : 'alignment'
属性值 : left | right | center | justify
初始值 : 依照用户定义
适合对象 : block-level elements
是否继承 : yes
百分比备注 : 被禁止
text-decoration 属性描述对文本的修饰方法：
属性名称 : 'text-decoration'
属性值 : none | [ underline | | overline | | line-through | | blink ]
初始值 : none
适合对象 : 所有元素
是否继承 : no (see clarification below)
百分比备注 : 被禁止
属性值含义分别为：
underline ：下划线。
overline ：上划线。
line-through ：删除线。
blink ：闪烁（如同 Navigator 中的 blink 标记的功能）
text-shadow 属性可以为文本加入阴影的特效：
属性名称 : 'text-shadow'
属性值 : none | <color> [, <color> ]*
初始值 : none
适合对象 : all
是否继承 : No
百分比备注 : 只在描述透明度时有效
例如：
P { text-shadow: black }
上例将在文本的右下方显示黑色阴影，另外阴影将增大 BOX 的面积。
letter-spacing 属性表明文本的字间距：属性名称 : 'letter-spacing'
属性值 : normal | <length> | auto
初始值 : normal
适合对象 : 所有元素
是否继承 : yes
百分比备注 : 被禁止
例如：
BLOCKQUOTE { letter-spacing: 0.1em }
word-spacing 属性表明文本中单词间距：
属性名称 : 'word-spacing'
属性值 : normal | <length>
初始值 : normal
适合对象 : 所有元素
是否继承 : yes
百分比备注 : 被禁止
例如：
H1 { word-spacing: 1em }
|
text-transform
属性可以将
BOX
内的文本按指定的大写或小写形式显示：
属性名称 : 'text-transform' 属性值 : capitalize | uppercase | lowercase | none 初始值 : none 适合对象 : 所有元素 是否继承 : yes 百分比备注 : 被禁止 属性值含义为： capitalize ：把 BOX 中的每句句首字母变成大写。 uppercase ：把 BOX 中所有的字母变成大写。 lowercase ：把 BOX 中所有的字母变成小写。 |
|
White-space
属性描述如何显示文本中的空格，
在
HTML
中，空格是被省略的，也就是说你在一个段落标记的开头无论输入多少个空格都是无效的，
要输入空格有两个方法，一是直接输入空格的代码
“ ”
，或者使用
<pre>
标记，
CSS
中也制定了类似于
pre
的属性：
属性名称 : 'white-space' 属性值 : normal | pre | nowrap 初始值 : normal 适合对象 : 容器元素 是否继承 : yes 百分比备注 : 被禁止 例如： PRE { white-space: pre } P { white-space: normal } |
CSS2 快速参考之五
关键词：其他
7 、列表属性：
这里的属性用来描述列表（ list ）的一系列属性。
list-style-type 属性描述用于列表每一项前使用的符号：
属性名称 : 'list-style-type'
属性值 : disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none
初始值 : disc
适合对象 : 列表元素
是否继承 : yes
百分比备注 : 被禁止
属性值含义为：
disc ：圆饼形。
circle ：空心圆形。
square ：方形。
decimal ：十进制数值。
lower-roman ：小写罗马数字。
upper-roman ：大写罗马数字。
lower-alpha ：小写希腊字母。
upper-alpha ：大写希腊字母。
例如：
<STYLE>
OL { list-style-type: lower-roman }
</STYLE>
<BODY>
<OL>
<LI> This is the first item.
<LI> This is the second item.
<LI> This is the third item.
</OL>
</BODY>
还可以利用 list-style-image 把列表前面的符号换为图形：
属性名称 : 'list-style-image'
属性值 : <url> | none
初始值 : none
适合对象 : 列表元素
是否继承 : yes
百分比备注 : 被禁止
<url> 可以是绝对地址，也可以是相对地址。
list-style-position 属性用于描述列表的位置显示：
属性名称 : 'list-style-position'
属性值 : inside | outside
初始值 : outside
适合对象 : 列表元素
是否继承 : yes
百分比备注 : 被禁止
属性值 outside 和 inside 分别表示在 BOX 外部显示或内部显示，例如：
<STYLE type="text/css">
UL { list-style: outside }
UL.compact { list-style: inside } </STYLE> <UL>
<LI>first list item comes first
<LI>second list item comes second
</UL>
<UL class=compact>
<LI>first list item comes first
<LI>second list item comes second
</UL>
list-style 属性为以上属性的快捷方式：
属性名称 : 'list-style'
属性值 : <'list-style-type'> | | <'list-style-position'> | | <'list-style-image'>
初始值 : no
适合对象 : 列表元素
是否继承 : yes
百分比备注 : 被禁止
例如：
UL { list-style: upper-roman inside } /* 对任何 UL 有效 */
UL ~ UL { list-style: circle outside } /* 对任何 UL 内部的 UL 标记有效 */
8 、表格属性：
由于表格中的大部分属性已经在以上的各类属性中探讨过了，所以这里只有两个属性介绍：
row-span 属性描述表格跨越的行的数目：
属性名称 : 'row-span'
属性值 : <integer>
初始值 : 1
适合对象 : 表格元素
是否继承 : no
百分比备注 : 被禁止
column-span 属性描述表格跨越的列的数目：
属性名称 : 'column-span'
属性值 : <integer>
初始值 : 1
适合对象 : 表格元素
是否继承 : no
百分比备注 : 被禁止
9 、用户界面属性：
cursor 属性，用户可以指定在某个元素上要使用的光标形状：
属性名称 : 'cursor'
属性值 : auto | crosshair | default | pointer | move | e-resize | ne-resize | nw-resize | n-resize | se-resize | sw-resize | s-resize | w-resize| text | wait | help | <url> 初始值 : auto
适合对象 : 所有元素
是否继承 : yes
百分比备注 : 被禁止
属性值分别代表鼠标指针在 windows 操作里的各种形状，另外还可以指定指针图标的 url 地址，不过 CSS 还暂时不支持 ani 动画光标。
到此，所有关于 CSS 现有的属性都介绍完了（还有一些关于听觉方面的样式单，就不再作介绍），本文也该结束了，虽然现在支持样式单的浏览器种类还不多，但也占到了大半，样式单迟早会成为浏览器的统一标准，原因有两个：一、样式单是 W 3C 唯一接受的样式标准，而且没有任何迹象表明 W3C 会把 javascript 样式单作为样式单标准；二则是 CSS 有效的解决了把事件引入元素的问题，配合脚本程序，是动态 HTML 不可缺少的一部分，尝试着用样式单建立 W eb 页， 你会发现它真的很方便。希望我的这些努力能为你熟练掌握样式单尽一点力。
791
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
