第03章CSS样式控制

1、第第3章章 CSS样式控制样式控制2021年11月25日星期四2Ch3 CSS样式控制样式控制3.1 基本概念基本概念3.2 CSS选择器选择器3.3 CSS的盒模型的盒模型3.4 定位与布局控制定位与布局控制3.5 边框控制边框控制3.6 字体和文本控制字体和文本控制3.7 背景控制背景控制2021年11月25日星期四33.1 基本概念基本概念lCSS的定义与作用的定义与作用CSS是是Cascading Style Sheets的缩写，称为级联样式表，也的缩写，称为级联样式表，也叫层叠式样式表。叫层叠式样式表。CSS的作用是控制的作用是控制HTML元素在浏览器中呈现的样式，比如字体元素在浏览

2、器中呈现的样式，比如字体大小、颜色、背景色以及背景图像等。大小、颜色、背景色以及背景图像等。l CSS的级联控制的级联控制内联式（内联式（Inline Styles） 嵌入式（嵌入式（Embedding a Style Block）外部链接式（外部链接式（Linking to a Style Sheet） 3.1.1 CSS的级联控制的级联控制内联式内联式l内联式是指直接在内联式是指直接在HTML元素内通过元素内通过style属性设置元素的样式属性设置元素的样式每个每个style内可以包含一个或多个样式属性，其一般形式为：内可以包含一个或多个样式属性，其一般形式为：ustyle=属性名属性名1

3、: 值值1; 属性名属性名2: 值值2; “属性名与属性值之间用冒号属性名与属性值之间用冒号“:”分隔，如果一个样式中有多个属性，各分隔，如果一个样式中有多个属性，各属性之间用分号属性之间用分号“;”隔开。隔开。 u例如：例如：定义了带样式的层定义了带样式的层l内联式适用于单独控制某个元素样式的情况。内联式适用于单独控制某个元素样式的情况。优点是设置样式直观、方便优点是设置样式直观、方便 ；缺点是无法一次性设置所有相同元素的样式缺点是无法一次性设置所有相同元素的样式 。l一般情况下，如果某个元素的样式与其他元素的样式不同，或者具有相同样一般情况下，如果某个元素的样式与其他元素的样式不同，或者具

4、有相同样式的元素比较少，可以采用内联式。式的元素比较少，可以采用内联式。 3.1.1 CSS的级联控制的级联控制嵌入式嵌入式 l嵌入式是指在嵌入式是指在与与之间定义的样式。之间定义的样式。例如：例如： h1 font-size:30pt; color:Red; h2 font-size:20pt; color:Blue; l嵌入式适用于控制一个网页内具有相同样式的多个元素。嵌入式适用于控制一个网页内具有相同样式的多个元素。 优点：当修改某些元素的样式时，只需要修改优点：当修改某些元素的样式时，只需要修改head部分部分style的的属性。属性。缺点：这种方式仅仅适用于修改当前网页内具有相同样式

5、的元素缺点：这种方式仅仅适用于修改当前网页内具有相同样式的元素，如果多个网页内的很多元素均采用相同的样式，仍然需要分别，如果多个网页内的很多元素均采用相同的样式，仍然需要分别在各个网页内重复定义。在各个网页内重复定义。3.1.1 CSS的级联控制的级联控制外部链接式外部链接式 l外部链接式是指在扩展名为外部链接式是指在扩展名为.css的文件中单独保存样式的定义。的文件中单独保存样式的定义。将样式分类后放在单独的将样式分类后放在单独的CSS文件中，然后在网页中添加所引用的文件中，然后在网页中添加所引用的CSS文件文件 。当需要修改元素的样式时，只需要修改当需要修改元素的样式时，只需要修改.css

6、文件中的样式即可。文件中的样式即可。 一旦修改了一旦修改了.css文件中的某个样式，则凡是引用了该文件中的某个样式，则凡是引用了该.css文件的网文件的网页，都会自动应用新的样式。页，都会自动应用新的样式。CSS文件中每个样式定义的一般格式为文件中每个样式定义的一般格式为 ：选择符：选择符 属性属性1:值值1; 属属性性2:值值2; l引用方式：直接拖放引用方式：直接拖放CSS文件到要引用样式表的文件。文件到要引用样式表的文件。3.1.1 CSS的级联控制的级联控制级联控制级联控制l如果某个元素既使用了外部链接式，又使用了嵌入式，同时也如果某个元素既使用了外部链接式，又使用了嵌入式，同时也定义

7、了内联式，而这些样式的定义又发生了冲突，元素最终呈定义了内联式，而这些样式的定义又发生了冲突，元素最终呈现的效果会是什么呢？现的效果会是什么呢？l实际上浏览器会按照文档解析的顺序，依次应用样式。实际上浏览器会按照文档解析的顺序，依次应用样式。 3.1.2 CSS的单位表示形式的单位表示形式l1.长度单位长度单位lCSS的长度单位分为绝对长度单位和相对长度单位两种。的长度单位分为绝对长度单位和相对长度单位两种。l绝对长度单位有绝对长度单位有px（像素）、（像素）、cm（厘米）、（厘米）、mm（毫米）、（毫米）、in（英寸）、（英寸）、pt（点，（点，1pt=1/72英寸）、英寸）、pc（1pc=

