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
显示全部