3.1 CSS 简介 3.2 在网页中插入样式表的方法及定义 3.3 多重样式表的层叠...

3.1 CSS3.1 CSS 简介简介

3.2 3.2 在网页中插入样式表的方法及定义在网页中插入样式表的方法及定义

3.3 3.3 多重样式表的层叠多重样式表的层叠

3.4 3.4 样式表的属性单位样式表的属性单位

3.5 3.5 样式表的常用属性样式表的常用属性

第第 33 章高效定制网页样式——章高效定制网页样式—— CSSCSS

CSSCSS （（ Cascading Style SheetsCascading Style Sheets ）中文翻译为层叠样式）中文翻译为层叠样式表单，简称样式表，是用于（增强）控制网页样式并允许将表单，简称样式表，是用于（增强）控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。样式就是格式，样式信息与网页内容分离的一种标记性语言。样式就是格式，在网页中，像文字的大小、色彩以及图片位置等，都是设置在网页中，像文字的大小、色彩以及图片位置等，都是设置显示内容的样式。层叠是指当在显示内容的样式。层叠是指当在 HTMLHTML 文档中引用多个定义文档中引用多个定义样式的样式文件（样式的样式文件（ CSSCSS 文件）时，若多个样式文件间所定义文件）时，若多个样式文件间所定义的样式发生冲突，将依据层次顺序处理。的样式发生冲突，将依据层次顺序处理。

3.1 CSS3.1 CSS 简介简介

1. 1. 在在 HTMLHTML 文档中定义样式表文档中定义样式表可以在可以在 HTMLHTML 文档的文档的 <html><html> 和和 <body><body> 标记之间插入标记之间插入一个一个 <style>...</style><style>...</style> ，在其中定义样式。其格式为：，在其中定义样式。其格式为： <style type="text/css"><style type="text/css"> --> </style></style>

【例3-1】【例3-2】


3.2.1 3.2.1 内部样式表内部样式表

2. 2. 用用 classclass 选择符定义样式选择符定义样式用类选择符能够把相同的标记分类定义为不同的样式。用类选择符能够把相同的标记分类定义为不同的样式。其格式为：其格式为：<style type="text/css"><style type="text/css">--></style> </style>

【例3-3】

3. 3. 用用 idid 选择符定义样式选择符定义样式 idid 选择符是用来对某个单一元素定义单独的样式。定义选择符是用来对某个单一元素定义单独的样式。定义 iidd 选择符时要在选择符时要在 idid 名称前加上一个“名称前加上一个“ #”#” 号。与类选择符号。与类选择符相同，定义相同，定义 idid 选择符也有两种方法。选择符也有两种方法。用用 idid 选择符定义样式的格式为：选择符定义样式的格式为：<style type="text/css"></style>

还有一种用法，在选择符中加上还有一种用法，在选择符中加上 HTML“HTML“ 标记”名，标记”名，其格式为：其格式为：<style type="text/css"><style type="text/css">--></style> </style>

【例3-4】

4. 4. 使用使用 spanspan 选择符选择符 spanspan 在样式表中作为一个选择符使用，而且它也能接受在样式表中作为一个选择符使用，而且它也能接受 sstyletyle 、、 classclass 和和 idid 。。 spanspan 元素加入到元素加入到 HTMLHTML 中，它允许网中，它允许网页制作者给出样式，但无须附加在一个页制作者给出样式，但无须附加在一个 HTMLHTML 的结构标记上。的结构标记上。 spanspan 是一个内嵌元素，所以它可以作为是一个内嵌元素，所以它可以作为 HTMLHTML 中的元素中的元素使用。使用。 spanspan 没有结构的意义，它纯粹是应用样式，所以当样没有结构的意义，它纯粹是应用样式，所以当样式表失效时它就失去任何作用。式表失效时它就失去任何作用。

【例3-5】



5. 5. 使用使用 divdiv 选择符选择符

divdiv 在功能上与在功能上与 spanspan 相似，最主要的差别在于相似，最主要的差别在于 divdiv （（ didivisionvision ，部分的简称）是一个块级标记。，部分的简称）是一个块级标记。 divdiv 可以包含段落、可以包含段落、标题、表格甚至其它部分。这使标题、表格甚至其它部分。这使 divdiv 便于建立不同集成的类，便于建立不同集成的类，如章节、摘要或备注。如章节、摘要或备注。

【例3-6】



行内样式（行内样式（ Inline stylesInline styles ）也称内嵌样式，是在）也称内嵌样式，是在 HTMLHTML标记中插入标记中插入 stylestyle 属性，再定义要显示的样式，而属性，再定义要显示的样式，而 stylestyle 属属性的内容就是性的内容就是 CSSCSS 的属性和值。用这种方法，可以很简单的属性和值。用这种方法，可以很简单的对某个标记单独定义样式。但是，利用这种方法定义样式的对某个标记单独定义样式。但是，利用这种方法定义样式时，作用范围只可控制该标记。其格式为：时，作用范围只可控制该标记。其格式为：

<< 标记标记 style="style=" 属性属性 :: 属性值属性值 ; ; 属性属性 :: 属性值属性值 ...">..."> stylestyle 属性可以应用于除属性可以应用于除 basefontbasefont 、、 paramparam 和和 scriptscript

之外的任意之外的任意 bodybody 标记（包括标记（包括 bodybody 本身）本身）。。

【例3-7】


3.2.2 3.2.2 行内样式行内样式

链入外部样式表（链入外部样式表（ Linked stylesLinked styles ）就是当浏览器读取到）就是当浏览器读取到HTMLHTML 文档的样式表链接标记时，将向所链接的外部样式文档的样式表链接标记时，将向所链接的外部样式表索取样式。样式表保存为一个样式表文件（表索取样式。样式表保存为一个样式表文件（ .css.css ），然），然后在网页中用后在网页中用 <link><link> 标记链接到这个样式表文件，这个标记链接到这个样式表文件，这个 <li<link>nk> 标记必须放到页面的标记必须放到页面的 <head>...</head><head>...</head>区内。其格区内。其格式为：式为：

<head><head> ...... <link rel="stylesheet" href="<link rel="stylesheet" href=" 外部样式表文件名外部样式表文件名 .css" ty.css" ty

pe="text/css">pe="text/css"> ......</head></head>

【例3-8】


3.2.3 3.2.3 链入外部样式表文件链入外部样式表文件

