Web程序设计(第4版)_第4章.ppt

4.2.5 div标记 div是HTML 3.2版就有的标记，是一个块级元素。 div和/div之间可以包含段落、标题、表格等其他块级元素。div将其中包含的内容形成一个独立段落。 div在HTML 3.2中只有属性align，HTML 4.0新增了class、id、style属性。 div与span的功能基本相同，区别在于div是块级元素，而span是行元素；另外，div可包含span，反之则不行。 4. 2 相关标记和属性 4. 3 样式的继承和作用顺序 4.3.1 样式的继承 例： htmlheadtitle样式继承/title style type=text/css !- - h2 { color:red;} -- /style/head bodyh2uDIV/u/strong标记的作用/h2/body/html 样式继承的概念：将包含其他标记的标记称为父标记，则被包含的标记就是子标记，子标记将继承父标记的样式。 4.3.1 样式的继承 特殊继承：相对值继承方式，即以百分比继承。 例如： style p.class1 {font-size:12pt;} p.class2 {font-size:200%}图5-4 样式的相对值继承示例 p.class3 {font-size:100%} /style 若在body部分有以下语句： p class=class1第一段/p p class=class2第二段/p p class=class3第三段/p 4. 3 样式的继承和作用顺序 4.3.2 样式的作用顺序 样式的作用域：指对一个标记究竟哪个样式起作用。 例如： htmlheadtitle样式的作用顺序/title style type=text/css p { color:red; font-size:22pt;} p.c1{color:green; font-size:12pt; } p {font-size:16pt;text-align:center;} /style/head bodyp style=color:#ffaa66第一段/p p class=c1第二段/pp第三段/p/body/html 在这个例子中，针对p标记定义了三个样式表，对p中的文字和布局方式进行了说明。body部分共出现了三个p标记，它们分别应该应用哪个样式表呢？ 4. 3 样式的继承和作用顺序 4.3.2 样式的作用顺序 样式表的作用优先顺序遵循以下4条原则： ① 内联样式中所定义的样式优先级最高。 ② 其他样式表按其在HTML文件中出现或被引用的顺序，越在后出现，优先级越高。 ③ 选择符的作用顺序由高到低为：上下文选择符、类选择符、id选择符。 ④ 未在任何文件中定义的样式，将遵循浏览器的默认样式。 4. 3 样式的继承和作用顺序 4.3.2 样式的作用顺序 示例： htmlheadtitle样式的作用顺序/title style type=text/css p { color:red; font-size:22pt;} p.c1{color:green; font-size:12pt; } p {font-size:16pt;text-align:center;} /style/head bodyp style=color:#ffaa66第一段/p p class=c1第二段/pp第三段/p/body/html 4. 3 样式的继承和作用顺序 4. 4 CSS 属性 CSS1属性可分为： 字体属性 颜色及背景属性 文本属性 方框属性 分类属性 定位属性 4.4.1 字体属性 字体属性包括字体（font-family）、字号（font-size）、字体风格（font-style）、字体加粗（font-weight）、字体变化（font-variant）及字体综合设置（font）等属性。 字体属性的含义明确，使用简单。 4. 4 CSS 属性 4. 4 CSS属性 4.4.1 字体属性 【例4-4】CSS字体属性用法示例。 htmlheadtitle字体样式示例/title style type=text/css body {font-family:宋体,隶书;} 图5-6 CSS的字体属性示例 p {font-size:16pt;} p.weight_1{font-weight:100;} p.weight_9{font-weight:900;} p.fo