8、12点）。点）。一般来说，使用一般来说，使用“px”以及以及“%”作为长度单位的网页比较多。作为长度单位的网页比较多。l相对长度单位常用有两种，一种是（百分比）；相对长度单位常用有两种，一种是（百分比）；例如例如50%，另一种是，另一种是em，例如，例如0.1em。em指相对于父元素的字体大小比例，指相对于父元素的字体大小比例， 一般用来表示一行文字的一般用来表示一行文字的高度。高度。 控制字间距和行间距时，多数情况下都是使用控制字间距和行间距时，多数情况下都是使用“em”作为长度单作为长度单位。位。3.1.2 CSS的单位表示形式的单位表示形式l2.颜色单位颜色单位lCSS 3.0中，有中，

9、有HEX、RGB、RGBA、HSL、HSLA以及以及transparent等颜色表示形式。等颜色表示形式。 HEX：使用两位十六进制数表示：使用两位十六进制数表示RGB颜色，每个颜色通道的取值颜色，每个颜色通道的取值范围均为范围均为00-FF ； u例如例如“#3B04C5” RGB ：使用十进制数表示颜色，格式为：使用十进制数表示颜色，格式为rgb(R, G, B)，其中，其中R、G、B三个值都是三个值都是0255的整数或者范围为的整数或者范围为0%-100%的百分数。的百分数。u.foregroundcolor:rgb(255,0,0); RGBA ：格式为：格式为rgba(R，G，B，A

10、)。它和。它和rgb(R,G,B)的区别是的区别是多了一个多了一个alpha通道（即透明度）；通道（即透明度）； ubackground-color:rgba(255,0,0,0.5);3.1.2 CSS的单位表示形式的单位表示形式l2. 颜色单位颜色单位HSL ：使用：使用CSS 3.0支持的色调（支持的色调（Hue）、饱和度（）、饱和度（Saturation）和亮）和亮度（度（Lightness）来表示颜色，格式为）来表示颜色，格式为HSL(H,S,L) 。ubackground-color:hsl(0,100%,50%);HSLA ：前三个值的含义与：前三个值的含义与HSL相同，最后一个

11、相同，最后一个A表示透明度（表示透明度（Alpha），取值为），取值为0-1之间之间 。ubackground-color:hsla(0,100%,50%,0.5);transparent ：transparent是全透明黑色（是全透明黑色（black）的速记法，即一个）的速记法，即一个类似类似rgba(0,0,0,0)这样的值。这样的值。u在在CSS 3.0中，中，transparent被延伸到任何一个有被延伸到任何一个有color值的属性上。例如：值的属性上。例如：u.testcolor:transparent;border:1px solid transparent;background

12、:transparent;3.1.2 CSS的单位表示形式的单位表示形式l3、角度、时间和频率单位、角度、时间和频率单位lCSS 3.0新增了表示各种角度变换的单位，这些单位有新增了表示各种角度变换的单位，这些单位有deg（度）、度）、rad（弧度）、（弧度）、turn（旋转圈数）、（旋转圈数）、grad（梯度，一圈（梯度，一圈为为400grad） 。“30deg”表示顺时针旋转表示顺时针旋转30度，度，“-30deg”表示逆时针旋转表示逆时针旋转30度度 l时间单位主要用于控制动画显示，表示时间的单位有时间单位主要用于控制动画显示，表示时间的单位有ms（毫（毫秒）、秒）、s（秒）（秒） 。l

13、频率主要用于表示语音阅读文本的音调。频率越小音调越低，频率主要用于表示语音阅读文本的音调。频率越小音调越低，频率越大音调越高。表示频率的单位有频率越大音调越高。表示频率的单位有Hz（赫兹）、（赫兹）、kHz（千（千赫）等。赫）等。 3.1.3 设计和引用CSSl1. 利用辅助窗口使用利用辅助窗口使用CSSl利用可视化辅助窗口设置利用可视化辅助窗口设置CSS样式的最简单的办法是先利用拖样式的最简单的办法是先利用拖放方式，将网页开发界面变为如图放方式，将网页开发界面变为如图3-1所示的形式。所示的形式。 l【应用样式应用样式】、【管理样式管理样式】以及以及【CSS属性属性】窗口如图窗口如图3-2所

14、示。所示。 图3-1 主菜单【视图】下的子菜单项图3-2 CSS辅助设计窗口3.1.3 设计和引用CSSl1. 利用辅助窗口使用利用辅助窗口使用CSS利用利用【属性属性】窗口的窗口的“style”设置标记的设置标记的CSS样式样式联合使用联合使用【管理样式管理样式】、【应用样式应用样式】和和【CSS属性属性】窗口设置窗口设置CSS样式；样式；l2. 直接编辑直接编辑CSS代码设置代码设置CSS【例例3-1】演示演示CSS样式的基本用法。样式的基本用法。运行效果：运行效果：3.2 CSS选择器lCSS选择器是指网页中元素的样式定义规则，也称为选择器是指网页中元素的样式定义规则，也称为CSS样式样