导入外部样式表（导入外部样式表（ Imported stylesImported styles ）就是当浏览器在读）就是当浏览器在读取取 HTMLHTML 文件时，复制一份样式表到这个文件时，复制一份样式表到这个 HTMLHTML 文件中。导文件中。导入外部样式表是指在内部样式表的入外部样式表是指在内部样式表的 <style><style>里导入一个外部样里导入一个外部样式表文件。其格式为：式表文件。其格式为： <style type="text/css"><style type="text/css"> --> </style></style> 【例3-9】


3.2.4 3.2.4 导入外部样式表文件导入外部样式表文件

根据规定，样式表的优先级别从到到低为：行内样式、内根据规定，样式表的优先级别从到到低为：行内样式、内部样式、链接样式、导入样式和缺省浏览器样式。浏览器将按部样式、链接样式、导入样式和缺省浏览器样式。浏览器将按照上述顺序执行样式表的规则。照上述顺序执行样式表的规则。样式表的层叠性就是继承性，样式表的继承规则是，外部样式表的层叠性就是继承性，样式表的继承规则是，外部的元素样式会保留下来继承给这个元素所包含的其他元素。所的元素样式会保留下来继承给这个元素所包含的其他元素。所有在元素中嵌套的元素都会继承外层元素指定的属性值，有时有在元素中嵌套的元素都会继承外层元素指定的属性值，有时会把很多层嵌套的样式叠加在一起，除非另外更改。遇到冲突会把很多层嵌套的样式叠加在一起，除非另外更改。遇到冲突的地方会以最后定义的为准。的地方会以最后定义的为准。

3.3 3.3 多重样式表的层叠多重样式表的层叠

1. 1. 长度单位长度单位长度单位有相对长度单位和绝对长度单位两种类型。长度单位有相对长度单位和绝对长度单位两种类型。相对类型是指相对于该属性前一个属性的单位值为基础，相对类型是指相对于该属性前一个属性的单位值为基础，

来完成目前的设置。来完成目前的设置。绝对类型使用的单位，将不会随着显示设备的不同而改变，绝对类型使用的单位，将不会随着显示设备的不同而改变，换句话说，属性值使用绝对单位时，不论在哪种设备上显示换句话说，属性值使用绝对单位时，不论在哪种设备上显示都是一样的，如屏幕上的都是一样的，如屏幕上的 1cm1cm 与打印机上的与打印机上的 1cm1cm 是一样是一样长的。长的。

相对值单位确定一个相对于另一长度属性的长度，因为它相对值单位确定一个相对于另一长度属性的长度，因为它能更好地适应不同的媒体，所以是首选的。能更好地适应不同的媒体，所以是首选的。

一个长度的值由可选的正号“一个长度的值由可选的正号“ +”+” 或负号“或负号“ -”-” ，接着一，接着一个数字，后跟标明单位的两个字母组成。在一个长度值之中个数字，后跟标明单位的两个字母组成。在一个长度值之中不能有空格。不能有空格。


3.4.1 3.4.1 长度、百分比单位长度、百分比单位

2. 2. 百分比单位百分比单位百分比单位也是一种常用的相对类型。百分比值总是相对百分比单位也是一种常用的相对类型。百分比值总是相对

于另一个值来说的，该值可以是长度单位或是其他单位。每于另一个值来说的，该值可以是长度单位或是其他单位。每一个可以使用百分比值单位指定的属性，同时也自定义了这一个可以使用百分比值单位指定的属性，同时也自定义了这个百分比值的参照值。大多数情况下，这个参照值是该元素个百分比值的参照值。大多数情况下，这个参照值是该元素本身的字体尺寸。并非所有属性都支持百分比单位。本身的字体尺寸。并非所有属性都支持百分比单位。

一个百分比值由可选的正号“一个百分比值由可选的正号“ +”+” 或负号“或负号“ -”-” ，接着一，接着一个数字，后跟百分号“个数字，后跟百分号“ %”%” 。例如：。例如：

p{ line-height: 150% } p{ line-height: 150% } /* /* 本段文字的高度为标本段文字的高度为标准行高的准行高的 1.51.5倍倍 */*/

hr{ width: 80% } hr{ width: 80% } /* /* 线段长度是相对于浏览器窗线段长度是相对于浏览器窗口的口的 80% */80% */

注意，不论使用哪种单位，在设置时，数值与单位间不要注意，不论使用哪种单位，在设置时，数值与单位间不要加空格。加空格。


3.4.1 3.4.1 长度、百分比单位长度、百分比单位

在在 HTMLHTML 标记中只提供了两种设置色彩的方法：十六进制标记中只提供了两种设置色彩的方法：十六进制数和色彩名称。数和色彩名称。 CSSCSS则提供了三种定义色彩的方法：十六进则提供了三种定义色彩的方法：十六进制数、制数、 rgbrgb函数（整数或百分数）和色彩名称。函数（整数或百分数）和色彩名称。 1. 1. 用十六进制数方式表示色彩值用十六进制数方式表示色彩值要使用要使用 RGBRGB 概念指定色彩时，使用一个概念指定色彩时，使用一个 ## 号，加上号，加上 66个个十六进制的数字表示，表示方法为：十六进制的数字表示，表示方法为： #RRGGBB#RRGGBB。其中前两。其中前两个数字代表红光强度（个数字代表红光强度（ RedRed ），中间两个数字代表绿光强度），中间两个数字代表绿光强度（（ GreenGreen ），后两个数字代表蓝光强度（），后两个数字代表蓝光强度（ BlueBlue ）。以上三个）。以上三个参数的取值范围为：参数的取值范围为： 0000 ～～ FFFF，参数必须是两位数。对于只，参数必须是两位数。对于只有一位的，应在前面补零。这种方法共可表示有一位的，应在前面补零。这种方法共可表示 256×256×25256×256×2566种色彩，即种色彩，即 16M16M 种色彩。而红色、绿色、黑色、白色的十种色彩。而红色、绿色、黑色、白色的十六进制设置值分别为：六进制设置值分别为： #ff0000#ff0000、、 #00ff00#00ff00、、 #0000ff#0000ff、、 #0#00000000000、、 #ffffff#ffffff。例如：。例如： div { color: #ff0000 } div { color: #ff0000 }


3.4.2 3.4.2 色彩单位色彩单位

