第07讲 使用CSS显示XML

1、软件学院软件学院常州信息职业技术学院常州信息职业技术学院第07讲 使用CSS显示XML软件学院软件学院常州信息职业技术学院常州信息职业技术学院目标 知识目标CSS文档结构CSS引用形式CSS选择符和属性 能力目标学会编写CSS文档学会使用CSS属性格式化显示XML软件学院软件学院常州信息职业技术学院常州信息职业技术学院任务 任务1：XML中引用CSS 任务2：CSS选择符的使用 任务3：CSS文本属性的使用 任务4：CSS容器属性的使用 任务5：CSS布局属性的使用软件学院软件学院常州信息职业技术学院常州信息职业技术学院CSS（级联样式单）简介 百科名片：CSS是Cascading Style

2、 Sheet 的缩写。译作层叠样式表单。是用于（增强）控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。CSS也可以利用简单的规则来控制XML元素在浏览器中的显示方式。软件学院软件学院常州信息职业技术学院常州信息职业技术学院CSS语法格式选择符选择符 属性属性1:1:属性值属性值1;1; 属性属性2:2:属性值属性值2 2； title font-family:Arial,sans-serif; / * 字体 */font-size:24px; /* 字号 */color:#369; /* 前景色 * /XML案例教程软件学院软件学院常州信息职业技术学院常州信息职业技术学院任务1：X

3、ML中引用CSS任务1-1：XML内部CSS引用任务1-2：XML外部CSS引用任务1-3：使用import指令软件学院软件学院常州信息职业技术学院常州信息职业技术学院任务1-1：内部CSS引用title font-family:Arial,sans-serif;font-size:24px;color:#369;XML案例教程说明说明1. 1. 内部CSS引用的语法格式： CSS样式指令说明说明2. 2. 需要在根元素中声明html命名空间：xmlns:html=/Profiles/XHTML-transitional，因为要使用该命名空间里的元素定义CSS。

4、说明说明3. 3. 需要在指令区添加指令：指明使用CSS显示XML文档。软件学院软件学院常州信息职业技术学院常州信息职业技术学院任务1-2：外部CSS引用title font-family:Arial,sans-serif; / * 字体 */font-size:24px; /* 字号 */color:#369; /* 前景色 * /XML案例教程title.csstitle.xmlXML文档本身不含有样式信息，可以通过引用外部独立的CSS文件定义文档的表现形式。软件学院软件学院常州信息职业技术学院常州信息职业技术学院样式显示的优先级1、当全局样式与局部样式冲突时，局部样式优先。t1.csst

5、1.xml软件学院软件学院常州信息职业技术学院常州信息职业技术学院样式显示的优先级2、内部CSS与外部CSS可混用，若有冲突，内部CSS样式优先。t1.xmlt1.css软件学院软件学院常州信息职业技术学院常州信息职业技术学院样式显示的优先级3、也可在XML元素中，通过设置STYLE属性创建内联样式，当内联样式与其它CSS样式冲突时， 内联样式优先。t1.xml软件学院软件学院常州信息职业技术学院常州信息职业技术学院任务1-3：使用import指令title font-family:Arial,sans-serif; font-size:24px; color:#369;title.cssim

6、port url(“title.css);title color:red; padding-bottom:4px; border-bottom:1px solid #999;title-import.cssXML案例教程软件学院软件学院常州信息职业技术学院常州信息职业技术学院说明 import指令可以将多个CSS文件合并，import指令只能在CSS文件中使用，指令以“；”结束。 语法 格式：import url(“CSS文件路径”); 当多个CSS文件嵌套时，若对同一元素的同一属性设置有冲突，则最后包含import指令的CSS文件中的设置优先。软件学院软件学院常州信息职业技术学院常州信息职业