15、式规则。规则。 一般格式为：选择器一般格式为：选择器属性属性1:值值1; 属性属性2:值值2; 格式中的格式中的“选择器选择器”用来指定样式定义的符号。用来指定样式定义的符号。u例如：例如：h1 color:red; font-size:14px; lCSS 3.0提供的选择器分为基本选择器、关系选择器、特性选提供的选择器分为基本选择器、关系选择器、特性选择器、伪元素选择器以及伪类选择器等。择器、伪元素选择器以及伪类选择器等。3.2.1 基本选择器l基本选择器是基本选择器是CSS中最常用的选择器，包括通配符选择器、元中最常用的选择器，包括通配符选择器、元素选择器、类选择器、素选择器、类选择器、

16、id选择器以及群组选择器等。如表选择器以及群组选择器等。如表3-1所所示。示。 3.2.1 基本选择器l1.通配符选择器（通配符选择器（*）通配符选择器是指选择通配符选择器是指选择HTML文档内的所有元素。文档内的所有元素。u例如：例如：*color:Red; u这行代码的含义是设置这行代码的含义是设置HTML文档中的所有元素颜色为红色。文档中的所有元素颜色为红色。l2.元素选择器（元素选择器（E） 元素选择器是指以元素选择器是指以HTML文档的元素名作为选择器，此处的文档的元素名作为选择器，此处的E表表示任何一个示任何一个HTML元素，如元素，如html、body、p、div等。等。 u例如

17、：例如：p font-size: 14px;u这行代码表示所有这行代码表示所有p元素的字体大小全部为元素的字体大小全部为14像素。像素。3.2.1 基本选择器l3.类选择器（类选择器（.classname、E.classname） l类选择器指自定义的类选择器指自定义的CSS类。类。一般形式为：一般形式为：.自定义类名自定义类名属性属性1:值值1; 属性属性2:值值2; l注意，自定义类名的左边有一个点注意，自定义类名的左边有一个点“.”。 l在在HTML文档中，使用文档中，使用class=“classname”设置设置“.classname”定义的样式定义的样式 。引用时自定义类名的左边不包

18、含。引用时自定义类名的左边不包含点点“.”。l类选择器还可以结合元素选择器来使用，类选择器还可以结合元素选择器来使用，一般形式为：一般形式为：E.类名类名属性属性1:值值1; 属性属性2:值值2; 其中，其中，E表示元素名（表示元素名（Element），），myclass指自定义类名。指自定义类名。 3.2.1 基本选择器l4. id选择器（选择器（#idname） lid选择器的定义和用法与类选择器的定义和用法从形式上来看选择器的定义和用法与类选择器的定义和用法从形式上来看非常相似，但是这两者之间在概念上有明显的区别，在同一个非常相似，但是这两者之间在概念上有明显的区别，在同一个HTML网页

19、中，多个元素可以使用同一个自定义类，但不能有网页中，多个元素可以使用同一个自定义类，但不能有相同的相同的id特性名。特性名。例如在例如在CCS中定义：中定义：#customId1 color:red在在HTML文档中，用文档中，用id=“myid”设置设置id选择器定义的样式（不包选择器定义的样式（不包含含“#”前缀）。前缀）。 l利用利用CSS定义样式时，如果在一个元素的样式定义中，既有定义样式时，如果在一个元素的样式定义中，既有HTML元素，又有自定义类和自定义元素，又有自定义类和自定义ID，则自定义，则自定义ID的优先级的优先级最高，其次是自定义类，最高，其次是自定义类，HTML元素的优

20、先级最低。元素的优先级最低。 3.2.1 基本选择器l5.群组选择器（群组选择器（s1,s2,.,sN）l如果有多个选择器定义的样式相同，则可以使用群组选择器来如果有多个选择器定义的样式相同，则可以使用群组选择器来简化定义，这样就可以一次性地设置所选元素的样式。简化定义，这样就可以一次性地设置所选元素的样式。 例如：例如：div1, div2, div3 color:redl【例例3-2】演示基本选择器的用法。演示基本选择器的用法。该例子的完整源程序见该例子的完整源程序见S02文件夹下的文件夹下的BasicSelector.css和和BasicSelector.htm 。运行效果：运行效果：3

21、.2.2 关系选择器l关系选择器也叫层次选择器。如表关系选择器也叫层次选择器。如表3-2所示。所示。 3.2.2 关系选择器l1.后代选择器（后代选择器（E F）l后代选择器也称为包含选择器，用于选择某元素的一个或多个后代选择器也称为包含选择器，用于选择某元素的一个或多个后代元素，包括具有多层次包含关系的元素。后代元素，包括具有多层次包含关系的元素。 一般格式为：选择符一般格式为：选择符1 选择符选择符2 选择符选择符n 属性属性1:值值1; 属性属性2:值值2; 属性属性n:值值n;注意，各选择符之间用空格分隔。注意，各选择符之间用空格分隔。 u例如：例如：p b color:redu在这行

22、代码中，如果在这行代码中，如果b为为p的后代元素，则选中它的后代元素，则选中它 。l后代选择器定义的样式规则并不是仅仅适用于选择后代选择器定义的样式规则并不是仅仅适用于选择HTML元素元素，也可以将其应用到自定义类、自定义，也可以将其应用到自定义类、自定义id以及任何样式选择器以及任何样式选择器中。中。 3.2.2 关系选择器l【例例3-3】演示后代选择器的用法。将演示后代选择器的用法。将ul的后代的后代ul中的中的li全部显全部显示为红色背景示为红色背景 。 3.2.2 关系选择器l2.子选择器（子选择器（EF） l子元素选择器只能选择某元素的子元素，其中子元素选择器只能选择某元素的子元素，