22. . 用用 rgbrgb函数方式表示色彩值函数方式表示色彩值在在 CSSCSS 中，可以用中，可以用 rgbrgb函数设置出所要的色彩。语法为：函数设置出所要的色彩。语法为：rgb(R,G,B)rgb(R,G,B)。。 RR为红色值，为红色值， GG为绿色值，为绿色值， BB为蓝色值。三个为蓝色值。三个参数可取正整数值或百分数值，正整数值的取值范围为：参数可取正整数值或百分数值，正整数值的取值范围为： 00 ～～255255；百分数值的取值范围为色彩强度的百分比：；百分数值的取值范围为色彩强度的百分比： 0.0%0.0% ～～ 1100.0%00.0%。例如：。例如：div { color: rgb(132,20,180) }div { color: rgb(132,20,180) }div { color: rgb(12%,200,50%) }div { color: rgb(12%,200,50%) }3. 3. 用色彩名称方式表示色彩值用色彩名称方式表示色彩值在在 CSSCSS 中也提供了与中也提供了与 HTMLHTML 一样的用色彩名称表示色彩一样的用色彩名称表示色彩的方式。的方式。 CSSCSS 只提供了只提供了 1616种色彩名称，见表种色彩名称，见表 2-12-1 。例如：。例如：div {color: red }div {color: red }


3.4.2 3.4.2 色彩单位色彩单位

1. 1. 字体（字体（ font-familyfont-family ））语法：语法： font-family : font-family : 字体名称字体名称参数：字体名称按优先顺序排列，以逗号隔开。如果字体参数：字体名称按优先顺序排列，以逗号隔开。如果字体名称包含空格，则应使用引号括起。名称包含空格，则应使用引号括起。说明：用说明：用 font-familyfont-family 属性可控制显示字体。不同的操作属性可控制显示字体。不同的操作系统，其字体名是不同的。对于系统，其字体名是不同的。对于 WindowsWindows系统，其字体名就系统，其字体名就如如 WordWord 中的“字体”列表中所列出的字体名称。中的“字体”列表中所列出的字体名称。示例：示例：body { font-family: "gill sans", "new baskerville", serifbody { font-family: "gill sans", "new baskerville", serif } }h2 { color: red; margin: 10px; font-family: h2 { color: red; margin: 10px; font-family: 华文新魏华文新魏 , , 楷楷体体 _GB2312_GB2312 } }


3.5.1 3.5.1 字体属性（字体属性（ Font PropertiesFont Properties ））

2. 2. 字号（字号（ font-sizefont-size ））语法：语法： font-size : font-size : 绝对尺寸绝对尺寸 | | 相对尺寸相对尺寸 | | 百分数百分数参数：绝对尺寸根据对象字体进行调节。可选参数：绝对尺寸根据对象字体进行调节。可选 xx-small | xx-small | x-small | small | medium | large | x-large | xx-largex-small | small | medium | large | x-large | xx-large 相对尺寸是相对于父对象中字体尺寸进行相对调节。相对尺寸是相对于父对象中字体尺寸进行相对调节。百分数取值是基于父对象中字体的尺寸。百分数取值是基于父对象中字体的尺寸。示例：所有包含在示例：所有包含在 <p><p> 中中 <b><b> 的文字的尺寸将是的文字的尺寸将是 30poin30pointsts ，因为，因为 <b><b> 中的字号是相对于中的字号是相对于 <p><p> 的字号（的字号（ 20pt20pt ）的）的 1.1.55倍。倍。p { font-size: 20pt }p { font-size: 20pt }b { font-size: 1.5em }b { font-size: 1.5em }h3 { font-size: 20px }h3 { font-size: 20px }



3. 3. 字体风格（字体风格（ font-stylefont-style ））语法：语法： font-style : italic | oblique | normalfont-style : italic | oblique | normal 参数：参数： italicitalic 为斜体。对于没有斜体变量的特殊字体，将应为斜体。对于没有斜体变量的特殊字体，将应用用 obliqueoblique 。。 normalnormal 为正常的字体，声明此值将取消之前为正常的字体，声明此值将取消之前设置。设置。说明：将文本字体设置为斜体。说明：将文本字体设置为斜体。示例：示例： h3 { font-style: italic } h3 { font-style: italic }



4. 4. 字重（字重（ font-weightfont-weight ））语法：语法： font-weight : bold | number | normalfont-weight : bold | number | normal 参数：参数： boldbold 为粗体，相当于为粗体，相当于 numbernumber 为为 700700，也相当于，也相当于bb 标记的作用。标记的作用。 numbernumber取值取值 100 | 200 | 300 | 400 | 500 | 6100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 90000 | 700 | 800 | 900。。 normalnormal 为正常的字体，相当于为正常的字体，相当于 numbnumberer 为为 400400，声明此值将取消之前设置。，声明此值将取消之前设置。说明：设置文本字体的粗细。作用由用户端系统安装的字体说明：设置文本字体的粗细。作用由用户端系统安装的字体的特定字体变量映射决定，系统选择最近的匹配。也就是说，的特定字体变量映射决定，系统选择最近的匹配。也就是说，用户可能看不到不同值之间的差异。用户可能看不到不同值之间的差异。示例：示例： P { font-weight: bold }P { font-weight: bold } h1 { font-weight:800 }h1 { font-weight:800 }



5. 5. 文字变形（文字变形（ text-transformtext-transform ））语法：语法： text-transform: uppercase | lowercase | capittext-transform: uppercase | lowercase | capitalize | nonealize | none 参数：参数： uppercaseuppercase 使所有字母大写显示，使所有字母大写显示， lowercaselowercase 使所使所有字母小写显示，有字母小写显示， capitalizecapitalize 使每个单词的第使每个单词的第 11 个字母大写个字母大写显示，显示， nonenone 使所有继承的文字变形参数被忽略，文字将以原使所有继承的文字变形参数被忽略，文字将以原来的形式显示。来的形式显示。说明：设置字母的大小写。说明：设置字母的大小写。示例：示例： h1 { text-transform: uppercase }h1 { text-transform: uppercase } b { text-transform: capitalize }b { text-transform: capitalize }



