XML程序设计案例教程 教学课件作者 郝俊寿 模块五 使用CSS格式化XML.pptVIP

子任务4 CSS浮动 1.CSS浮动 图5-10 CSS浮动之一 05(72-102)P31 yh_Embed_18.jpg a) b) 子任务4 CSS浮动 图5-11 CSS浮动之二 图5-12 CSS浮动之三 2.CSS float属性3.行框和清理 子任务4 CSS浮动 图5-13 创建浮动框 图5-14 添加上外边距 子任务4 CSS浮动 图5-15 应用clear 任务五 CSS实例—— 英超联赛球队网页 1)理解CSS文件与XML文档之间的关系，灵活使用CSS样式表的各种方法。2)掌握CSS中确定XML元素位置的各种方法。3)掌握CSS中修饰XML元素文本内容的各种方法。4)掌握CSS中对XML元素文本进行排版的各种方法。1.确定英超球队介绍页的框架2.编写关于英超联赛球队的XML文档3.添加处理指令后的英超球队信息文档4.确定网页显示的位置和大小样式文件(css.css)5.在IE中打开Exp5_2.xml 学 材 小 结  习 题 1.什么是CSS？它的作用是什么？2.如何使用内部CSS和外部CSS？3.请使用CSS对下面的XML文档进行格式化，使其包含各个影片信息，并在IE中以列表方式显示。 任务一 了解CSS任务三 CSS框模型任务四 CSS定位任务五 CSS实例—— 英超联赛球队网页学 材 小 结习 题 任务一 了解CSS 子任务1 CSS概述子任务2 样式解决了一个普遍的问题子任务3 样式表极大地提高了工作效率子任务4 多重样式将层叠为一个任务二 CSS的基本语法子任务1 CSS语法子任务2 如何创建CSS子任务3 CSS背景子任务4 CSS文本子任务5 CSS字体子任务6 CSS列表 任务一 了解CSS 子任务7 CSS表格子任务8 CSS轮廓 子任务1 CSS概述 1)样式定义如何显示HTML元素。2)样式通常存储在样式表中。3)把样式添加到HTML 4.0中，是为了解决内容与表现分离的问题。4)外部样式表可以极大提高工作效率。5)外部样式表通常存储在CSS文件中。6)多个样式定义可层叠为一。 子任务2 样式解决了一个普遍的问题  子任务3 样式表极大地提高了工作效率  子任务4 多重样式将层叠为一个 1)浏览器默认设置。2)外部样式表。3)内部样式表(位于head标签内部)。4)内联样式(在HTML元素内部)。 子任务1 CSS语法 1.值的不同写法和单位 2.引号的使用3.多重声明4.空格和大小写敏感5.选择器的分组6.派生选择器7.id选择器 8.CSS类选择器 子任务2 如何创建CSS 1.外部样式表2.内部样式表3.内联样式4.多重样式 子任务3 CSS背景 1.背景色2.背景图像3.背景重复4.背景定位5.关键字表5-1 等价的位置关键字 表5-1 等价的位置关键字 6.百分数值 子任务3 CSS背景 7.长度值 8.背景关联9.CSS背景属性(见表5-2)表5-2 CSS背景属性 表5-2 CSS背景属性 子任务4 CSS文本 表5-3 CSS文本属性 表5-3 CSS文本属性 子任务5 CSS字体 表5-4 CSS字体属性 表5-4 CSS字体属性 子任务6 CSS列表 表5-5 CSS列表属性 表5-5 CSS列表属性 子任务7 CSS表格 表5-6 CSS表格属性 表5-6 CSS表格属性 子任务8 CSS轮廓 表5-7 CSS轮廓属性 表5-7 CSS轮廓属性 任务三 CSS框模型 子任务1 CSS框模型概述子任务2 CSS内边距子任务3 CSS边框子任务4 CSS外边距子任务5 CSS外边距合并 子任务1 CSS框模型概述 1.框模型概述 图5-1 框模型 子任务1 CSS框模型概述 图5-2 元素框尺寸的改变 1)内边距、边框和外边距可以应用于一个元素的所有边，也可以应用于单独的边。 子任务1 CSS框模型概述 2)外边距可以是负值，而且在很多情况下都要使用负值的外边距。2.浏览器兼容性3.术语翻译(1)element 元素。(2)padding 内边距，也有资料将其翻译为“填充”。(3)border 边框。(4)margin 外边距，也有资料将其翻译为“空白”或“空白边”。 子任务2 CSS内边距 表5-8 CSS内边距属性 表5-8 CSS内边距属性 子任务3 CSS边框 表5-9 CSS边框属性 表5-9 CSS边框