23、其中E为父元素，而为父元素，而F为子元素，为子元素，EF表示选择表示选择E元素下的所有子元素元素下的所有子元素F，但不包括孙，但不包括孙元素等更深层次的元素。元素等更深层次的元素。l【例例3-4】演示子选择器的用法。当选择绿色背景、文字为演示子选择器的用法。当选择绿色背景、文字为“04”的元素时，将其子元素全部用红色背景显示出来的元素时，将其子元素全部用红色背景显示出来 。3.2.2 关系选择器l3.相邻兄弟选择器（相邻兄弟选择器（E+F） l相邻兄弟选择器选择相邻兄弟选择器选择E元素和元素和F元素相邻，而且元素相邻，而且F和和E具有相同具有相同的父元素的所有元素。的父元素的所有元素。l【例例

24、3-5】演示相邻兄弟选择器的用法演示相邻兄弟选择器的用法 3.2.2 关系选择器l4.兄弟选择器（兄弟选择器（EF） l兄弟选择器是兄弟选择器是CSS 3.0新增加的一种选择器，用于选择某元素新增加的一种选择器，用于选择某元素后面的所有兄弟元素。换句话说，选择的条件是后面的所有兄弟元素。换句话说，选择的条件是F元素和元素和E元素元素属于同一父元素，并且属于同一父元素，并且F元素在元素在E元素之后。元素之后。 l【例例3-6】演示兄弟选择器的用法演示兄弟选择器的用法 3.2.3 特性选择器l特性选择器（特性选择器（Attribute Selectors）用于在标记内匹配某些特）用于在标记内匹配某

25、些特性名，从而得到对应的元素。性名，从而得到对应的元素。l特性选择器的格式是元素后跟中括号，中括号内为所选的特性特性选择器的格式是元素后跟中括号，中括号内为所选的特性名。名。l表表3-3列出了列出了CSS 3.0支持的特性选择器。支持的特性选择器。3.2.3 特性选择器l1. Eattl选择所有具有选择所有具有att特性的特性的E元素，而不考虑特性的值。元素，而不考虑特性的值。下面代码的含义是选择所有声明了下面代码的含义是选择所有声明了class特性的特性的a元素，并将选中元素，并将选中元素的颜色设置为红色：元素的颜色设置为红色：uaclasscolor:#f00;下面的代码将所有带有下面的代

26、码将所有带有alt特性的特性的img元素的颜色设置为红色：元素的颜色设置为红色：uimgalt color:#f00;下面是稍微复杂一点的例子，用于选择同时带下面是稍微复杂一点的例子，用于选择同时带href和和title特性的特性的a元素：元素：uahreftitle font-weight: bold;3.2.3 特性选择器l2. Eatt=vall选择具有选择具有att特性且特性值等于特性且特性值等于val的的E元素。元素。例如：例如：ahref=http:/ font-size: 115%;l3Eatt=vall选择具有选择具有att特性且特性值为一用空格分隔的单词，其中一个单词等于特性

27、且特性值为一用空格分隔的单词，其中一个单词等于val的的E元素。元素。例如：例如： pclass=warning font-weight: bold;下面的下面的p标记演示了基本用法：标记演示了基本用法：u一路小心一路小心u在这行代码中，由于在这行代码中，由于class包含单词包含单词“warning”，所以该，所以该p元素将被选中。元素将被选中。3.2.3 特性选择器l4. Eatt|=vall选择具有选择具有att特性性且特性值为一用连接符分隔的字符串，并以特性性且特性值为一用连接符分隔的字符串，并以val开头的开头的E元素。元素。例如：例如： *lang|=en color: white

28、;这条规则将会选择特性这条规则将会选择特性lang的值的值“en”或者或者“en-”开头的元素。开头的元素。就是说，它可以匹配：就是说，它可以匹配：uHello!uGreetings!uGday!3.2.3 特性选择器l5. Eatt=vall选择具有选择具有att特性且特性值为以特性且特性值为以val开头的开头的E元素。元素。例如：例如： ptitle=val color:#FF0000;l6Eatt$=vall选择具有选择具有att特性且特性值为以特性且特性值为以val结尾的字符串的结尾的字符串的E元素。元素。例如：例如： ptitle$=val color:#FF0000;l7Eatt*

29、=vall选择具有选择具有att特性且特性值为包含特性且特性值为包含val的字符串的的字符串的E元素。元素。例如：例如：id*=abcmargin-right:10px; width:200px; height:200px;3.2.4 伪元素选择器l在在CSS 2.1中，伪元素选择器（中，伪元素选择器（Pseudo-Element Selectors）和伪类选择器（和伪类选择器（Pseudo-Classes Selectors）都是用一个冒号）都是用一个冒号“:”作为分隔符；作为分隔符；l在在CSS 3.0中，为了将为元素选择器和伪类选择器区分，改为中，为了将为元素选择器和伪类选择器区分，改为