6. 6. 文字修饰（文字修饰（ text-decorationtext-decoration ））语法：语法： text-decoration : underline || blink || overline text-decoration : underline || blink || overline || line-through | none|| line-through | none 参数：参数： underlineunderline 为下划线，为下划线， blinkblink 为闪烁，为闪烁， overlineoverline 为为上划线，上划线， line-throughline-through 为贯穿线，为贯穿线， nonenone 为无装饰。为无装饰。说明：设置对象中文本的修饰。对象说明：设置对象中文本的修饰。对象 aa 、、 uu、、 insins 的文字的文字修饰默认值为修饰默认值为 underlineunderline 。对象。对象 strikestrike 、、 ss 、、 deldel 的默认值的默认值是是 line-throughline-through 。如果应用的对象不是文本，则此属性不起。如果应用的对象不是文本，则此属性不起作用。作用。示例：示例： div { text-decoration : underline overline; }div { text-decoration : underline overline; } h1 { text-decoration : underline; } h1 { text-decoration : underline; }



7. 7. 字体（字体（ fontfont ））语法：语法： font : font-style || font-variant || font-weight |font : font-style || font-variant || font-weight || font-size || line-height || font-family | font-size || line-height || font-family 参数：声明方式请参阅各参数对应的属性。参数：声明方式请参阅各参数对应的属性。说明：设置对象中的文本特性。本属性是复合属性。声明方说明：设置对象中的文本特性。本属性是复合属性。声明方式参数必须按照语法中的排列顺序。每个参数仅允许有一个值。式参数必须按照语法中的排列顺序。每个参数仅允许有一个值。忽略时将使用其参数对应的独立属性的默认值。忽略时将使用其参数对应的独立属性的默认值。示例：将示例：将 <li><li> 文字设置为尺寸文字设置为尺寸 12points12points ，行高度，行高度 16poin16pointsts ，字型采用宋体。使用字体属性时，必须设定字号和字型，，字型采用宋体。使用字体属性时，必须设定字号和字型，但可以选择是否设定行高度。设定的顺序必须严格按照语法中但可以选择是否设定行高度。设定的顺序必须严格按照语法中的顺序。的顺序。



1. 1. 字间距（字间距（ word-spacingword-spacing ））语法：语法： word-spacing : length | normalword-spacing : length | normal 参数：参数： lengthlength 是由数字和单位标识符组成的长度值，允许是由数字和单位标识符组成的长度值，允许为负值。为负值。 normalnormal恢复为默认间距。恢复为默认间距。说明：设置对象中的单词之间插入的空格数。说明：设置对象中的单词之间插入的空格数。示例：示例： h3 { word-spacing: 1em }h3 { word-spacing: 1em } div { word-spacing : 10px }div { word-spacing : 10px }


3.5.2 3.5.2 文本属性（文本属性（ Text PropertiesText Properties ））

2. 2. 字母间距（字母间距（ letter-spacingletter-spacing ））语法：语法： letter-spacing : length | normal letter-spacing : length | normal 参数：参数： lengthlength 是由数字和单位标识符组成的长度值，允许是由数字和单位标识符组成的长度值，允许为负值。为负值。 normalnormal恢复为默认间隔。恢复为默认间隔。说明：设置对象中的文字之间的间隔。该属性将指定的间隔说明：设置对象中的文字之间的间隔。该属性将指定的间隔添加到每个文字之后，但最后一个字将被排除在外。添加到每个文字之后，但最后一个字将被排除在外。示例：示例： div {letter-spacing:6px }div {letter-spacing:6px } div {letter-spacing:0.5pt }div {letter-spacing:0.5pt } h3 { letter-spacing: 10px }h3 { letter-spacing: 10px }



3. 3. 行高（行高（ line-heightline-height ））语法：语法： line-height : length | normalline-height : length | normal 参数：参数： lengthlength 为由百分比数字或由数字、单位标识符组成为由百分比数字或由数字、单位标识符组成的长度值，允许为负值。其百分比取值是基于字体的高度尺寸。的长度值，允许为负值。其百分比取值是基于字体的高度尺寸。normalnormal 为默认行高。为默认行高。示例：用数字设行距。数字设定行高的时候，浏览器将利用示例：用数字设行距。数字设定行高的时候，浏览器将利用字号来确定行距，它将字号乘以设定的参数值。所以，在本例字号来确定行距，它将字号乘以设定的参数值。所以，在本例中，行高将是中，行高将是 24points24points 。。 b { font-size: 12pt; line-height: 2 }b { font-size: 12pt; line-height: 2 } 用长度单位（用长度单位（ emem 及及 ptpt 是最常用的单位）设定行距，既可是最常用的单位）设定行距，既可以将行距缩小也可以将行距扩大。以将行距缩小也可以将行距扩大。 b { font-size: 12pt; line-height: 11pt }b { font-size: 12pt; line-height: 11pt }



4. 4. 文字对齐（文字对齐（ text-aligntext-align ））语法：语法： text-align : left | right | center | justify text-align : left | right | center | justify 参数：参数： leftleft 为左对齐，为左对齐， rightright 为右对齐，为右对齐， centercenter 为居中，为居中， jjustifyustify 为两端对齐。为两端对齐。说明：设置对象中文本的对齐方式。说明：设置对象中文本的对齐方式。示例：利用文字对齐属性，可以控制段落的水平对齐。本属示例：利用文字对齐属性，可以控制段落的水平对齐。本属性只用于整块的内容，如性只用于整块的内容，如 <p><p> 、、 <h1><h1>～～ <h6><h6> 、、 <blockqu<blockquote>ote> 和和 <ul><ul> 。。 h4 { text-align: center }h4 { text-align: center } div { text-align : center }div { text-align : center }



5. 5. 文字缩行（文字缩行（ text-indenttext-indent ））语法：语法： text-indent : lengthtext-indent : length 参数：参数： lengthlength 为百分比数字或由浮点数字、单位标识符组为百分比数字或由浮点数字、单位标识符组

成的长度值，允许为负值。成的长度值，允许为负值。说明：设置对象中的文本段落的缩进。本属性只应用于整块说明：设置对象中的文本段落的缩进。本属性只应用于整块

的内容。的内容。示例：示例：p { text-indent: 2em } /* p { text-indent: 2em } /* 本段第本段第 11 行的起始位置比其正常行的起始位置比其正常

位置缩进了位置缩进了 22 个字符个字符 */*/ div { text-indent : -5px; } div { text-indent : -5px; } div { text-indent : underline 10%; }div { text-indent : underline 10%; }



