第07讲 使用CSS显示XML

XML应用开发第07讲使用CSS显示XML目标知识目标CSS文档结构CSS引用形式CSS选择符和属性能力目标学会编写CSS文档学会使用CSS属性格式化显示XML任务任务1：XML中引用CSS任务2：CSS选择符的使用任务3：CSS文本属性的使用任务4：CSS容器属性的使用任务5：CSS布局属性的使用CSS（级联样式单）简介百科名片：CSS是CascadingStyleSheet的缩写。译作「层叠样式表单」。是用于（增强）控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。CSS也可以利用简单的规则来控制XML元素在浏览器中的显示方式。CSS语法格式选择符 {

属性1:属性值1;

属性2:属性值2；

……}title{ font-family:Arial,sans-serif;/*字体*/ font-size:24px;/*字号*/ color:#369;/*前景色*/}<title>XML案例教程</title>任务1：XML中引用CSS任务1-1：XML内部CSS引用任务1-2：XML外部CSS引用任务1-3：使用@import指令任务1-1：内部CSS引用<?xmlversion="1.0"encoding="UTF-8"?><?xml-stylesheettype="text/css"?><Bookxmlns:html="/Profiles/XHTML-transitional">

<html:style> title{ font-family:Arial,sans-serif; font-size:24px; color:#369;

} </html:style> <title>XML案例教程</title></Book>说明1.内部CSS引用的语法格式：<html:style>CSS样式指令</html:style>说明2.需要在根元素中声明html命名空间：xmlns:html=/Profiles/XHTML-transitional，因为要使用该命名空间里的元素<style>定义CSS。

说明3.需要在指令区添加指令：<?xml-stylesheettype=“text/css”?>指明使用CSS显示XML文档。任务1-2：外部CSS引用title{ font-family:Arial,sans-serif;/*字体*/ font-size:24px;/*字号*/ color:#369;/*前景色*/}<?xmlversion="1.0"encoding="UTF-8"?><?xml-stylesheettype="text/css"href=“title.css"?><Book> <title>XML案例教程</title></Book>title.csstitle.xmlXML文档本身不含有样式信息，可以通过引用外部独立的CSS文件定义文档的表现形式。样式显示的优先级1、当全局样式与局部样式冲突时，局部样式优先。t1.csst1.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.css@importurl(“title.css");title{color:red;padding-bottom:4px;border-bottom:1pxsolid#999;}title-import.css<?xmlversion="1.0"encoding="UTF-8"?><?xml-stylesheettype="text/css"href=“title-import.css"?><Book> <title>XML案例教程</title></Book>说明@import指令可以将多个CSS文件合并，@import指令只能在CSS文件中使用，指令以“；”结束。语法

格式：@importurl(“CSS文件路径”);当多个CSS文件嵌套时，若对同一元素的同一属性设置有冲突，则最后包含@import指令的CSS文件中的设置优先。训练1XML文档如下：<?xmlversion="1.0"encoding="UTF-8"?><Movie> <Title>翼</Title> <Company>出品：美国派拉蒙影片公司</Company> <Year>年份：1927</Year> <Director>导演：威廉.A.韦尔曼</Director></Movie>编写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-family:Arial,sans-serif;}任务2-2：ID选择符#b1{ font-family:Arial,sans-serif; font-size:24px; color:blue;}<?xmlversion="1.0"encoding="UTF-8"?><?xml-stylesheettype="text/css"href=“title-id.css"?><Book> <titleID="b1">XML案例教程</title> <publisherID="b2">清华大学出版社</publisher> <authorID="b1">郭永洪</author></Book>任务2-3：类选择符.b1{ font-family:Arial,sans-serif; font-size:24px; color:#369;}<?xmlversion="1.0"encoding="UTF-8"?><?xml-stylesheettype="text/css"href=“title-class.css"?><Book> <titleclass="b1">XML案例教程</title> <publisherclass="b2">清华大学出版社</publisher> <authorclass="b1">郭永洪</author></Book>.b1,author,publisher{ font-family:Arial,sans-serif; font-size:24px; color:yellow;}任务2-4：选择符分组多个选择符应用相同样式，用“，”分割合并为一组。<?xmlversion="1.0"encoding="UTF-8"?><?xml-stylesheettype="text/css"href=“group.css"?><Book>

<titleclass="b1">XML案例教程</title> <author>郭永洪</author> <publisher>西安电子科技大学出版社</publisher></Book>任务2-5：包含选择符name,.b1,publisher{ font-family:Arial,sans-serif; font-size:24px; color:blue;}publishername{ color:red; font-size:36px; border-bottom:1pxsolid#999;}<?xmlversion="1.0"encoding="UTF-8"?><?xml-stylesheettype="text/css"href="T3.css"?><Book> <name>XML案例教程</name> <authorclass="b1">郭永洪</author> <publisher>

<name>西安电子科技大学出版社</name> <phone>lt;/phone> </publisher></Book>可以设置父元素下某些子元素的个性样式，使用时父元素在前，子元素在后，中间用空格隔开训练2XML文档如下：<?xmlversion="1.0"encoding="UTF-8"?><Movie> <Titleid="id1">翼</Title><Type>类型：戏剧</Type> <Rating>级别：G</Rating> <Review>评价指数：5</Review> <Companyclass="c1">出品：美国派拉蒙影片公司</Company> <Yearclass="c1">年份：1927</Year> <Director>导演：威廉.A.韦尔曼</Director> </Movie>编写CSS文件显示XML数据，要求：1、使用ID选择符显示片名“翼”，字体Arial，字号50px，颜色红色red；2、使用类选择符显示类属性值为c1的元素，字体Arial，字号40px，颜色绿色green；3、使用包含选择符显示Movie的子元素Director，字体Arial，字号10px，颜色蓝色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：使用显示属性displaydisplay:none：用于隐藏元素，使元素在页面中不可见。display:block：将元素显示在块中，块级元素通过换行与其他元素分隔(不同块级元素占不同行)。display:inline：元素内容紧接在前一元素内容之后(与前一元素在同一行)。案例3-1：display属性及框架CSS文件的使用<?xmlversion="1.0"encoding="UTF-8"?><?xml-stylesheettype="text/css"href="bookFramework.css"?><Book> <title>软件工程</title> <author>邓良松</author> <publisher> <name>西安电子科技大学出版社</name> <address>陕西西安大学路88号</address> <phone>lt;/phone> </publisher>

<abstract>本书比较系统全面地介绍了软件工程n方法、面向对象开发方法。全书共16章。概述了软件工程、各种生存周期模型和开发方法......</abstract> <price>22.2元</price></Book>Test.xmlBook{font-family:Arial,sans-serif;font-size:24px;color:blue;}T1.cssBook{ display:block;}title,abstract,price{ display:block;}author{

display:none;}publisher{ display:inline;}T2.css@importurl("T1.css");@importurl("T2.css");bookFramework.css案例3-1：display属性及框架CSS文件的使用先设置一个框架CSS文件bookFramework.css，在框架文件中使用“@import”指令将外部所需的CSS文件引入到框架文件。采用框架设计方式将不同的CSS属性分文件保存，当增加新的CSS属性时，不需修改原来的CSS文件，只需建一个新的CSS文件，并将新文件引用到框架文件即可。任务3-2：使用字体属性fontfont-family：指定字体名称，使用逗号分隔字体名称。font-style：设置字体样式，normal(正常)、italic(斜体)和oblique(倾斜体)。font-size：设置字体中典型字符的字高和字宽。font-weight：设置字体粗细。line-height：设置字高。任务3-3：设置前景色和背景色color属性：设置XML文档元素的前景色。color属性值可以是名称、十进制、十六进制或百分数RGB的颜色值。background-color属性：设置元素内容的背景颜色，与color属性的属性值设置方式相同。color:greencolor:#FF00CC(#后的6位数若两两相等，可只写3位)color:rgb(100％,0,80％)任务3-4：使用文本修饰属性1、text-indent属性：设置元素中文本的缩进。2、text-align属性：设置元素中文本的对齐方式。left：左对齐；right：右对齐；center：居中对齐。3、vertical-align属性：设置元素内容的垂直对齐方式。top：顶对齐；middle：中对齐；bottom：底对齐。4、text-decoration属性：设置文本内容的特殊效果。line-through：加删除线；overline：加上划线；underline：加下划线；none：默认值，不加任何修饰。任务4：使用CSS容器属性盒模型：1、在元素周围增加边框（border）2、在元素与其边框之间设定空格填充（padding，即补白）3、设置边框与周围元素之间的边距（margins）。任务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边框设置边框线样式：border-style、border-top-style、border-right-style、border-bottom-style、border-left-style属性，其值分别为：none、dotted、dashed、solid、double、groove、ridge、inset和outset。设置边框线宽度：border-width、border-top-width、border-right-width、border-bottom-width和border-1eft-width五个属性。属性值为thin、medium、thick或绝对长度值。使用绝对长度值时，不能为负数，可以是0。设置边框线颜色：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.绝对定位元素根据浏览器