30、将伪元素选择器全部用两个冒号将伪元素选择器全部用两个冒号“:”分隔。分隔。 l表表3-4列出了列出了CSS 3.0支持的伪元素选择器。支持的伪元素选择器。3.2.4 伪元素选择器l1E:first-letterl设置元素内的第一个字符的样式，一般用于配合设置元素内的第一个字符的样式，一般用于配合CSS的的font-size属性和属性和float属性制作首字下沉的效果。属性制作首字下沉的效果。 注意，此伪元素仅作用于块元素。注意，此伪元素仅作用于块元素。 l内联元素必须先通过内联元素必须先通过CSS的的display属性将其设置为块级元素属性将其设置为块级元素才可以使用该伪元素选择器。才可以使用

31、该伪元素选择器。例如：例如： p:first-letter float:left;font-size:40px;font-weight:bold;line-height:1; 3.2.4 伪元素选择器l2E:first-linel设置元素内容第一行的样式。设置元素内容第一行的样式。 例如：例如：p:first-line color:#090; l3.E:beforel设置在元素显示前发生的内容，一般和设置在元素显示前发生的内容，一般和content属性一起使用属性一起使用例如：例如： p:beforeposition:absolute;background:#fff;color:#000;co

32、ntent:如果你看到这段文字，说明你的浏览器同时支持如果你看到这段文字，说明你的浏览器同时支持E:before和和E:before;font-size:14px;3.2.4 伪元素选择器l4E:afterl设置在元素显示后发生的内容，一般将它和设置在元素显示后发生的内容，一般将它和CSS的的content属属性一起使用性一起使用 l5. E:selectionl选择页面中突出显示的部分，包括可编辑文本字段中的文本。选择页面中突出显示的部分，包括可编辑文本字段中的文本。此伪元素可以应用于此伪元素可以应用于color和和background-color属性。属性。 例如：例如： p:select

33、ionbackground:#000;color:#f00;3.2.5 伪类选择器l伪类选择器也称为虚类选择器。伪类选择器也称为虚类选择器。l1. 结构伪类结构伪类通过结构伪类，可以基于文档树中无法使用简单选择器或连结符选择的通过结构伪类，可以基于文档树中无法使用简单选择器或连结符选择的额外信息进行选择。额外信息进行选择。l2. 目标伪类目标伪类目标伪类选择引用目标伪类选择引用 URI 的目标元素。段标识符用于标识页面中的位置的目标元素。段标识符用于标识页面中的位置，使用数字符号以及随后的锚点标识符组成，使用数字符号以及随后的锚点标识符组成 。超链接虚类是专用于超链接标记的选择符，使用虚类可以

34、为超链接虚类是专用于超链接标记的选择符，使用虚类可以为4种状态的种状态的超链接定义不同的显示样式。超链接定义不同的显示样式。uA:link未被访问过的超链接样式未被访问过的超链接样式uA:visited已被访问过的超链接样式已被访问过的超链接样式uA:active 当超链接处于选中状态的样式当超链接处于选中状态的样式uA:hover当鼠标指针移动到超链接上的样式当鼠标指针移动到超链接上的样式3.2.5 伪类选择器l3. 求反伪类求反伪类l求反伪类采用简单选择器作为参数，选择未被该参数选择的元求反伪类采用简单选择器作为参数，选择未被该参数选择的元素。素。下面的代码选择与简单选择器下面的代码选择与

35、简单选择器s不匹配的不匹配的E元素：元素：E:not(s) 3.3 CSS的盒模型l3.3.1 盒模型简介盒模型简介l在在CSS 3.0中，规定中，规定HTML元素的盒模型由元素的盒模型由4个区域组成。个区域组成。content：指显示元素内容的区域。：指显示元素内容的区域。content的外边界包围的矩形的外边界包围的矩形区域称为区域称为“content-box”。padding：内边距。：内边距。padding的外边界包围的矩形区域称为的外边界包围的矩形区域称为“padding-box”。内边距区域是指。内边距区域是指padding-box减去减去content-box构成的矩形环区域。构

36、成的矩形环区域。border：边框。：边框。border的外边界包围的矩形区域称为的外边界包围的矩形区域称为“border-box”。边框区域是指。边框区域是指border-box减去减去padding-box构成的矩形构成的矩形环区域。环区域。margin：外边距。指图中虚线包围的矩形区域减去：外边距。指图中虚线包围的矩形区域减去border-box构成的矩形环区域。构成的矩形环区域。3.3.2 外边距（margin）lmargin属性用于设置元素边框的所有属性用于设置元素边框的所有4个方向的外边距属性，个方向的外边距属性，控制环绕某元素的矩形区域与其他元素之间的距离。控制环绕某元素的矩形区

37、域与其他元素之间的距离。包括包括margin-top、margin-right、 margin-bottom和和 margin-left四个属性。四个属性。左、右两边的外边距对所有元素都起作用，而上、下两边的外边左、右两边的外边距对所有元素都起作用，而上、下两边的外边距只对块级元素才起作用。距只对块级元素才起作用。l基本用法：基本用法：margin属性的值一般使用属性的值一般使用px或或em作为长度单位，也可以是百分作为长度单位，也可以是百分比或者比或者“auto”，还可以是负值。，还可以是负值。3.3.2 外边距（margin）l基本用法：基本用法：如果提供全部如果提供全部4个参数值，将按上

