网页制作第六章(样式表).pptVIP

样式表 第 六 章 回顾 识别 Dreamweaver 工作区的不同组件 使用 Dreamweaver 设计网页 使用表格 创建层 使用表单 在网页上应用多媒体 目标 了解 DHTML 样式表 什么是样式表 为什么要使用样式表 样式表的语法规则 创建并使用样式表 DHTML简介 什么是DHTML DHTML是一个用动态内容描述HTML页面的术语，它包括HTML、CSS和JavaScript技术，这三种技术通过文档对象模型（DOM）融合在一起。 使用DHTML技术，在客户端就可以动态地操纵数据或改变页面内容，产生动态效果，还可以达到一定的与用户交互的效果。 DHTML 的功能 动态样式 动态内容 定位 绝对位置 相对位置 数据绑定 可下载字体 脚本 对象结构 样式表简介 什么是样式表 用于描述文档如何在屏幕上显示 W3C推荐的样式表标准包括CSS和XSL CSS主要用于HTML XSL主要用于XML CSS是一种用来装饰HTML的标记集合，是对HTML标记的一种扩展，可以进一步美化HTML页面 样式表的作用 覆盖浏览器 页面布局 可以重用 多个文档可以链接到一个样式表 样式表规则 样式规则 样式表 规则 样式表中的选择器 简单选择器(仅描述元素，而不考虑该元素在文档结构中的位置) HTML选择器--选择器是HTML标记的名称 类选择器—使用HTML元素的CLASS属性 ID选择器—使用HTML元素的ID属性 上下文选择器(引用元素的上下文) HTML选择器示例 HTML HEAD STYLE TYPE=text/css P{font-style:italic; font-weight:bold; color:limegreen} /STYLE /HEAD Body P这些选择器使用HTML元素的名称唯一的区别是删除了尖括号。/P /BODY /HTML 类选择器示例 ID选择器示例 HTML HEAD TITLEID选择器/TITLE STYLE TYPE=text/css #control {color:red} /STYLE /HEAD BODY P id=control这是火焰的颜色/P BR P本段没有应用样式/P /BODY /HTML 上下文选择器示例 HTML HEAD TITLE上下文选择器/TITLE STYLE TYPE=text/css BODY {color:blue;background:lavender;font-family:Arial;} UL {color:red } /STYLE HEAD BODY ULLI芒果LI桔子LI苹果/UL OLLI芒果LI桔子LI苹果 /OL /BODY /HTML 在HTML中引用样式表 Style元素 Style属性 Link元素 使用Style元素 STYLE元素应插入文档的HEAD元素部分中，所有规则都放置在开始标记和结束标记之间。显示页面时，只有嵌入了STYLE元素的文档会受到影响 使用Style属性－－内嵌样式表 style属性用于将样式表应用于单个元素。直接将在HTML标记里加入style参数，而style参数的内容就是CSS的属性和值。样式表可以只有一条规则。使用Style属性，可以绕过Style元素，而将声明直接放入单个的开始标记中。 使用Link元素－－链入外部样式表 链入外部样式表是把样式表保存为一个样式表文件，然后在页面中用link标记链接到这个样式表文件，这个link标记必须放到页面的head区内 样式表属性 2-1 样式表属性 2-2 总结 DHTML 什么是DHTML DHTML的优点 样式表 什么是样式表 为什么要使用样式表 样式表的语法规则 创建并使用样式表 用法： RuleSelector {property:value;property: value; ... } 规则选择器 声明 属性 属性值 HTML选择器示例 HTML HEAD STYLE TYPE=text/css .water { color:blue } .danger { color:red } /STYLE /HEAD BODY P class=water测试水/P P class=danger测试危险/P P无样式/P BR EM class=danger斜体/EM /BODY /HTML 类选择器示例 ID选择器示例 上下文选择器示例 STYLE TYPE=text/css H1 {color:maroon;} P {color:ho