7、技术学院训练1XML文档如下：翼出品：美国派拉蒙影片公司年份：1927导演：威廉.A.韦尔曼编写CSS文件显示XML数据(样式自定)，尝试以下三种方式引用CSS。1、在XML文档内部引用CSS；2、在使用xml-stylesheet指令引用外部CSS；3、使用import指令嵌套引用CSS。软件学院软件学院常州信息职业技术学院常州信息职业技术学院任务2：CSS选择符任务2-1：类型选择符任务2-2：ID选择符任务2-3：类选择符任务2-4：选择符分组任务2-5：包含选择符软件学院软件学院常州信息职业技术学院常州信息职业技术学院任务2-1：类型选择符XML文档中元素名称title font-fa

8、mily:Arial,sans-serif; 软件学院软件学院常州信息职业技术学院常州信息职业技术学院任务2-2：ID选择符#b1 font-family:Arial,sans-serif;font-size:24px;color:blue;XML案例教程清华大学出版社郭永洪软件学院软件学院常州信息职业技术学院常州信息职业技术学院任务2-3：类选择符.b1 font-family:Arial,sans-serif;font-size:24px;color:#369;XML案例教程清华大学出版社郭永洪软件学院软件学院常州信息职业技术学院常州信息职业技术学院.b1,author,publisher

9、 font-family:Arial,sans-serif;font-size:24px;color:yellow;任务2-4：选择符分组多个选择符应用相同样式，用“，”分割合并为一组。XML案例教程郭永洪西安电子科技大学出版社软件学院软件学院常州信息职业技术学院常州信息职业技术学院任务2-5：包含选择符name,.b1,publisher font-family:Arial,sans-serif;font-size:24px;color:blue;publisher name color:red;font-size:36px;border-bottom:1px solid #999;XML案

10、例教程郭永洪西安电子科技大学出版以设置父元素下某些子元素的个性样式，使用时父元素在前，子元素在后，中间用空格隔开软件学院软件学院常州信息职业技术学院常州信息职业技术学院训练2XML文档如下：翼 类型：戏剧级别：G评价指数：5出品：美国派拉蒙影片公司年份：1927导演：威廉.A.韦尔曼编写CSS文件显示XML数据，要求：1、使用ID选择符显示片名“翼”，字体Arial，字号50px，颜色红色red；2、使用类选择符显示类属性值为c1的元素，字体Arial，字号40px，颜色绿色green；3、使用包含选择符显示Movie的子元素Director，字体Arial，字号1

11、0px，颜色蓝色blue；4、将标记Type、Rating、Review归为一组显示，字体Arial，字号10px，颜色#0e0e0e。软件学院软件学院常州信息职业技术学院常州信息职业技术学院任务3：使用CSS文本属性任务3-1：使用显示属性display显示xml任务3-2：使用字体属性font显示xml任务3-3：设置XML前景色和背景色任务3-4：使用文本修饰属性显示XML软件学院软件学院常州信息职业技术学院常州信息职业技术学院任务3-1：使用显示属性display1.display:none：用于隐藏元素，使元素在页面中不可见。2.display:block：将元素显示在块中，块级元素

12、通过换行与其他元素分隔(不同块级元素占不同行)。3.display:inline：元素内容紧接在前一元素内容之后(与前一元素在同一行)。软件学院软件学院常州信息职业技术学院常州信息职业技术学院案例3-1：display属性及框架CSS文件的使用软件工程邓良松西安电子科技大学出版社陕西西安大学路88书比较系统全面地介绍了软件工程n方法、面向对象开发方法。全书共16章。概述了软件工程、各种生存周期模型和开发方法.22.2元Test.xmlBook font-family:Arial,sans-serif; font-size:24px; color:blue;T1.cs

13、s软件学院软件学院常州信息职业技术学院常州信息职业技术学院Book display:block;title,abstract,pricedisplay:block;author display:none;publisherdisplay:inline;T2.cssimport url(T1.css);import url(T2.css);bookFramework.css案例3-1：display属性及框架CSS文件的使用先设置一个框架框架CSSCSS文件文件bookFramework.css，在框架文件中使用“import”指令将外部所需的CSS文件引入到框架文件。采用框架设计方式将不同的C