38、、右、下、左的顺序作用于四个参数值，将按上、右、下、左的顺序作用于四边。边。如果只提供一个参数值，将用于全部的四边如果只提供一个参数值，将用于全部的四边 ；如果提供两个参数值，第一个用于上、下，第二个用于左、右。如果提供两个参数值，第一个用于上、下，第二个用于左、右。 如果提供如果提供3个参数值，第一个用于上，第二个用于左、右，第三个参数值，第一个用于上，第二个用于左、右，第三个用于下。个用于下。 也可以使用也可以使用marigin-top、margin-right、 margin-bottom和和 margin-left这这4个属性分别设置各个边的外边距。个属性分别设置各个边的外边距。 l让

39、块级元素居中显示让块级元素居中显示 只需要将左右两边的外边距设置为只需要将左右两边的外边距设置为auto即可。即可。 3.3.3 内边距（padding）lpadding用于控制元素内部与元素边框之间的间距。用于控制元素内部与元素边框之间的间距。包括包括padding-top、padding-right、padding-bottom和和padding-left这这4个属性。个属性。padding属性可以使用长度值或百分比值，但不允许为负值。属性可以使用长度值或百分比值，但不允许为负值。lpadding的用法和的用法和margin的用法相似。的用法相似。 3.3.4 盒大小（box-sizein

40、g）lbox-sizeing属性主要用于设置如何计算元素的属性主要用于设置如何计算元素的width和和height属性。取值属性。取值有：有： （1）content-box：在：在CSS中，元素的中，元素的width属性和属性和height属性默认是属性默认是指元素内容（指元素内容（content）的宽度和高度，而不是指元素内容、内边距、）的宽度和高度，而不是指元素内容、内边距、边框以及外边距的总和。边框以及外边距的总和。 u.t1 box-sizing:content-box; width:200px; padding:10px; border:15px solid #eee; （2）bor

41、der-box：该属性值的含义是：该属性值的含义是padding和和border被包含在元素被包含在元素的的width和和height之内。元素的实际宽度就等于设置的之内。元素的实际宽度就等于设置的width值，即使定值，即使定义有义有border和和padding也不会改变元素的实际宽度，但会改变元素内容也不会改变元素的实际宽度，但会改变元素内容的宽度。的宽度。u.t2 box-sizing:border-box; width:200px; padding:10px; border:15px solid #eee; 3.3.4 盒大小（box-sizeing）l【例例3-7】演示外边距和内边

42、距的基本用法，在演示外边距和内边距的基本用法，在IE 9.0浏览器中浏览器中运行的效果如图运行的效果如图3-17所示。所示。3.3.5 盒阴影效果（box-shadow）lbox-shadow用于设置边框盒的阴影效果。常用形式为：用于设置边框盒的阴影效果。常用形式为：box-shadow：none 无阴影无阴影(默认默认)box-shadow：inset , , n1, n2 设置外设置外阴影。阴影。box-shadow：inset , , n1, n2 inset 设设置内阴影置内阴影udx、dy分别表示对象的阴影水平偏移值和阴影垂直偏移值，这两个分别表示对象的阴影水平偏移值和阴影垂直偏移值

43、，这两个值都可以为负值。值都可以为负值。un1表示对象的阴影模糊值，表示对象的阴影模糊值，n2表示对象的阴影扩散值，这两个值都表示对象的阴影扩散值，这两个值都不允许负值，可省略。不允许负值，可省略。ucolor表示外延阴影的颜色。表示外延阴影的颜色。3.3.5 盒阴影效果（box-shadow）l【例例3-8】演示演示box-shadow的基本用法。的基本用法。3.4 定位与布局控制l3.4.1 宽度和高度控制l定义元素样式时，使用最频繁的就是元素的大小控制。定义元素样式时，使用最频繁的就是元素的大小控制。lWidth、Height：分别用于检索或设置对象的宽度、高度。：分别用于检索或设置对象

44、的宽度、高度。语法为：语法为：width： | | autoheigh： | | auto uauto（默认）表示对象的大小取决于其它属性值；（默认）表示对象的大小取决于其它属性值；表示用表示用长度值来定义宽度或高度，不允许负值；长度值来定义宽度或高度，不允许负值；表示用百分表示用百分比来定义宽度或高度，不允许负值比来定义宽度或高度，不允许负值 3.4.1 宽度和高度控制l2. min-width、min-height、max-width、max-heightlmin-width和和max-width属性分别表示对象的最小宽度、最大属性分别表示对象的最小宽度、最大宽度。宽度。lmin-widt

45、h的默认值为的默认值为0，max-width的默认值为的默认值为none。l【例例3-9】演示宽度、高度、最大最小宽高的用法演示宽度、高度、最大最小宽高的用法 。3.4.2 定位控制l页面中的元素定位分为流布局（页面中的元素定位分为流布局（static）、绝对定位（）、绝对定位（absolute）、相对定位（）、相对定位（relative）和固定布局（）和固定布局（fixed）。）。 l流布局是页面中的元素按照从左到右、从上到下的顺序显示，流布局是页面中的元素按照从左到右、从上到下的顺序显示，各元素之间不重叠。如果不设置元素定位方式，则网页默认为各元素之间不重叠。如果不设置元素定位方式，则网页

