补充2：CSS与XML.pptVIP

第5章 CSS与XML 5.1 DHTML 传统的HTML页面，一旦被下载到客户端浏览器，就无法改变显示内容，被称为静态网页。 DHTML将页面内容对象化，应用编程语言（如C++、JavaScript、VBScript）控制页面上的对象； 单击页面上的对象，不必通过服务器就可以与用户交互信息，更新网页内容，所以被称为动态网页。 2. DHTML基本结构 图5.1 DHTML的组成 5.1.2 DHTML应用案例 例5.1：本案例在Web页面中隐藏了两个对象，使用JavaScript脚本语言控制这两个对象。单击页面上的一段文字，即可使其中MyNewtext对象的文字或隐或显；把鼠标在Mytext对象的文字上游移，可使该对象文字变化颜色。 5.2 CSS 级联样式表 5.2.1 CSS概述 5.2.2 CSS样式文件应用结构 5.2.3定义样式的基本格式 1. CSS定义 2. CSS属性 5.2.4样式表应用 1. 直接定义HTML标记中的style属性 3. 嵌入外部样式表 4. 链接外部样式表 5.2.5样式表应用案例 1. 直接定义HTML标记中的style属性 2. 定义内部样式表 3. 嵌入外部样式表 4. 链接外部样式表 5.2.6页面定位功能 5.2.1 CSS概述 CSS用于定义Web页面内容在浏览器中的显示方式 通过CSS可以设定很多属性，如字号、颜色、页边距、元素在页面上的绝对位置等 h2font color=red你好！/h2 CSS的作用：把网页展现的样式从网页中独立出来管理，如果需要改变样式，只需要改变样式设定部分，HTML文件不需要更改 5.2.2 CSS样式文件应用结构 图5.4样式文件应用结构 5.2.3定义样式的基本格式 1. CSS定义 2. CSS属性 1. CSS定义 定义样式的基本格式是： 选择符 {规则} 例如，h1 {color:bule;} 选择符：样式要套用的对象，一般是HTML标记 规则：样式设定的内容，是用{ }括起来的部分 2. CSS属性 2. CSS属性 2. CSS属性 2. CSS属性 5.2.4样式表应用 1. 直接定义HTML标记中的style属性 2. 在HTML内部定义内部样式表 3. 嵌入外部样式表 4. 链接外部样式表 1. 直接定义HTML标记中的style属性 语法： HTML 标记名称 style =“样式属性1:属性值1;样式属性2:属性值2;…” 2. 在HTML内部定义内部样式表 语法： style type=“text/css” !-- 选择符A1,选择符A2,…{样式属性1:属性值1;样式属性2:属性值2;…} 选择符A1,选择符A2,…{样式属性1:属性值1;样式属性2:属性值2;…} … -- /style CSS选择符有3种：HTML标记名称、class选择符和id选择符，定义与使用见下表： 2. 在HTML内部定义内部样式表 图5.5选择符的应用 2. 在HTML内部定义内部样式表 例5.2 本例说明选择符的应用。 3. 嵌入外部样式表 语法： style type=“text/css” !-- @ import url(“外部样式表文件名”); (可以定义其他的CSS属性) -- /style 4. 链接外部样式表 语法： link type=“text/css” rel=stylesheet href=“外部样式文件名” 5.2.5样式表应用案例 1. 直接定义HTML标记中的style属性 2. 定义内部样式表 3. 嵌入外部样式表 4. 链接外部样式表 1. 直接定义HTML标记中的style属性 例5.3：直接在HTML标记中插入style属性，只能控制该处的样式。 2. 定义内部样式表 例5.4：本例说明定义内部样式表的应用，代码清单如下： 3. 嵌入外部样式表 例5.5：本例将建立两个样式文件，style1.css文件保存文字的颜色，style2.css保存文字的其他样式。 样式文件style1.css文件的代码清单如下： h1 { text-align:center; font-style:italic; font-family:隶书; font-size:x-large; } 样式文件style2.css文件的代码清单如下： h1{ color:green; } 4. 链接外部样式表 例5.6：链接外部样式文件的HTML文件的代码清单如下 5.2.6页面定位功能 页面定位是指可以精确地将一个网页元素定位在页面的某一个位置，CSS中几个页面定位元素说明如下： 1) positio