14、SS属性分文件保存，当增加新的CSS属性时，不需修改原来的CSS文件，只需建一个新的CSS文件，并将新文件引用到框架文件即可。软件学院软件学院常州信息职业技术学院常州信息职业技术学院任务3-2：使用字体属性font1.font-family：指定字体名称，使用逗号分隔字体名称。2.font-style：设置字体样式，normal(正常)、italic(斜体)和oblique(倾斜体)。3.font-size：设置字体中典型字符的字高和字宽。4.font-weight：设置字体粗细。5.line-height：设置字高。软件学院软件学院常州信息职业技术学院常州信息职业技术学院任务3-3：设置前景

15、色和背景色1. color属性：设置XML文档元素的前景色。color属性值可以是名称、十进制、十六进制或百分数RGB的颜色值。2. background-color属性：设置元素内容的背景颜色，与color属性的属性值设置方式相同。 color:green color:#FF00CC (#后的后的6位数若两两相等，可只写位数若两两相等，可只写3位位)color:rgb(100,0,80) 软件学院软件学院常州信息职业技术学院常州信息职业技术学院任务3-4：使用文本修饰属性1、text-indent属性：设置元素中文本的缩进。2、text-align属性：设置元素中文本的对齐方式。 left：

16、左对齐；right：右对齐；center：居中对齐。3、vertical-align属性：设置元素内容的垂直对齐方式。 top：顶对齐；middle：中对齐；bottom：底对齐。4、text-decoration属性：设置文本内容的特殊效果。 line-through：加删除线；overline：加上划线；underline：加下划线；none：默认值，不加任何修饰。软件学院软件学院常州信息职业技术学院常州信息职业技术学院任务4：使用CSS容器属性盒模型：1、在元素周围增加边框（border）2、在元素与其边框之间设定空格填充（padding，即补白）3、设置边框与周围元素之间的边距（mar

17、gins）。软件学院软件学院常州信息职业技术学院常州信息职业技术学院任务4：使用CSS容器属性任务4-1：设置XML页边距任务4-2：设置XML边框任务4-3：补白（空格填充）软件学院软件学院常州信息职业技术学院常州信息职业技术学院任务4-1：设置XML页边距1、margin-top：设置上页边距2、margin-bottom：设置下页边距3、margin-left：设置左页边距4、margin-right：设置右的页边距5、margin：设置四边页边距软件学院软件学院常州信息职业技术学院常州信息职业技术学院任务4-2：设置XML边框1. 设置边框线样式：border-style、 borde

18、r-top-style、 border-right-style、 border-bottom-style、 border-left-style属性，其值分别为：none、dotted、dashed、solid、 double、groove、ridge、inset和outset。 2. 设置边框线宽度：border-width、border-top-width、border-right-width、 border-bottom-width和border-1eft-width五个属性。属性值为thin、medium、thick或绝对长度值。使用绝对长度值时，不能为负数，可以是0。 3. 设置边框线

19、颜色：border-color、border-top-color、border-right-color、 border-bottom-color和border-left-color五个属性。 软件学院软件学院常州信息职业技术学院常州信息职业技术学院任务4-3：补白（空格填充）指定边框和内部元素的间距，可以使用padding、padding-top、padding-right、padding-bottom和padding-left五个属性来指定，属性值为绝对长度或父元素宽度的百分比。 软件学院软件学院常州信息职业技术学院常州信息职业技术学院任务5：使用CSS布局属性任务5-1：元素绝对定位和相对定位任务5-2：设置元素大小任务5-3：环绕文本任务5-4：插入图片软件学院软件学院常州信息职业技术学院常州信息职业技术学院任务5-1：绝对定位和相对定位1. 绝对定位元素根据浏览器或父元素左上角的边缘开始计算定位数值 ，其周围元素不受影响。如：控制左移和上移用left,top，反之则用right,bottomposition:absolute;left:100px;top:20px;2. 相对定位元素根据自己原始位置作相对位移，其周围元素不受影响。如：控制左移和上移用left,top，反之则用right,bottomposition:relative;left:100