1. 1. 外延边距属性（外延边距属性（ Margins PropertiesMargins Properties ））外延边距也称为外补丁。外延边距设置属性有：外延边距也称为外补丁。外延边距设置属性有： margin-tmargin-topop 、、 margin-rightmargin-right 、、 margin-bottommargin-bottom 、、 margin-leftmargin-left ，，可分别设置，如图可分别设置，如图 3-113-11 所示。也可以用所示。也可以用 marginmargin 属性，一次属性，一次设置所有边距。设置所有边距。 (1) (1) 顶边的外延边距（顶边的外延边距（ margin-topmargin-top ））语法：语法： margin-top : length | automargin-top : length | auto 参数：参数： lengthlength 是由数字和单位标识符组成的长度值或者是由数字和单位标识符组成的长度值或者百分数，百分数是基于父对象的高度。百分数，百分数是基于父对象的高度。 autoauto 值被设置为对边值被设置为对边的值。说明：设置对象顶边的外延边距，外延边距始终透明。的值。说明：设置对象顶边的外延边距，外延边距始终透明。内联对象要使用该属性，必须先设定对象的内联对象要使用该属性，必须先设定对象的 heightheight 或或 widthwidth属性，或者设定属性，或者设定 positionposition 属性为属性为 absoluteabsolute 。。示例：示例： body { margin-top: 11.5% }body { margin-top: 11.5% }


3.5.3 3.5.3 控制控制 BOXBOX 的属性的属性

(2) (2) 右边的外延边距（右边的外延边距（ margin-rightmargin-right ））语法：语法： margin-right : length | automargin-right : length | auto 参数：同参数：同 margin-topmargin-top 。。说明：同说明：同 margin-topmargin-top 。。示例：示例： body { margin-right: 11.5%; }body { margin-right: 11.5%; } (3) (3) 底边的外延边距（底边的外延边距（ margin-bottommargin-bottom ））语法：语法： margin-bottom : length | automargin-bottom : length | auto 参数：同参数：同 margin-topmargin-top 。。说明：同说明：同 margin-topmargin-top 。。示例：示例： body { margin-bottom: 11.5%; }body { margin-bottom: 11.5%; }



(4) (4) 左边的外延边距（左边的外延边距（ margin-leftmargin-left ））语法：语法： margin-left : length | automargin-left : length | auto 参数：同参数：同 margin-topmargin-top 。。说明：同说明：同 margin-topmargin-top 。。示例：示例：body { margin-left: 11.5%; }body { margin-left: 11.5%; } 以上以上 44项属性可以控制一个要素的四周的边距，每一个边项属性可以控制一个要素的四周的边距，每一个边距都可以有不同的置。或者设置一个边距，然后让浏览器用缺距都可以有不同的置。或者设置一个边距，然后让浏览器用缺省设置设定其他几个边距。可以将边距应用于文字和其他对象。省设置设定其他几个边距。可以将边距应用于文字和其他对象。例如：例如： h4 { margin-top: 20px; margin-bottom: 5px; margin-lh4 { margin-top: 20px; margin-bottom: 5px; margin-left: 100px; margin-right: 55px }eft: 100px; margin-right: 55px }



(5) (5) 外延边距（外延边距（ marginmargin ））语法：语法： margin : length | automargin : length | auto 参数：参数： lengthlength 是由数字和单位标识符组成的长度值或百分是由数字和单位标识符组成的长度值或百分数，百分数是基于父对象的高度；对于内联对象来说，左右外数，百分数是基于父对象的高度；对于内联对象来说，左右外延边距可以是负数值。延边距可以是负数值。 autoauto 值被设置为对边的值。值被设置为对边的值。说明：设置对象四边的外延边距，如图说明：设置对象四边的外延边距，如图 3-103-10，位于，位于 BOXBOX模型的最外层，包括四项属性：模型的最外层，包括四项属性： margin-topmargin-top （顶边的外延边（顶边的外延边距）、距）、 margin-rightmargin-right （右边的外延边距）、（右边的外延边距）、 margin-bottomargin-bottomm （底边的外延边距）、（底边的外延边距）、 margin-leftmargin-left （左边的外延边距）。（左边的外延边距）。如图如图 3-113-11 所示。外延边距始终是透明的。所示。外延边距始终是透明的。示例：示例： body { margin: 36pt 24pt 36pt } body { margin: 36pt 24pt 36pt } body { margin: 11.5% } body { margin: 11.5% } body { margin: 10% 10% 10% 10% }body { margin: 10% 10% 10% 10% }



2. 2. 边框属性（边框属性（ Borders PropertiesBorders Properties ）） (1) (1) 所有边框宽度（所有边框宽度（ border-widthborder-width ））语法：语法： border-width : medium | thin | thick | length border-width : medium | thin | thick | length 参数：参数： mediummedium 为默认宽度，为默认宽度， thinthin 为小于默认宽度，为小于默认宽度， thicthickk 为大于默认宽度。为大于默认宽度。 lengthlength由数字和单位标识符组成的长度由数字和单位标识符组成的长度值，不可为负值。值，不可为负值。示例：示例： span { border-style: solid; border-width: thin } span { border-style: solid; border-width: thin } span { border-style: solid; border-width: 1px thin }span { border-style: solid; border-width: 1px thin }



(2) (2) 边框样式（边框样式（ border-styleborder-style ））语法：语法： border-style : none | hidden | dotted | dashed border-style : none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset| solid | double | groove | ridge | inset | outset 说明：如果提供全部四个参数值，将按上、右、下、左的说明：如果提供全部四个参数值，将按上、右、下、左的顺序作用于四个边框。如果只提供一个，将用于全部的四条边。顺序作用于四个边框。如果只提供一个，将用于全部的四条边。如果提供两个，第一个用于上、下，第二个用于左、右。如果如果提供两个，第一个用于上、下，第二个用于左、右。如果提供三个，第一个用于上，第二个用于左、右，第三个用于下。提供三个，第一个用于上，第二个用于左、右，第三个用于下。示例：示例： body { border-style: double groove } body { border-style: double groove } body { border-style: double groove dashed }body { border-style: double groove dashed } p { border-style: double; border-width: 3px }p { border-style: double; border-width: 3px }