46、默认为流布局（流布局（static）方式。）方式。 l1.定位属性（定位属性（position） position属性有属性有4个值：个值：static、relative、absolute和和fixed 。相对位置（相对位置（relative） ：相对定位（：相对定位（relative）是指相对于正常流）是指相对于正常流的偏移量的偏移量 。采用相对定位时，元素在页中显示的位置由。采用相对定位时，元素在页中显示的位置由left、top以及以及z-index属性决定，具有相同属性决定，具有相同z-index值的元素不重叠。值的元素不重叠。 3.4.2 定位控制l1. 定位属性（定位属性（posit

47、ion）l绝对位置（绝对位置（absolute） ：坐标绝对定位（：坐标绝对定位（absolute）在页中）在页中的位置由元素的左上角（的位置由元素的左上角（left，top）、右下角（）、右下角（right，bottom）、宽和高（）、宽和高（width，height）以及）以及z-index属性决定。属性决定。l固定定位（固定定位（fixed） ：这种方式也是绝对定位，但是它与：这种方式也是绝对定位，但是它与absolute不同的是不同的是fixed是相对于浏览器窗口进行定位，而不是是相对于浏览器窗口进行定位，而不是相对于父元素进行定位，当出现滚动条时，用相对于父元素进行定位，当出现滚动条

48、时，用fixed定位的对象定位的对象也不会随着滚动条滚动。也不会随着滚动条滚动。 3.4.2 定位控制l2. Z索引（索引（z-index）lz-index称为称为Z索引或者索引或者Z顺序，用于控制元素重叠时显示的顺顺序，用于控制元素重叠时显示的顺序，其效果就像多张纸（透明或不透明）按顺序重叠在一起一序，其效果就像多张纸（透明或不透明）按顺序重叠在一起一样。样。z-index值可以为正值也可以为负值，值可以为正值也可以为负值，z-index大的元素会覆盖大的元素会覆盖z-index值小的元素内容，即值小的元素内容，即z-index值大的元素显示在上面。值大的元素显示在上面。必须定义必须定义po

49、sition属性值为属性值为absolute、relative或或fixed，z-index才起作用。才起作用。3.4.2 定位控制l【例例3-10】将块级元素（例如将块级元素（例如div）在浏览器窗口中水平、垂）在浏览器窗口中水平、垂直都居中显示，在直都居中显示，在IE 9.0浏览器中运行的效果如图所示。浏览器中运行的效果如图所示。3.4.2 定位控制l【例例3-11】将块级元素（例如将块级元素（例如div）显示在浏览器窗口或者某）显示在浏览器窗口或者某个容器的四个角，在个容器的四个角，在IE 9.0浏览器中运行的效果如图所示。浏览器中运行的效果如图所示。3.4.2 定位控制l【例例3-12

50、】设计如图所示的布局效果。设计如图所示的布局效果。 3.4.2 定位控制l【例例3-13】演示演示z-index的基本用法，在的基本用法，在IE 9.0浏览器中运行的浏览器中运行的效果如图所示。效果如图所示。3.4.3 布局控制l布局控制主要用于控制元素显示的样式、是否浮动、溢出时如布局控制主要用于控制元素显示的样式、是否浮动、溢出时如何处理等。何处理等。l1. 显示（显示（display）ldisplay控制元素是否显示以及是作为块元素显示还是在线性控制元素是否显示以及是作为块元素显示还是在线性流内显示。流内显示。 l在在CSS 3.0中，中，diplay可选的属性值非常多。可选的属性值非常

51、多。在段落或者标题中，如果希望让文字居中，利用在段落或者标题中，如果希望让文字居中，利用text-align属性属性即可实现。即可实现。 如果希望将块级元素居中排列，只需要将其左右外边距设置为如果希望将块级元素居中排列，只需要将其左右外边距设置为“auto”，并指定宽度即可，并指定宽度即可 。3.4.3 布局控制l2. 可见性（可见性（visibility）lvisibility属性用于控制元素在页面中是否隐藏，但不论是显示属性用于控制元素在页面中是否隐藏，但不论是显示还是隐藏，都会占据空间。还是隐藏，都会占据空间。取值有：取值有：visible、hidden、collapse。collaps

52、e主要用来隐藏表主要用来隐藏表格的行或列。隐藏的行或列能够被其他内容使用。对于表格外的格的行或列。隐藏的行或列能够被其他内容使用。对于表格外的其他对象，其作用等同于其他对象，其作用等同于hidden。l3.浮动和清除（浮动和清除（float、clear） lfloat属性用于定义元素在哪个方向浮动。属性用于定义元素在哪个方向浮动。可选项有：可选项有：none（默认值。元素不浮动），（默认值。元素不浮动），left（元素向左浮动（元素向左浮动，其他元素流向该元素的右边），其他元素流向该元素的右边），right（元素向右浮动，其他元（元素向右浮动，其他元素流向该元素的左边）。素流向该元素的左边）。

