本节是 CSS 属性大全(总结) 第四部分的内容，欢迎大家继续文中。
Netscape Navigator 4.x错误地忽略除了screen值外的任何使用MEDIA值声明的连接或嵌入样式表。例如，MEDIA="screen,projection"会令到样式表被Navigator4.x忽略，尽管展示的设备是计算机的屏幕。Navigator 4.x 也忽略使用MEDIA=all声明的样式表。
REL属性用于定义连接的文件和HTML文档之间的关系。REL=StyleSheet指定一个固定或首选的样式而REL="AlternateStyleSheet"定义一个交互样式。固定样式在样式表激活时总被应用。缺少的TITLE属性，就像例子中的第一个<LINK>标记，定义一个固定样式。
一个首选样式会自动被应用，就像例子中的第二个<LINK>标记。REL=StyleSheet和一个TITLE属性的组合指定一个首选的样式。网页制作者不能指定多于一个的首选样式。
交互样式通过REL="AlternateStyleSheet"指出。例子中的第三个<LINK>标记定义一个交互样式，用户可以选择用来代替首选样式表。
注意，现在的浏览器一般都缺乏选择交互样式的能力。
单一的样式也可以通过多个样式表给出
<LINK REL=StyleSheet HREF="basics.css"TITLE="Contemporary">
<LINK REL=StyleSheet HREF="tables.css"TITLE="Contemporary">
<LINK REL=StyleSheet HREF="forms.css"TITLE="Contemporary">
在这个例子中，三个样式表组合成一个"Contemporary"样式，作为一个首选样式表被应用。要组合多个样式表成一个单一样式，必须在每个样式表中使用相同TITLE。
当样式被应用到很多的网页时，一个外部样式表是理想的。网页制作者使用外部样式表可以改变整个网站的外观而仅仅通过改变一个文件。同样的，大多数浏览器会保存外部样式表在缓冲区，从而如果样式表在缓冲区就避免了在展示网页时的延迟。
Microsoft Internet Explorer 3 for Windows 95/NT4并不支持来自连接的样式表中的BODY背景图象或颜色。如果考虑到这个错误，网页制作者不妨提供另外的包括一个背景图象或颜色的结构，例如嵌入或内联样式，或使用BODY元素的BACKGROUND属性。
#----------------------------------
嵌入一个样式表
一个样式表可以使用STYLE元素在文档中嵌入:
<STYLE TYPE="text/css"MEDIA=screen>
<!--
BODY { background: url(foo.gif) red; color: black }
P EM { background: yellow; color: black }
.note { margin-left: 5em; margin-right: 5em }
-->
</STYLE>
STYLE元素放在文档的HEAD部分。必须的TYPE属性用于指定媒体类型，LINK元素也一样。同样地，TITLE和MEDIA属性也可以用STYLE指定。
旧版本的浏览器，并不能识别STYLE元素，会将其当作BODY的一部分照常展示其内容，从而使这些样式表对用户是可见的。要防止这样做，STYLE元素的内容要包含一个SGML注解(<!--comment -->)在里面，像上述例子那样。
嵌入的样式表可用于当一个文档具有独一无二的样式的时候。如果多个文档都使用同一样式表，那么外部样式表会更适用。
#--------------------------------
输入一个样式表
一个样式表可以使用CSS的@import 声明被输入。这个声明用于一个CSS文件或内部的STYLE元素:
<STYLE TYPE="text/css" MEDIA="screen,projection">
<!--
@import url(http://www.jb200.com/style.css);
@import url(/stylesheets/punk.css);
DT { background: yellow; color: black }
-->
</STYLE>
注意其它的CSS规则应该仍然包括在STYLE元素中，但所有的@import声明必须放在样式表的开始部分。任意在样式表中指定了的规则，其自身超越在输入样式表中对立的规则。例如上例，即使一个输入的样式表包含DT{ background: aqua }，定义项(definition terms)依然会是黄色的背景。
被输入的样式表的顺序对于它们怎样层叠是很重要的。在上述的例子中，如果style.css输入的样式表指定了STRONG元素会显示为红色而punk.css样式表指定了STRONG元素显示为黄色的话，那么后面的规则会获胜，而STRONG元素会显示为黄色。
输入的样式表对于模块性效果很有用处。例如，一个网站可以通过使用了的选择符分类样式表。一个simple.css样式表给出公共的元素像BODY、P、H1和H2。此外，一个extra.css样式表给出较少共通的元素像CODE、BLOCKQUOTE和DFN。一个tables.css样式表可以用于定义变革元素的规则。这三个样式表在需要的时候可以使用@import声明包括在HTML中。三个样式表也可以通过LINK元素组合。
#------------------------------------
内联样式
样式可以使用STYLE属性内联。STYLE属性可以应用于任意BODY元素(包括BODY本身)，除了BASEFONT、PARAM和SCRIPT。这个属性将任何数量的CSS声明当作自己的值，而每个声明用分号隔开。以下是一个例子:
<P STYLE="color: red;"> 这段的样式是红色的NewCenturySchoolbook字，如果字体可用的话。</P>
注意在STYLE中New Century Schoolbook包含在单引号中，因为双引号被用作包含样式声明。
内联的样式比其他方法更加灵活。要使用内联样式，必须使用Content-Style-TypeHTTP页眉扩展对整个文档进行单独的样式表语言声明。使用内联CSS的网页制作者必须将text/css作为Content-Style-TypeHTTP页眉，或在HEAD部分包括以下标记:
<META HTTP-EQUIV="Content-Style-Type"CONTENT="text/css">
因为和需要展示的内容混合在一起，内联样式会失去一些样式表的优点。同样地，内联样式默认地接受所有媒体，因为没有任何的为内联样式指定明确的媒体的语句。这种方法应该尽量少用，如当一个样式会应用在所有媒体到一个元素的个别情况。如果样式会被应用到单一元素的场合，但只能使用确认的媒体的话，使用ID属性代替STYLE属性。
#----------------------------------
CLASS属性
CLASS属性用于指定元素属于何种样式的类。例如，样式表可以加入punk和warning类:
.punk { color: lime; background: #ff80c0 }
P.warning { font-weight: bolder; color: red; background: white}
这些类可以使用CLASS属性在HTML中引用:
<H1
<P
在这个例子中，punk类可以用于任何BODY元素因为它在样式表中没有HTML元素关联。而在这个例子的样式表，warning类只能用于P元素。
一个良好的习惯是在命名类的时候，根据它们的功能而不是根据它们的外观。上述例子中的warning类也可以命名为red，但如果网页制作者决定改变这个类的样式为别的颜色，或希望为那些使用PC喇叭的人定义为aural(听觉)样式的话，那么这个名字就变得毫无意义了。
类会是应用样式到HTML文档中在结构上一样的部分的有效的办法。例如，本页使用类给CSS源代码和HTML源代码使用不同的样式。
#-------------------------------------------
ID属性
ID属性用于定义一个元素的独特的样式。一个CSS规则如
#wdg97 { font-size: larger }
可以通过ID属性应用到HTML中:
<P ID=wdg97>欢迎访问Web Design Group及TVwater 168!</P>
整个文档当中的每个ID属性的值都必须是唯一的。其值必须是一个以字母开头紧接字母、识字或连字符。字母限于A-Z和a-z。
注意HTML4.0允许在ID属性中有句号，但CSS1不允许在ID选择符中有句号。也要注意CSS1允许Unicode字符161-255而且忽略Unicode字符为一个数字代码，但HTML4.0不允许这些字符在一个ID属性值当中。
当一个样式只需要在任何文档中应用一次时，使用ID是很适合的。ID与STYLE属性相比，在于ID允许指定媒体的样式，而且也可以被应用于多个文档(虽然每个文档只用一次)。
#--------------------------------------------
SPAN元素
SPAN元素被加入到HTML中以允许网页制作者给出样式但无须附加在一个HTML的结构元素上。SPAN在样式表中作为一个选择符使用，而且它也能接受STYLE、CLASS和ID属性。
SPAN是一个内联元素，所以它可以作为HTML中的元素如EM和STRONG使用。最重要的差别在于虽然EM和STRONG带有结构的意义，但SPAN就没有这样的意义。它的存在纯粹是应用样式，所以当样式表失效时它就没有任何的作用。
一些SPAN例子如下:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML4.0//EN">
<HTML>
<HEAD>
<TITLE>SPAN的例子</TITLE>
<STYLE TYPE="text/css" MEDIA="screen, print,projection">
<!--
.firstwords { font-variant: small-caps }
-->
</STYLE>
</HEAD>
<BODY>
<P><SPAN first fewwords</SPAN>前面是
段落中少数的文字，会是小型大写字母。样式也可以内联，如改变文
字的样式为<SPAN>Arial</SPAN>.</P>
#-------------------------------------
DIV元素
DIV元素在功能上与SPAN元素相似，最主要的差别在于DIV("division"，"部分"的简称)是一个块级元素。DIV可以包含段落、标题、表格甚至其它部分。这使DIV便于建立不同集成的类，如章节、摘要或备注。例如:
<DIV
<H1>Divisions/部分</H1>
<P>DIV元素在HTML 3.2中有定义，但HTML3.2中只有ALIGN属性能兼容。HTML4.0在属性中加入CLASS、STYLE、和ID属性。</P>
<P>因为DIV可以包含其他块级集成，在用于建立文档的大型章节例如本备注是很有用的。</P>
<P>要求关闭标记。</P>
</DIV>
#------------------------------------------
关于认证的备注
少数使用了CSS样式的文档能在HTML3.2(Wilbur)层(在WDG网站，译者注)得到认证。HTML3.2不会解释SPAN元素，也不解释CLASS、STYLE或ID属性，而且在LINK和STYLE元素中也很少支持TYPE和MEDIA属性。
这些有关的样式元素和属性对不支持的浏览器不会有害，因为它们能安全地忽略。文档使用这些元素和属性可以被认证防御于HTML4.0。
显示
语法: display: <值>
允许值: block | inline | list-item | none
初始值: block
适用于: 所有对象
向下兼容: 否
显示属性允许使用四个值中的一个来定义一个元素:
block (在元素的前和后都会有换行)
inline (在元素的前和后都不会有换行)
list-item (与block相同, 但增加了目录项标记)
none (没有显示)
每个元素都典型地由浏览器基于HTML规格建议的展示形式给出一个缺省的显示值。
显示属性可能并不安全，因为它使用另外的不合适的格式显示元素。使用值none将关闭指定元素及其子元素的显示！
#--------------------------------------------
空白
语法: white-space: <值>
允许值: normal | pre | nowrap
初始值: normal
适用于: 块级元素
向下兼容: 是
空白属性将决定如何处理元素内的空格. 该属性的值取以下三个中的一个:
normal (将多个空格折叠成一个)
pre (不折叠空格)
nowrap (不允许换行，除非遇到<BR>标记)
#------------------------------------------
目录样式类型
语法: list-style-type: <值>
允许值: disc | circle | square | decimal | lower-roman | upper-roman| lower-alpha | upper-alpha | none
初始值: disc
适用于: 带有显示值的目录项元素
向下兼容: 是
目录样式项属性指定目录项标记的类型，当目录样式图象值为none或当图象载入选项被关闭时使用。
例如:
#------------------------------------------------
目录样式图象
语法: list-style-image: <值>
允许值: <url> | none
初始值: none
适用于: 带有显示值的目录项元素
向下兼容: 是
当图象载入选项打开时，目录样式图象属性在指定目录项标记使用哪个图象代替由目录样式类型属性指定的标记。
例如:
#------------------------------------------------
目录样式位置
语法: list-style-position: <值>
允许值: inside | outside
初始值: outside
适用于: 带有显示值的目录项元素
向下兼容: 是
目录样式位置属性可以取值inside(内部) oroutside(外部)，其中outside是缺省值。整个属性决定关于目录项的标记应放在那里。如果使用inside值，换行会移到标记下，而不是缩进。应用的例子如下:
#--------------------------------------------------
目录样式
语法: list-style: <值>
允许值: <目录样式类型> ||<目录样式位置> ||<url>
初始值: 未定义
适用于: 带有显示值的目录项元素
向下兼容: 是
目录样式属性是目录样式类型、目录样式位置，和目录样式图象属性的略写。
例如:
上边界
语法: margin-top: <值>
允许值: <长度> |<百分比> | auto
初始值: 0
适用于: 所有元素
向下兼容: 否
上边界属性用一个指定的长度或百分比值来设置元素的上边界。百分比值参考上级元素的宽度。允许使用负值边际。
例如，以下的规则将消除文件的上边界。
BODY { margin-top: 0 }
注意如果边界在垂直方向邻接(重叠)了，会改用其中最大的那个边界值。
#--------------------------------------------------
右边界
语法: margin-right: <值>
允许值: <长度> |<百分比> | auto
初始值: 0
适用于: 所有元素
向下兼容: 否
右边界属性用一个指定的长度或百分比值来设置元素的右边界。百分比值参考上级元素的宽度。允许使用负值边际。
例如:
P.narrow { margin-right: 50% }
注意如果边界在水平方向邻接(重叠)了，不会改用其它边界值。
#--------------------------------------------------
下边界
语法: margin-bottom: <值>
允许值: <长度> |<百分比> | auto
初始值: 0
适用于: 所有元素
向下兼容: 否
下边界属性用一个指定的长度或百分比值来设置元素的下边界。百分比值参考上级元素的宽度。允许使用负值边际。
例如:
DT { margin-bottom: 3em }
注意如果边界在垂直方向邻接(重叠)了，会改用其中最大的那个边界值。
#--------------------------------------------------------
左边界
语法: margin-left: <值>
允许值: <长度> |<百分比> | auto
初始值: 0
适用于: 所有元素
向下兼容: 否
左边界属性用一个指定的长度或百分比值来设置元素的左边界。百分比值参考上级元素的宽度。允许使用负值边际。
例如:
ADDRESS { margin-left: 50% }
注意如果边界在水平方向邻接(重叠)了，不会改用其它边界值。
#------------------------------------------------------
边界
语法: margin: <值>
允许值: [ <长度> |<百分比> | auto ]{1,4}
初始值: 未定义
适用于: 所有元素
向下兼容: 否
边界属性用一到四个值来设置元素的边界，每个值都是长度、百分比或者自动。百分比值参考上级元素的宽度。允许使用负值边际。
如果四个值都给出了，它们分别被应用于上、右、下和左边界。如果只给出一个值，它被应用于所有边界。如果两个或三个值给出了，省略了的值与对边相等。
边界声明包括以下例子：
BODY { margin: 5em }
P { margin: 2em 4em }
DIV { margin: 1em 2em 3em 4em }
注意如果边界在垂直方向邻接(重叠)了，会改用其中最大的那个边界值。而水平方向则不会。
使用边界属性可以一次性地设置所有边界；也可以选择使用上边界、下边界、左边界和右边界属性。
#----------------------------------------------------
上补白
语法: padding-top: <值>
允许值: <长度> |<百分比>
初始值: 0
适用于: 所有对象
向下兼容: 否
上补白属性描述上边框和选择符的内容之间有多少间隔。该值可以是一个长度或百分比。百分比的值参考上级元素的宽度。不能使用负值。
#--------------------------------------------------
右补白
语法: padding-right: <值>
允许值: <长度> |<百分比>
初始值: 0
适用于: 所有对象
向下兼容: 否
右补白属性描述右边框和选择符的内容之间有多少间隔。该值可以是一个长度或百分比。百分比的值参考上级元素的宽度。不能使用负值。
#-------------------------------------------------
下补白
语法: padding-bottom: <值>
允许值: <长度> |<百分比>
初始值: 0
适用于: 所有对象
向下兼容: 否
下补白属性描述下边框和选择符的内容之间有多少间隔。该值可以是一个长度或百分比。百分比的值参考上级元素的宽度。不能使用负值。
#----------------------------------------------
左补白
语法: padding-left: <值>
允许值: <长度> |<百分比>
初始值: 0
适用于: 所有对象
向下兼容: 否