1、第三章第三章 层叠样式表（层叠样式表（CSSCSS）技术）技术基于基于 CSS,CSS,本章介绍网页的基本格式化和布局本章介绍网页的基本格式化和布局技术技术lCSS CSS 简介简介l定义样式定义样式l使用样式使用样式lCSS CSS 基本属性基本属性l样式层叠性样式层叠性l元素框模型元素框模型中山大学计算机科学系2022-12-241l元素定位元素定位l元素布局元素布局l列表样式列表样式l表格制作表格制作l页面布局页面布局3.1 CSS 3.1 CSS 简介简介lCSSCSS 是层叠样式表（是层叠样式表（Cascading Style SheetsCascading Style Sheets
2、，或称级联样式表）的简称，是格式化网页的标准技或称级联样式表）的简称，是格式化网页的标准技术术l例例3.1 3.1 使用使用 CSS CSS 将所有文字显示为将所有文字显示为“倾斜倾斜”uSharePoint Designer 2007SharePoint Designer 2007操作操作中山大学计算机科学系2022-12-2423.2 3.2 定义样式定义样式3.2.1 3.2.1 样式定义格式样式定义格式l样式定义样式定义由样式规则组成，每条样式规则包括选由样式规则组成，每条样式规则包括选择器和样式声明择器和样式声明,如：如：selector property:value;selecto
3、r property:value;l样式声明样式声明由一系列属性声明组成由一系列属性声明组成,而属性声明又由而属性声明又由属性名和属性值构成属性名和属性值构成l示例示例p color:red /p color:red /*将普通将普通 p p 段落文字显示为红色段落文字显示为红色 */h1,h2,h3 color:red /h1,h2,h3 color:red /*将将 h1,h2,h3 h1,h2,h3 标题文字显示标题文字显示为红色为红色 */h2 font-size:small;color:blue /h2 font-size:small;color:blue /*将将 h2 h2 标题
4、文标题文字指定为小的蓝色字字指定为小的蓝色字 */中山大学计算机科学系2022-12-2433.2.2 3.2.2 基本选择器基本选择器l最常用的选择器最常用的选择器:HTML HTML 标签选择器、类选择器和标签选择器、类选择器和 ID ID 选择器选择器一、一、HTML HTML 标签选择器标签选择器l为为 HTML HTML 标签定义的样式将改变它的默认显示格标签定义的样式将改变它的默认显示格式式l例例3.2 3.2 超链接没有下划线超链接没有下划线a text-decoration:none;/a text-decoration:none;/*去除超链接的下划线去除超链接的下划线 */
5、中山大学计算机科学系2022-12-2443.2.2 3.2.2 基本选择器基本选择器二、类选择器二、类选择器l形式形式:一个点号和一个类名：一个点号和一个类名：.classname.classname property:value;property:value;l效果效果:使具有指定使具有指定 class class 属性的页面元素具有该属性的页面元素具有该类样式指定的显示格式类样式指定的显示格式l例例3.3 3.3 所有大学名显示为所有大学名显示为“倾斜、加粗倾斜、加粗”.university_name font-style:italic;font-.university_name fon
6、t-style:italic;font-weight:bold;/weight:bold;/*文字倾斜、加粗文字倾斜、加粗 */中山大学计算机科学系2022-12-2453.2.2 3.2.2 基本选择器基本选择器三、三、ID ID 选择器选择器l形式形式:一个井号（一个井号（#）和一个）和一个 ID ID#IDname#IDname property:value;property:value;l效果效果:使具有指定使具有指定 ID ID 属性的元素具有指定格式属性的元素具有指定格式l例例3.4 3.4 使术语使术语“级联样式表级联样式表(CSS)”(CSS)”显示为显示为“倾斜、倾斜、加粗、
7、大字体加粗、大字体”#css_name font-style:italic;font-weight:#css_name font-style:italic;font-weight:bold;font-size:large;bold;font-size:large;中山大学计算机科学系2022-12-2463.3 3.3 使用样式使用样式CSS CSS 样式的三种使用方式样式的三种使用方式:l嵌入样式表嵌入样式表l链接外部样式表链接外部样式表(标准方法，实现网页结构和表现标准方法，实现网页结构和表现的完全分离的完全分离)l内嵌样式内嵌样式中山大学计算机科学系2022-12-2473.3.1 3.
8、3.1 嵌入样式表嵌入样式表l形式形式:使用使用 元素把元素把 CSS CSS 样式定义在样式定义在 HTML HTML 文档的文档的 元素内元素内l效果效果:作用于当前页面的有关元素作用于当前页面的有关元素l例例3.5 3.5 所有大学名显示为所有大学名显示为“加粗加粗”，并且所有超，并且所有超链接没有下划线链接没有下划线.university_name font-weight:bold;.university_name font-weight:bold;a text-decoration:none;a text-decoration:none;中山大学计算机科学系2022-12-2483.
9、3.2 3.3.2 链接外部样式表链接外部样式表l定义定义:把把 CSS CSS 样式定义写入一个以样式定义写入一个以 css css 为扩展名为扩展名的文本文件中，如的文本文件中，如 mystyle.cssmystyle.cssl形式形式:在在 元素内加入代码：元素内加入代码：l效果效果:外部样式表中的样式作用于页面外部样式表中的样式作用于页面l好处：好处：一个外部样式表可以控制多个页面的显示一个外部样式表可以控制多个页面的显示外观，从而确保这些页面外观的一致性外观，从而确保这些页面外观的一致性l例例3.6 3.6 设计多个页面，要求这些页面中所有大学设计多个页面，要求这些页面中所有大学名称
10、的显示样式为名称的显示样式为“加粗加粗”，并且所有超链接没有，并且所有超链接没有下划线下划线中山大学计算机科学系2022-12-2493.3.3 3.3.3 内嵌样式内嵌样式l定义定义:直接使用直接使用 HTML HTML 标签的标签的 style style 属性定义的属性定义的样式样式,如：如：HelloHellol效果效果:只作用于这个元素只作用于这个元素l例例3.7 3.7 使大学名显示为使大学名显示为“加粗加粗”，并且超链接没，并且超链接没有下划线有下划线中山大学计算机科学系2022-12-24103.4 CSS 3.4 CSS 基本格式化属性基本格式化属性lCSS CSS 属性分类
11、：属性分类：u基本格式化属性：包括字体、文本和背景属性等基本格式化属性：包括字体、文本和背景属性等u布局性属性：包括框属性、定位属性、布局属性、列表布局性属性：包括框属性、定位属性、布局属性、列表属性和表格属性等。属性和表格属性等。l可视化设置方法可视化设置方法:“样式样式”对话框、对话框、“CSS CSS 属性属性”窗格窗格中山大学计算机科学系2022-12-24113.4.1 3.4.1 属性值与单位属性值与单位一、属性值分类一、属性值分类l单词单词。如。如 font-style:italic;font-style:italic;l数字值数字值。通常带有单位，如。通常带有单位，如 font
12、-size:12px;font-size:12px;l颜色值颜色值。如。如 color:red;color:red;中山大学计算机科学系2022-12-24123.4.1 3.4.1 属性值与单位属性值与单位二、数字值单位二、数字值单位数字值用于定义各种元素的长度（包括高度、宽度数字值用于定义各种元素的长度（包括高度、宽度和粗细等），可以使用下表单位和粗细等），可以使用下表单位中山大学计算机科学系2022-12-24133.4.1 3.4.1 属性值与单位属性值与单位三、颜色值三、颜色值可以下表所列方式为可以下表所列方式为 CSS CSS 属性（如前景色、背景属性（如前景色、背景色）指定颜色值
13、色）指定颜色值中山大学计算机科学系2022-12-24143.4.2 3.4.2 字体属性字体属性l字体属性字体属性用于控制文本中的用于控制文本中的字体格式字体格式，如文字的，如文字的字体、大小、粗细、颜色和修饰等字体、大小、粗细、颜色和修饰等l常用字体属性常用字体属性:font-family:font-family、font-sizefont-size、font-font-stylestyle、font-weightfont-weight、font-variantfont-variant、fontfont、text-transformtext-transform、text-decoratio
14、ntext-decoration、colorcolorl例例3.8 3.8 将文字将文字“JavaScript”JavaScript”设置为设置为Times New Times New Roman Roman 字体、加粗、倾斜、字体大小字体、加粗、倾斜、字体大小3636磅、红色字，磅、红色字，并且小体大写并且小体大写中山大学计算机科学系2022-12-24153.4.3 3.4.3 文本属性文本属性l文本属性文本属性用于控制文本块的用于控制文本块的段落格式段落格式，如首行缩，如首行缩进、段落对齐方式等进、段落对齐方式等l常用文本属性常用文本属性:text-align:text-align、ve
15、rtical-alignvertical-align、text-indenttext-indent、line-heightline-height、letter-spacingletter-spacing、word-spacingword-spacing、white-spacewhite-spacel例例3.9 3.9 将标题居中，并使正文段落首行缩进将标题居中，并使正文段落首行缩进2 2个字个字符、行间距符、行间距150%150%、字间距、字间距1 1磅磅中山大学计算机科学系2022-12-24163.4.4 3.4.4 背景属性背景属性l背景属性背景属性用于控制页面元素的背景颜色和背景图用于
16、控制页面元素的背景颜色和背景图案案l常用背景属性常用背景属性:background-color:background-color、background-background-imageimage、background-positionbackground-position、background-background-repeatrepeat、background-attachmentbackground-attachment、backgroundbackgroundl例例3.10 3.10 一个小图像填充整个页面背景，并且程序一个小图像填充整个页面背景，并且程序代码设置为银灰色背景代码设置为银
17、灰色背景中山大学计算机科学系2022-12-24173.5 3.5 样式层叠性样式层叠性3.5.1 3.5.1 文档结构文档结构lHTML HTML 文档的结构文档的结构:是指是指 HTML HTML 元素之间的嵌套关元素之间的嵌套关系，可以用文档结构树表示系，可以用文档结构树表示u节点表示节点表示 HTML HTML 元素元素u若一个元素直接包含另一个元素，则画一条连线若一个元素直接包含另一个元素，则画一条连线中山大学计算机科学系2022-12-24183.5.2 3.5.2 样式继承样式继承l样式继承样式继承是指是指 HTML HTML 元素可以继承父元素的元素可以继承父元素的 CSS C
18、SS 属性属性u有些属性被自动继承，如字体、文本等属性；但有些属有些属性被自动继承，如字体、文本等属性；但有些属性不被自动继承，如背景、边框等属性性不被自动继承，如背景、边框等属性u对于相对长度单位值（如百分比），继承的是相对值的对于相对长度单位值（如百分比），继承的是相对值的实际计算值实际计算值u特殊的属性值特殊的属性值:inherit:inheritl例例3.11 3.11 定义样式，将页面的普通文字大小设置为定义样式，将页面的普通文字大小设置为 12pt12pt，而将而将 h1 h1 标题的文字大小设置为普通文字的标题的文字大小设置为普通文字的 150%150%body font-siz
19、e:12pt;body font-size:12pt;h1 font-size:150%;h1 font-size:150%;中山大学计算机科学系2022-12-24193.5.3 3.5.3 样式层叠样式层叠l样式层叠性样式层叠性：所有样式规则将按继承层次传递作：所有样式规则将按继承层次传递作用于相关用于相关 HTML HTML 元素，并按层叠规则解决元素，并按层叠规则解决 CSS CSS 属属性的重复定义问题性的重复定义问题l层叠规则：层叠规则：u规则规则1 1：HTML HTML 标签标签 类类 ID ID 优先级依次升高优先级依次升高u规则规则2 2：外部样式表：外部样式表 嵌入样式表
20、嵌入样式表 内嵌样式。但内嵌样式。但是，当选择器更有针对性时，规则是，当选择器更有针对性时，规则1 1优先于规则优先于规则2 2u规则规则3 3：定义的样式覆盖继承的样式定义的样式覆盖继承的样式l例例3.12 3.12 超链接的字体为超链接的字体为“隶书隶书”，没有下划线，没有下划线，但其中一个超链接有下划线但其中一个超链接有下划线中山大学计算机科学系2022-12-24203.5.4 3.5.4 结构性选择器结构性选择器l通配通配选择器选择器*padding:0;margin:0;padding:0;margin:0;清除所有元素的内边距和外边距清除所有元素的内边距和外边距l后代后代选择器选
21、择器 address i color:red;address i color:red;将位于将位于 元素内的元素内的 元素设置为红色字元素设置为红色字l子子选择器选择器 body h1 color:red;body h1 color:red;将将 元素的元素的 子元素设置为红色字子元素设置为红色字中山大学计算机科学系2022-12-24213.5.4 3.5.4 结构性选择器结构性选择器l相邻兄弟相邻兄弟选择器选择器 h1+p color:red;h1+p color:red;将与将与 元素相邻的下一个元素相邻的下一个 兄弟元素设置为红色字兄弟元素设置为红色字l带类名的带类名的 HTML HT
22、ML 标签标签选择器选择器 span.term color:red;span.term color:red;将具有类名为将具有类名为“term”term”的的 元素设置为红色字元素设置为红色字l带带 id id 的的 HTML HTML 标签标签选择器选择器 span#id_name color:red;span#id_name color:red;将其将其 id id 属性为属性为“id_name”id_name”的的 元素设置为红色字元素设置为红色字中山大学计算机科学系2022-12-24223.5.4 3.5.4 结构性选择器结构性选择器l属性选择器属性选择器:为具有某个属性值的为具有某
23、个属性值的 HTML HTML 元素定元素定义样式义样式简易匹配属性选择器：简易匹配属性选择器：liclass color:red;liclass color:red;精确匹配属性选择器：精确匹配属性选择器：liclass=term font-weight:bold;liclass=term font-weight:bold;部分匹配属性选择器：部分匹配属性选择器：liclass=att font-style:italic;liclass=att font-style:italic;前缀匹配属性选择器：前缀匹配属性选择器：liclass|=term text-decoration:underl
24、ine;liclass|=term text-decoration:underline;中山大学计算机科学系2022-12-24233.5.5 3.5.5 伪类伪类l常用伪类常用伪类u:link:link未访问超链接未访问超链接u:visited:visited 已被访问超链接已被访问超链接u:active:active 激活状态激活状态u:hover:hover 鼠标悬停状态鼠标悬停状态u:focus:focus 已获取焦点状态已获取焦点状态u:first-child:first-child 第第1 1个子元素个子元素l例例3.13 3.13 中山大学计算机科学系2022-12-24243.
25、5.6 3.5.6 伪元素伪元素l伪元素伪元素是指在是指在 HTML HTML 文档中没有用文档中没有用 HTML HTML 标签明标签明确标记的元素确标记的元素u:first-letter:first-letter 首字母首字母u:first-line:first-line首行首行u:before:before 在某元素内容之前插入内容在某元素内容之前插入内容u:after:after 在某元素内容之后插入内容在某元素内容之后插入内容l例例3.143.14中山大学计算机科学系2022-12-24253.6 3.6 元素框模型元素框模型3.6.1 3.6.1 框模型概述框模型概述l元素框元素框
26、:可显示的页面元素都显示为一个矩形框，可显示的页面元素都显示为一个矩形框，包括内容区、内边距、边框和外边距包括内容区、内边距、边框和外边距4 4个区域个区域l例例3.153.15中山大学计算机科学系2022-12-24263.6.2 3.6.2 框属性框属性一、边框属性一、边框属性lCSS CSS 边框属性边框属性包括边框设置和方向的组合包括边框设置和方向的组合:u边框设置边框设置:包括边框颜色（包括边框颜色（colorcolor）、边框样式（）、边框样式（stylestyle）和边框宽度（和边框宽度（widthwidth）u边框方向：边框方向：上（上（toptop）、右（）、右（rightr
27、ight）、下（）、下（bottombottom）和）和左（左（leftleft）l例例3.16 3.16 为段落设置灰色边框，其中，上、下边框为段落设置灰色边框，其中，上、下边框宽度分别为宽度分别为 thin thin 和和 thickthick，而左、右边框宽度都，而左、右边框宽度都为为 mediummedium中山大学计算机科学系2022-12-24273.6.2 3.6.2 框属性框属性二、内边距属性二、内边距属性l内边距属性内边距属性 padding-toppadding-top、padding-rightpadding-right、padding-bottom padding-bo
28、ttom 和和 padding-left padding-left 分别设置上、分别设置上、右、下、左内边距的宽度右、下、左内边距的宽度l例例3.17 3.17 为段落设置内边距，其中，上、下内边距为段落设置内边距，其中，上、下内边距宽度为宽度为 10px10px，而左、右内边距宽度为，而左、右内边距宽度为 20px20px中山大学计算机科学系2022-12-24283.6.2 3.6.2 框属性框属性三、外边距属性三、外边距属性l外边距属性外边距属性 margin-topmargin-top、margin-rightmargin-right、margin-bottom margin-bott
29、om 和和 margin-left margin-left 分别设置上、右、分别设置上、右、下、左外边距的宽度下、左外边距的宽度l例例3.18 3.18 为页面体设置外边距，其中，上、下外边为页面体设置外边距，其中，上、下外边距宽度为距宽度为 1cm1cm，而左、右外边距宽度为，而左、右外边距宽度为 2cm2cm中山大学计算机科学系2022-12-24293.6.3 3.6.3 外边距重叠外边距重叠l当两个元素的垂直外边距相遇时，当两个元素的垂直外边距相遇时，它们将重叠为它们将重叠为一个外边距。重叠后的外边距高度等于两个发生重一个外边距。重叠后的外边距高度等于两个发生重叠的外边距的高度中的较大
30、者叠的外边距的高度中的较大者l例例3.19 3.19 标题的下外边距高度为标题的下外边距高度为 1cm1cm，列表项上、，列表项上、下外边距高度为下外边距高度为 0.5 cm0.5 cm。易知：标题与第。易知：标题与第1 1个列表个列表项之间的外边距高度为项之间的外边距高度为 1cm1cm中山大学计算机科学系2022-12-24303.6.4 3.6.4 框大小框大小一、替换元素与非替换元素一、替换元素与非替换元素l替换元素：是指其元素内容来自替换元素：是指其元素内容来自 HTML HTML 标签的属标签的属性值。如性值。如 img img 元素元素l非替换元素：是指其元素内容来自非替换元素：
31、是指其元素内容来自 HTML HTML 标签自标签自身或标签对之间的内容。如身或标签对之间的内容。如 p p、h1h1、h2h2、hr hr 等等二、大小属性二、大小属性l自动计算大小自动计算大小lwidthwidth、heightheightlmax-widthmax-width、min-widthmin-width、max-height max-height 和和 min-min-heightheight中山大学计算机科学系2022-12-24313.6.4 3.6.4 框大小框大小三、内容区大小与元素框大小三、内容区大小与元素框大小l内容区大小内容区大小:是指元素内容区的宽度和高度，可以
32、是指元素内容区的宽度和高度，可以由属性由属性 width width 和和 height height 设置。设置。l元素框大小元素框大小 元素框宽度元素框宽度=width+=width+左右内边距左右内边距+左右边框左右边框+左右外边距左右外边距 元素框高度元素框高度=height+=height+上下内边距上下内边距+上下边框上下边框+上下外边距上下外边距l例例3.203.20中山大学计算机科学系2022-12-24323.7 3.7 元素定位元素定位3.7.1 3.7.1 定位概念定位概念一、文档流一、文档流每个可显示元素以元素框的形式，按照其每个可显示元素以元素框的形式，按照其 HTM
33、L HTML 代代码位置依次显示，从而构成一个文档流。即：码位置依次显示，从而构成一个文档流。即：l块级框从上至下依次排列块级框从上至下依次排列l行内框在一行中水平布置行内框在一行中水平布置二、定位属性二、定位属性lpositionposition：staticstatic、relativerelative、absoluteabsolute 、fixedfixedltoptop、bottombottom、leftleft、rightright和和z-indexz-index中山大学计算机科学系2022-12-24333.7.1 3.7.1 定位概念定位概念三、包含块三、包含块l包含块是显示文档
34、流的矩形区域包含块是显示文档流的矩形区域，最基本的包含，最基本的包含块是块是 body body 元素框和浏览窗口元素框和浏览窗口l自定义包含块自定义包含块：将一个元素的定位方式设置为非：将一个元素的定位方式设置为非 static static 方式方式l“一个元素的包含块一个元素的包含块”是指该元素最近的按非是指该元素最近的按非 static static 方式定位的祖先元素（注：不一定是父元方式定位的祖先元素（注：不一定是父元素）的元素框，或者是素）的元素框，或者是 body body 元素框（或浏览窗口）元素框（或浏览窗口）中山大学计算机科学系2022-12-24343.7.2 3.7.
35、2 四种定位方式四种定位方式l静态定位静态定位（staticstatic）：默认，使元素框处于文档）：默认，使元素框处于文档流的常规位置流的常规位置l相对定位相对定位（relativerelative）：将元素框从常规位置偏）：将元素框从常规位置偏移指定距离移指定距离l绝对定位（绝对定位（absoluteabsolute）：元素框从文档流完全删）：元素框从文档流完全删除，并相对于其包含块定位除，并相对于其包含块定位l固定定位固定定位（fixedfixed）：与绝对定位类似，但其包含）：与绝对定位类似，但其包含块是浏览窗口块是浏览窗口中山大学计算机科学系2022-12-24353.7.2 3.7
36、.2 四种定位方式四种定位方式l例例3.213.21第第1 1步步 static static 定位定位第第2 2步步 relative relative 定位定位第第3 3步步 absolute absolute 定位定位第第4 4步步 fixed fixed 定位定位中山大学计算机科学系2022-12-24363.8 3.8 元素布局元素布局3.8.1 3.8.1 布局属性布局属性lfloatfloat：浮动方向浮动方向lclearclear：是否允许紧贴浮动元素是否允许紧贴浮动元素ldisplay:display:是否及如何显示元素是否及如何显示元素lvisibility:visibil
37、ity:是否可见是否可见loverflowoverflow:溢出处理溢出处理lclip:clip:裁剪裁剪lcursor:cursor:鼠标指针类型鼠标指针类型中山大学计算机科学系2022-12-24373.8.2 3.8.2 浮动与清除浮动与清除l浮动元素浮动元素u定义：其定义：其 float float 属性值为属性值为 left left 或或 rightrightu效果：浮动元素将脱离常规文档流，但仍然处于其包含效果：浮动元素将脱离常规文档流，但仍然处于其包含块内，向左或右移动，直到外边缘碰到第块内，向左或右移动，直到外边缘碰到第1 1个块级祖先元个块级祖先元素（或包含块元素）的边框或
38、另一个浮动元素的边框为止素（或包含块元素）的边框或另一个浮动元素的边框为止l清除浮动元素清除浮动元素u方法：设置方法：设置 clear clear 属性（属性（leftleft、right right 或或 bothboth）u效果：阻止该元素向上移动到浮动元素旁边效果：阻止该元素向上移动到浮动元素旁边l用途：用途：u设置文本环绕图像效果设置文本环绕图像效果u创建多列布局创建多列布局中山大学计算机科学系2022-12-24383.8.2 3.8.2 浮动与清除浮动与清除l例例3.223.22中山大学计算机科学系2022-12-24393.8.3 3.8.3 显示和隐藏显示和隐藏l控制元素显示和
39、隐藏的方法控制元素显示和隐藏的方法u显示元素显示元素 将将 display display 属性设置为属性设置为 inlineinline（或（或 blockblock），从而将块级），从而将块级元素显示为行内元素（或相反）元素显示为行内元素（或相反）u隐藏元素隐藏元素 将将 display display 属性设置为属性设置为 nonenone，不占用任何显示空间，不占用任何显示空间 将将 visibility visibility 属性设置为属性设置为 hiddenhidden，仍然保留原显示空间，仍然保留原显示空间l例例3.233.23中山大学计算机科学系2022-12-24403.8.
40、4 3.8.4 溢出与剪裁溢出与剪裁l溢出溢出：是指元素内容区中的实际内容大小超出指：是指元素内容区中的实际内容大小超出指定的元素内容区大小。定的元素内容区大小。l处理方法处理方法u使用使用 overflow overflow 属性指定溢出内容的显示方式属性指定溢出内容的显示方式u使用使用 clip clip 属性剪裁元素的实际内容属性剪裁元素的实际内容l例例3.243.24中山大学计算机科学系2022-12-24413.8.5 3.8.5 鼠标形状鼠标形状lcursor cursor 属性属性：当鼠标移动到不同的元素对象时，：当鼠标移动到不同的元素对象时，鼠标将显示为指定的形状或图案。值为鼠
41、标将显示为指定的形状或图案。值为urlurl、defaultdefault、autoauto、crosshaircrosshair、pointerpointer、movemove、*-resizeresize、texttext、waitwait、helphelp等等l例例3.253.25中山大学计算机科学系2022-12-24423.9 3.9 列表样式列表样式3.9.1 CSS 3.9.1 CSS 列表属性列表属性l作用：作用：设置列表中列表项标记的显示格式设置列表中列表项标记的显示格式l列表属性列表属性ulist-style-type list-style-type 标记类型，取值为标记类
42、型，取值为nonenone、discdisc、circlecircle、squaresquare、decimaldecimal、lower-romanlower-roman等等ulist-style-positionlist-style-position 标记位置，取值为标记位置，取值为outsideoutside、insideinsideulist-style-image list-style-image 图像标记，取值为图像标记，取值为 urlurl或或 nonenonel例例3.263.26中山大学计算机科学系2022-12-24433.9.2 3.9.2 内容生成属性内容生成属性lco
43、ntent content 属性属性称为内容生成属性，称为内容生成属性，必须与伪元必须与伪元素素 :befor:befor 或或 :after:after 配合使用，其常用值形式：配合使用，其常用值形式：stringstring、url(URL)url(URL)、attr(X)attr(X)、计数器、计数器countercounterl例例3.273.27中山大学计算机科学系2022-12-24443.9.3 3.9.3 自定义编号自定义编号l通过通过配合使用配合使用 contentcontent、counter-reset counter-reset 和和 counter-increment
44、 counter-increment 属性，可以控制列表编号属性，可以控制列表编号ucounter-resetcounter-reset：计数器复位计数器复位ucounter-incrementcounter-increment：计数器增加计数器增加l例例3.283.28中山大学计算机科学系2022-12-24453.9.4 3.9.4 多级编号多级编号l两种方法：两种方法：u使用多计数器生成多级编号，常用于各级标题使用多计数器生成多级编号，常用于各级标题u使用单计数器生成多级编号，常用于多级列表使用单计数器生成多级编号，常用于多级列表l例例3.29 3.29 多计数器多计数器中山大学计算机科
45、学系2022-12-24463.9.4 3.9.4 多级编号多级编号l例例3.30 3.30 单计数器单计数器中山大学计算机科学系2022-12-24473.10 3.10 表格制作表格制作3.10.1 3.10.1 制作常规表格制作常规表格l表格标签表格标签:、l标签属性标签属性：widthwidth、borderborder、cellspacingcellspacing、cellpaddingcellpaddingl、和和 标签的常用属性标签的常用属性:abbr:abbr、alignalign、valignvalign、colspancolspan、rowspanrowspanl例例3.3
46、13.31中山大学计算机科学系2022-12-24483.10.2 3.10.2 表格行分组表格行分组l分组标签分组标签，同时使用，同时使用u：页眉，即表头页眉，即表头u：表体表体u：表脚表脚l分组好处分组好处：u打印时，的表头和表脚将出现在每页打印时，的表头和表脚将出现在每页u可以按分组方式设置表格行的显示格式可以按分组方式设置表格行的显示格式l例例3.323.32中山大学计算机科学系2022-12-24493.10.3 3.10.3 将其他元素显示为表格将其他元素显示为表格l方法：方法：在在 CSS CSS 样式定义中，为相关元素指定特殊样式定义中，为相关元素指定特殊的的 display
47、display 属性值属性值utabletable类似类似 utable-row table-row 类似类似 utable-cell table-cell 类似类似 和和 l例例3.333.33中山大学计算机科学系2022-12-24503.10.4 CSS 3.10.4 CSS 表格属性表格属性lCSS CSS 表格属性用于表格属性用于设置表格的布局，设置表格的布局，包括包括caption-sidecaption-side、table-layouttable-layout、border-collapseborder-collapse、border-spacingborder-spacing
48、、empty-cellsempty-cellsl例例3.34 3.34 l例例3.35 3.35 中山大学计算机科学系2022-12-24513.11 3.11 页面布局页面布局lCSS CSS 页面布局技术页面布局技术l表格布局技术表格布局技术l框架布局技术框架布局技术中山大学计算机科学系2022-12-24523.11.1 3.11.1 页面布局版式页面布局版式l页面布局是对页面内容的总体排版格式页面布局是对页面内容的总体排版格式。通常，。通常，分成分成3 3个区域：个区域：u页眉区页眉区u主体区主体区u页脚区页脚区l多栏布局多栏布局：将主体区分成多列，典型：将主体区分成多列，典型3 3种
49、种中山大学计算机科学系2022-12-24533.11.2 CSS 3.11.2 CSS 页面布局技术页面布局技术一、概述一、概述l定义：定义：是指使用是指使用 CSS CSS 样式对页面元素进行布局、样式对页面元素进行布局、定位的技术，也称定位的技术，也称 CSS-PCSS-P、DIV+CSSDIV+CSSl两种方法：两种方法：u绝对定位布局：使用绝对定位布局：使用 position position 属性属性u浮动布局：使用浮动布局：使用 float float 属性属性l步骤：步骤：1 1、确定页面版式、确定页面版式2 2、使用、使用 DIV DIV 元素标记各个分栏元素标记各个分栏3
50、3、为各个分栏添加内容、为各个分栏添加内容4 4、对各个分栏进行定位、布局、对各个分栏进行定位、布局中山大学计算机科学系2022-12-24543.11.2 CSS 3.11.2 CSS 页面布局技术页面布局技术二、二、CSS CSS 绝对定位布局示例绝对定位布局示例l例例3.36 3.36 制作制作3 3栏布局的页面栏布局的页面中山大学计算机科学系2022-12-24553.11.2 CSS 3.11.2 CSS 页面布局技术页面布局技术三、三、CSS CSS 浮动布局示例浮动布局示例l例例3.37 3.37 CSS CSS 浮动布局浮动布局四、使用四、使用 CSS CSS 模板模板lCSS