53、3.4.3 布局控制l3. 浮动和清除（浮动和清除（float、clear）lclear定义元素的哪个方向不允许出现浮动元素。定义元素的哪个方向不允许出现浮动元素。可选项有可选项有none（默认值，两边都可以有浮动元素）、（默认值，两边都可以有浮动元素）、right（清（清除右侧的浮动元素）、除右侧的浮动元素）、left（清除左侧的浮动元素）和（清除左侧的浮动元素）和both（清（清除左右两侧的浮动元素）。除左右两侧的浮动元素）。l4. 剪切（剪切（clip）lclip属性定义一个剪切矩形，按属性定义一个剪切矩形，按“上上-右右-下下-左左”的顺序提供从的顺序提供从元素左上角为元素左上角为(0

54、,0)坐标计算的四个边的偏移值，其中任何一个坐标计算的四个边的偏移值，其中任何一个值都可用值都可用auto替换，替换，auto表示此边不剪切。表示此边不剪切。 例如：例如：clip:rect(auto 50px 20px auto);3.4.3 布局控制l【例例3-14】演示演示clip的基本用法，在的基本用法，在IE 9.0浏览器中运行的效浏览器中运行的效果如图所示。果如图所示。3.4.3 布局控制l5.溢出（溢出（overflow、overflow-x、overflow-y） loverflow属性用于设置当元素的内容溢出显示区域时，如何处属性用于设置当元素的内容溢出显示区域时，如何处理溢

55、出的内容。选项有：理溢出的内容。选项有：auto：浏览器自动判断是否显示滚动条以便查看溢出的内容。：浏览器自动判断是否显示滚动条以便查看溢出的内容。hidden：剪切掉溢出的内容。：剪切掉溢出的内容。scroll：浏览器会始终显示滚动条，以便查看溢出的内容。：浏览器会始终显示滚动条，以便查看溢出的内容。visible：默认值。不剪切，溢出部分会自动呈现在元素框之外。：默认值。不剪切，溢出部分会自动呈现在元素框之外。loverflow-x和和overflw-y这两个属性是这两个属性是CSS 3.0新增加的属性。新增加的属性。overflow-x用于检索或设置当对象的内容超过其指定宽度时如用于检索

56、或设置当对象的内容超过其指定宽度时如何处理内容。何处理内容。overflw-y用于检索或设置当对象的内容超过其指用于检索或设置当对象的内容超过其指定高度时如何处理内容。定高度时如何处理内容。 3.5 边框控制l边框控制是指对盒模型中边框的宽度、样式、颜色、圆角、阴边框控制是指对盒模型中边框的宽度、样式、颜色、圆角、阴影、图像等进行设置。影、图像等进行设置。l3.5.1 复合属性（复合属性（border） border属性是一个复合属性，用于一次性设置边框的宽度、样式属性是一个复合属性，用于一次性设置边框的宽度、样式、颜色。、颜色。语法为：语法为： border： border-width |

57、border-style | border-color 如果指定一个值，则该值表示边框的宽度；如果指定两个值，则如果指定一个值，则该值表示边框的宽度；如果指定两个值，则第第1个值表示边框宽度，第个值表示边框宽度，第2个值表示边框样式；如果指定三个值个值表示边框样式；如果指定三个值，则分别表示边框宽度、边框样式、边框颜色。，则分别表示边框宽度、边框样式、边框颜色。3.5.2 边框宽度和样式lborder-width和和border-style属性为元素的边框设置宽度和样属性为元素的边框设置宽度和样式，这两个属性都按式，这两个属性都按“上、右、下、左上、右、下、左”的顺序进行定义。的顺序进行定义。

58、 lborder-width可以使用可以使用border-top-width、border-right-width、border-bottom-width和和border-left-width分别为单个分别为单个边定义边框的宽度。边定义边框的宽度。如果边框样式是如果边框样式是“none”，则边框宽度为，则边框宽度为0；边框宽度不允许指定负长度值，默认宽度为边框宽度不允许指定负长度值，默认宽度为0，只有当边框宽度，只有当边框宽度大于大于0而且而且border-style的值不是的值不是none时边框才可能出现。时边框才可能出现。 lborder-style属性也可以使用属性也可以使用border

59、-top-style、border-right-style、border-bottom-style和和border-left-style分别为分别为单个边定义边框样式。单个边定义边框样式。 3.5.3 边框颜色（border-color）lborder-color属性用于设置元素属性用于设置元素4条边框的颜色。可以使用简条边框的颜色。可以使用简写形式设置一个元素的所有边框中可见部分的颜色，也可以使写形式设置一个元素的所有边框中可见部分的颜色，也可以使用用border-top-color、border-right-color、border-bottom-color和和border-left-co

60、lor分别为分别为4个边设置颜色。个边设置颜色。 l如果如果border-width等于等于0或者或者border-style设置为设置为none，则，则border-color属性不起作用。属性不起作用。3.5.4 边框圆角（border-radius）lborder-radius属性用于设置或检索对象使用圆角边框。属性用于设置或检索对象使用圆角边框。 该属性可以提供该属性可以提供2个参数，第个参数，第1个参数表示水平半径，第个参数表示水平半径，第2个参数个参数表示垂直半径。表示垂直半径。 这这2个参数以个参数以“/”分隔，其中每个参数允许设置分隔，其中每个参数允许设置14个值。如果省个值。