(3) (3) 边框色彩（边框色彩（ border-colorborder-color ））语法：语法： border-color : colorborder-color : color 参数：参数： colorcolor 指定色彩。指定色彩。说明：要使用该属性，必须先设定对象的说明：要使用该属性，必须先设定对象的 heightheight 或或 widthwidth属性，或者设定属性，或者设定 positionposition 属性为属性为 absoluteabsolute 。如果。如果 border-border-widthwidth 等于等于 00或或 border-styleborder-style 设置为设置为 nonenone ，本属性失去作，本属性失去作用用示例：示例：body { border-color: silver red }body { border-color: silver red }body { border-color: silver red rgb(223, 94, 77) }body { border-color: silver red rgb(223, 94, 77) }h4 { border-color: #ff0033; border-width: thick }h4 { border-color: #ff0033; border-width: thick }p { border-color: green; border-width: 3px }p { border-color: green; border-width: 3px }p { border-color: #666699 #ff0033 #000000 #ffff99; bordp { border-color: #666699 #ff0033 #000000 #ffff99; border-width: 3px }er-width: 3px }



(4) (4) 顶边框宽度（顶边框宽度（ border-topborder-top ））语法：语法： border-top : border-width || border-style || borborder-top : border-width || border-style || border-color der-color 参数：该属性是复合属性。请参阅各参数对应的属性。参数：该属性是复合属性。请参阅各参数对应的属性。说明：请参阅说明：请参阅 border-widthborder-width 属性。属性。示例：示例： div { border-bottom: 25px solid red; border-left: 25px div { border-bottom: 25px solid red; border-left: 25px solid yellow; border-right: 25px solid blue; border-top: solid yellow; border-right: 25px solid blue; border-top: 25px solid green }25px solid green }



(5) (5) 右边框宽度（右边框宽度（ border-rightborder-right ））语法：语法： border-right : border-width || border-style || border-right : border-width || border-style || border-colorborder-color 参数：该属性是复合属性。请参阅各参数对应的属性。参数：该属性是复合属性。请参阅各参数对应的属性。说明：请参阅说明：请参阅 border-widthborder-width 属性。属性。 (6) (6) 底边框宽度（底边框宽度（ border-bottomborder-bottom ））语法：语法： border-bottom : border-width || border-style border-bottom : border-width || border-style || border-color || border-color 参数：该属性是复合属性。请参阅各参数对应的属性。参数：该属性是复合属性。请参阅各参数对应的属性。说明：请参阅说明：请参阅 border-widthborder-width 属性。属性。



(7) (7) 左边框宽度（左边框宽度（ border-leftborder-left ））语法：语法： border-left : border-width || border-style || bborder-left : border-width || border-style || border-color order-color 参数：该属性是复合属性。请参阅各参数对应的属性。参数：该属性是复合属性。请参阅各参数对应的属性。说明：请参阅说明：请参阅 border-widthborder-width 属性。属性。示例：示例：h4{border-top-width: 2px; border-bottom-width: 5px; h4{border-top-width: 2px; border-bottom-width: 5px; border-left-width: 1px; border-right-width: 1px}border-left-width: 1px; border-right-width: 1px}



33 ．对象间隙（．对象间隙（ Paddings PropertiesPaddings Properties ））对象间隙也称内补丁，位于对象边框和对象之间，包括了对象间隙也称内补丁，位于对象边框和对象之间，包括了四项属性：四项属性： padding-toppadding-top （顶部间隙）、（顶部间隙）、 padding-rightpadding-right（右边间隙）、（右边间隙）、 padding-bottompadding-bottom （底部间隙）、（底部间隙）、 paddinpadding-leftg-left （左边间隙）。不允许负值。与（左边间隙）。不允许负值。与 marginmargin 类似，类似， paddipaddingng 也可以用也可以用 paddingpadding 一次性设置所有的对象间隙，格式也和一次性设置所有的对象间隙，格式也和marginmargin 相似，不再一一列举了。相似，不再一一列举了。

【例3-13】



1. 1. 浮动（浮动（ floatfloat ））语法： float : none | left |right 参数： none 为对象不浮动， left 为对象浮在左边， right为对象浮在右边。说明：该属性的值指出了对象是否及如何浮动。请参阅 clear 属性。浮动属性能将一个对象周围用文字包裹，不仅能包裹图像、表格，还能包裹整块的文字。示例： div { clear : left } img { float: right }


3.5.4 3.5.4 布局属性（布局属性（ Layout PropertiesLayout Properties ））

2. 2. 清除（清除（ clearclear ））语法：语法： clear : none | left |right | both clear : none | left |right | both 参数：参数： nonenone 允许两边都可以有浮动对象，允许两边都可以有浮动对象， bothboth 不允许有不允许有浮动对象，浮动对象， leftleft 不允许左边有浮动对象，不允许左边有浮动对象， rightright 不允许右边有不允许右边有浮动对象。浮动对象。说明：该属性的值指出了不允许有浮动对象的边。请参阅说明：该属性的值指出了不允许有浮动对象的边。请参阅 flfloatoat 属性。属性。示例：如果想使一段文字包裹某一对象，而下一段文字不包示例：如果想使一段文字包裹某一对象，而下一段文字不包裹，可以使用裹，可以使用 clearclear 属性。属性。 p { clear: left }p { clear: left }


3.5.4 3.5.4 布局属性（布局属性（ Layout PropertiesLayout Properties ））

1. 1. 色彩（色彩（ colorcolor ））语法：语法： color : colorcolor : color 参数：参数： colorcolor 指定颜色。请参阅颜色单位。指定颜色。请参阅颜色单位。说明：设置对象的文本颜色，即设定对象的前景颜色。用颜说明：设置对象的文本颜色，即设定对象的前景颜色。用颜色名称指定色名称指定 colorcolor 不被一些浏览器接受。不被一些浏览器接受。示例：示例： div {color: #345456 }div {color: #345456 } div { color: rgb(100,14,200) }div { color: rgb(100,14,200) } div {color: menu }div {color: menu } div {color: red }div {color: red } b { color: #333399 } /* b { color: #333399 } /* 将所有的加重字以设定的颜色显示将所有的加重字以设定的颜色显示 */*/ b { color: rgb(51,204,0) }b { color: rgb(51,204,0) }


3.5.5 3.5.5 背景属性（背景属性（ Background PropertieBackground Propertiess ））

2. 2. 背景色（背景色（ background-colorbackground-color ））语法：语法： background-color : color | transparentbackground-color : color | transparent 参数：参数： colorcolor 指定颜色，请参阅颜色单位。指定颜色，请参阅颜色单位。 transparenttransparent使背景色透明。使背景色透明。说明：设置对象的背景颜色，即设定对象后面固定的颜色。说明：设置对象的背景颜色，即设定对象后面固定的颜色。示例：示例： p { background-color: silver }p { background-color: silver } div { background-color: rgb(223,71,177) }div { background-color: rgb(223,71,177) } body { background-color: #98ab6f }body { background-color: #98ab6f } pre { background-color: transparent }pre { background-color: transparent } p.yellow { background-color: #ffff66 }p.yellow { background-color: #ffff66 }



3. 背景图像（ background-image ）语法：语法： background-image : url(url) | nonebackground-image : url(url) | none 参数：参数： urlurl 为使用绝对或相对地址指定背景图像的地址。为使用绝对或相对地址指定背景图像的地址。 nnoneone 无背景图。无背景图。说明：设置对象的背景图像。若把图像添加到整个浏览器窗说明：设置对象的背景图像。若把图像添加到整个浏览器窗口，可以将其添加到口，可以将其添加到 <body><body> 标记。标记。示例：示例： code { background-image: url("comet.jpg") }code { background-image: url("comet.jpg") } blockquote { background-image: url("c:\InetPub\Mblockquote { background-image: url("c:\InetPub\MyPixs\comet.jpg") }yPixs\comet.jpg") } br { background-image: url(http://Fred.com/ImageFilbr { background-image: url(http://Fred.com/ImageFile/q.gif) }e/q.gif) } body { background-image: none }body { background-image: none } b { background-image: url(background.gif) } b { background-image: url(background.gif) }



4. 控制背景图象的属性 (1) 背景重复（ background-repeat ）语法：语法： background-repeat : repeat | no-repeat | repbackground-repeat : repeat | no-repeat | repeat-x | repeat-yeat-x | repeat-y 参数：参数： repeatrepeat 为背景图像在纵向和横向上平铺，为背景图像在纵向和横向上平铺， no-repeno-repeatat 为背景图像不平铺，为背景图像不平铺， repeat-xrepeat-x 为背景图像在横向上平铺，为背景图像在横向上平铺，repeat-yrepeat-y 为背景图像在纵向平铺。为背景图像在纵向平铺。说明：设置对象的背景图像是否及如何铺排。必须先指定对说明：设置对象的背景图像是否及如何铺排。必须先指定对象的背景图像。象的背景图像。示例：示例： p { background: url("images/aardvark.gif"); backgrop { background: url("images/aardvark.gif"); background-repeat: no-repeat } und-repeat: no-repeat } menu { background: url("images/aardvark.gif"); bacmenu { background: url("images/aardvark.gif"); background-repeat: repeat-y; } kground-repeat: repeat-y; }



(2) 固定背景（ background-attachment ）语法：语法： background-attachment : scroll | fixed background-attachment : scroll | fixed 参数：参数： scrollscroll 使背景图像随对象内容滚动，使背景图像随对象内容滚动， fixedfixed 使文字使文字滚动时背景图像保持固定。滚动时背景图像保持固定。说明：设置背景图像是随对象内容滚动还是固定的。该属性说明：设置背景图像是随对象内容滚动还是固定的。该属性只用于页面背景，即只用于页面背景，即 <BODY><BODY> 标签内设定的背景图像。标签内设定的背景图像。示例：示例： body { background-attachment: fixed; background-ibody { background-attachment: fixed; background-image: url(background.gif) }mage: url(background.gif) } html { background-image: url("anasazi.tif"); backgrohtml { background-image: url("anasazi.tif"); background-attachment: fixed; } und-attachment: fixed; }



(3) 背景定位（ background-position ）语法：语法： background-position : length || lengthbackground-position : length || length background-position : position || position background-position : position || position 参数：参数： lengthlength 为百分数或者由数字和单位标识符组成的长为百分数或者由数字和单位标识符组成的长度值。度值。 positionposition 可取可取 top | center | bottom | left | center | rightop | center | bottom | left | center | rightt 说明：设置对象的背景图像位置，即精确控制背景图像相说明：设置对象的背景图像位置，即精确控制背景图像相对于对象的显示位置。必须先指定对于对象的显示位置。必须先指定 background-imagebackground-image 属性。属性。默认值为：默认值为： (0% 0%)(0% 0%) 。如果只指定了一个值，该值将用于横。如果只指定了一个值，该值将用于横坐标。纵坐标将默认为坐标。纵坐标将默认为 50%50%。第二个值将用于纵坐标。该属。第二个值将用于纵坐标。该属性定位不受对象的补丁属性性定位不受对象的补丁属性 (padding)(padding)设置影响。设置影响。



5. 背景（ background ）背景属性是设定所有有关背景设置的属性的快捷方式，利背景属性是设定所有有关背景设置的属性的快捷方式，利用快捷特性可以将前面的所有背景属性加到一个用快捷特性可以将前面的所有背景属性加到一个 CSSCSS规则中。规则中。利用背景属性，可以设定背景颜色、图象、平铺方法、固定及利用背景属性，可以设定背景颜色、图象、平铺方法、固定及滚动显示及定位。滚动显示及定位。语法：语法： background : background-color || backgrounbackground : background-color || background-image || background-repeat || background-attachmed-image || background-repeat || background-attachment || background-position nt || background-position 参数：该属性是复合属性。请参阅各参数对应的属性。参数：该属性是复合属性。请参阅各参数对应的属性。说明：如使用该复合属性定义其单个参数，则其他参数的默说明：如使用该复合属性定义其单个参数，则其他参数的默认值将无条件覆盖各自对应的单个属性设置。默认值为：认值将无条件覆盖各自对应的单个属性设置。默认值为： tratransparent none repeat scroll 0% 0% nsparent none repeat scroll 0% 0% 。。



1. 定位方式（ position ）语法：语法： position : static | absolute | relative position : static | absolute | relative 参数：参数： staticstatic 为无特殊定位，对象遵循为无特殊定位，对象遵循 HTMLHTML 定位规则。定位规则。 absoluteabsolute 将对象从文档流中拖出，使用将对象从文档流中拖出，使用 leftleft ，， rightright ，， totopp ，， bottombottom 等属性进行绝对定位。而其层叠通过等属性进行绝对定位。而其层叠通过 z-indexz-index 属属性定义。此时对象不具有外补丁（性定义。此时对象不具有外补丁（ marginmargin ），但仍有内补丁），但仍有内补丁（（ paddingpadding ）和边框（）和边框（ borderborder ）。）。 relativerelative 对象不可层叠，但将依据对象不可层叠，但将依据 leftleft ，， rightright ，， toptop ，， bbottomottom 等属性在正常文档流中偏移位置。等属性在正常文档流中偏移位置。说明：设置对象的定位方式。说明：设置对象的定位方式。


3.5.6 3.5.6 定位属性（定位属性（ Positioning PropertiePositioning Propertiess ））

2. 左、右、上、下位置语法：语法： left : auto | length left : auto | length right : auto | lengthright : auto | length top : auto | lengthtop : auto | length bottom : auto | lengthbottom : auto | length 参数：参数： autoauto 无特殊定位，根据无特殊定位，根据 HTMLHTML 定位规则载文档流定位规则载文档流中分配。中分配。 lengthlength 是由数字和单位标识符组成的长度值或百分数。必是由数字和单位标识符组成的长度值或百分数。必须定义须定义 positionposition 属性值为属性值为 absoluteabsolute 或者或者 relativerelative此取值方此取值方可生效。可生效。示例：示例： div { position: absolute; left: 1in }div { position: absolute; left: 1in } div { position:relative; top:-3px; right:6px; } div { position:relative; top:-3px; right:6px; } div { position: absolute; bottom: 1in; } div { position: absolute; bottom: 1in; }



3. 宽度（ width ）语法：语法： width : auto | length width : auto | length 参数：参数： autoauto 无特殊定位，根据无特殊定位，根据 HTMLHTML 定位规则载文档流定位规则载文档流中分配。中分配。 lengthlength 是由数字和单位标识符组成的长度值，或者是由数字和单位标识符组成的长度值，或者百分数。百分数是基于父对象的宽度。不可为负数。百分数。百分数是基于父对象的宽度。不可为负数。说明：设置对象的宽度。对于说明：设置对象的宽度。对于 imgimg 对象来说，仅指定此属对象来说，仅指定此属性，其性，其 heightheight 值将根据图片源尺寸等比例缩放。值将根据图片源尺寸等比例缩放。示例：示例： div { width: 1in; }div { width: 1in; } div { position:absolute; top:-3px; width:6px; } div { position:absolute; top:-3px; width:6px; } div { position: absolute; left: 200px; top: 40px; width: div { position: absolute; left: 200px; top: 40px; width: 150px } 150px }



4. 高度（ height ）语法：语法： height : auto | length height : auto | length 参数：同宽度（参数：同宽度（ widthwidth ）。）。说明：设置对象的高度。对于说明：设置对象的高度。对于 imgimg 对象来说，仅指定此属对象来说，仅指定此属性，其性，其 widthwidth 值将根据图片源尺寸等比例缩放。值将根据图片源尺寸等比例缩放。示例：示例： div { height: 1in; }div { height: 1in; } div { position:absolute; top:-3px; height:6px; } div { position:absolute; top:-3px; height:6px; } div{position:absolute;left:200px;top:40px;height:150pdiv{position:absolute;left:200px;top:40px;height:150px}x}



5. 可视性（ visibility ）语法：语法： visibility : inherit | visible | collapse | hidden visibility : inherit | visible | collapse | hidden 参数：参数： inheritinherit继承上一个父对象的可见性。继承上一个父对象的可见性。 visiblevisible 使对使对象可以被看见，如果希望对象为可视，其父对象也必须是可视象可以被看见，如果希望对象为可视，其父对象也必须是可视的。的。 hiddenhidden 是对象被隐藏。是对象被隐藏。 collapsecollapse 主要用来隐藏表格的主要用来隐藏表格的行或列，隐藏的行或列能够被其他内容使用，对于表格外的其行或列，隐藏的行或列能够被其他内容使用，对于表格外的其他对象，其作用等同于他对象，其作用等同于 hiddenhidden 。。说明：设置是否显示对象。与说明：设置是否显示对象。与 displaydisplay 属性不同，此属性属性不同，此属性为隐藏的对象保留其占据的物理空间，即当一个对象被隐藏后，为隐藏的对象保留其占据的物理空间，即当一个对象被隐藏后，它仍然要占据浏览器窗口中的原有空间。它仍然要占据浏览器窗口中的原有空间。示例：示例： img { visibility: inherit; float: right; }img { visibility: inherit; float: right; } h4 { visibility: hidden } h4 { visibility: hidden }



6. 层叠顺序 z-index 语法：语法： z-index : auto | numberz-index : auto | number 参数：参数： autoauto遵从其父对象的定位。遵从其父对象的定位。 numbernumber 为无单位的为无单位的整数值，可为负数。整数值，可为负数。定位多个要素并将其重叠时，可以使用定位多个要素并将其重叠时，可以使用 z-indexz-index 来设定哪来设定哪一个要素应出现在最上层。由于一个要素应出现在最上层。由于 <h2><h2> 文字的文字的 z-indexz-index参数值参数值更高，所以它显示在更高，所以它显示在 <h1><h1> 文字的上面。文字的上面。 h2{ position: relative; left: 10px; top: 0px; z-index: 1h2{ position: relative; left: 10px; top: 0px; z-index: 10}0} h1{ position: relative; left: 33px; top: -35px; z-index: h1{ position: relative; left: 33px; top: -35px; z-index: 1}1} div { position:absolute; z-index:3; width:6px } div { position:absolute; z-index:3; width:6px }



语法：语法：a : link { sRules }a : link { sRules } 设置设置 aa 对象在未被访问前的样式表属性。对象在未被访问前的样式表属性。a : hover { sRules } a : hover { sRules } 设置设置 aa 对象在鼠标悬停时的样式表对象在鼠标悬停时的样式表属性。属性。a : active { sRules }a : active { sRules }设置设置 aa 对象在被用户激活（在鼠标点击与对象在被用户激活（在鼠标点击与释放之间发生的事件）时的样式表属性。释放之间发生的事件）时的样式表属性。a : visited { sRules }a : visited { sRules } 设置设置 aa 对象在链接地址已被访问过对象在链接地址已被访问过时的样式表属性。时的样式表属性。

【例3-14】


3.5.7 3.5.7 定位锚伪类定位锚伪类

3.1 CSS 简介 3.2 在网页中插入样式表的方法及定义 3.3 多重样式表的层叠...

Documents

Transcript of 3.1 CSS 简介 3.2 在网页中插入样式表的方法及定义 3.3 多重样式表的层叠...