XML 第05讲 使用CSS显示XML.

Presentation on theme: "XML 第05讲 使用CSS显示XML."— Presentation transcript:

1 XML 第05讲 使用CSS显示XML

2 目标 知识目标 CSS文档结构 CSS引用形式 CSS选择符和属性 能力目标 学会编写CSS文档 学会使用CSS属性格式化显示XML

3 任务1：XML中引用CSS 任务2：CSS选择符的使用 任务3：CSS文本属性的使用 任务4：CSS容器属性的使用

4 Web标准 1. 结构标准语言 XML：用于网络数据转换和描述。 XHTML：基于XML的标识语言，是HTML向XML的过渡。
2. 表现标准语言 CSS：实现表现与结构分离。 XLST:XSLT 是首选的 XML 样式表语言。 3. 行为标准 DOM：文档对象模型，网页与脚本或程序语言沟通的桥梁。 ECMAScript：一种开放的、国际上广为接受的脚本语言规范，JavaScript 是ECMAScript 规范的一种实现。

5 StyleSheet (样式表)简介 XML 文档的特点是将数据和数据的样式进行了分离，XML文档侧重于数据的存储和传输，数据的显示需通过其它的技术来实现，即样式表。 样式表(StyleSheet)是一种专门描述结构文档表现方式的文档，是用于(增强)控制网页样式一种标记性语言。是一组规则，既可以描述这些文档如何在屏幕上显示，也可以描述它们的打印效果，甚至声音效果。

6 样式表的主要优点 XML关于文档浏览的基本思想是将数据与数据的显示样式分别定义。这样，XML格式文档不会重蹈某些HTML文档结构混杂、内容繁乱的覆辙。 XML的编写者也可以集中精力于数据本身，而不受显示方 式的细枝末节的影响。 样式描述与数据描述相分离，显示细节的描述和修改并不 影响文档中的数据及其内在结构。 一个样式表也可以应用于多个文档，仅仅改变一个样式表 文件就可以改变数百个网页的外观......

7 XML为用户提供了两种样式表 （1）CSS（Cascading Style Sheets，级联样式表亦称层叠样式表）
当一个文档的两种或多种样式发生矛盾时，执行的效果要按照“层叠规则”来判断。即如果标记的样式定义发生冲突时，最近标记的样式定义将生效。 （2）XSL（eXtensible Stylesheet Language，可扩展样式表语言 实现不同标记语言之间的转换以及与各种应用程序之间的数据交换。XSL当前的主要应用是将XML文档代码转变成HTML代码，实现XML文档在IE中的显示。

8 CSS利用简单的规则来控制HTML元素和XML元素在浏览器中的显示方式。
发布组织：W3C（万维网联盟） CSS1：1996年公布的样式语言 CSS2：1998年W3C公布了一个修订的CSS规范，包含了CSS1所有的特色和功能，并进行了完善。 CSS利用简单的规则来控制HTML元素和XML元素在浏览器中的显示方式。

9 Cascading Style Sheets
一个CSS样式表就是一组规则。每个规则给出此规则所适用的元素名称，和一组适用于此元素具体属性的值。 选择符 { 属性1:属性值1; 属性2:属性值2; …… } CSS样式表由样式规则组成, 以告诉浏览器怎样去呈现文档. CSS文档对大小写不敏感

10 CSS语法格式 <title>XML案例教程</title> 选择符 { 属性1:属性值1; 属性2:属性值2；
选择符 { 属性1:属性值1; 属性2:属性值2； …… } <title>XML案例教程</title> title { font-family:Arial,sans-serif; / * 字体 */ font-size:24px; /* 字号 */ color:#369; /* 前景色 * / }

11 book-info.XML <?xml version="1.0" encoding="gb2312"?>
<title>计算机网络教程</title> <type>计算机</type> <author>谢希仁</author> </book> <title>西游记</title> <type>文学</type> <author>吴承恩</author> </book-info>

12 book-info.XML @charset "GB2312"; book {display:block;
font-size:15pt; color:red;} title {display:block; text-align:center; background-color:#ffffbb; font-family: 楷体_GB2312; font-size:30pt; color:blue; } type,author {display:block;} @charset规则用来指定样式表使用的 字符集。要设置汉字字体必须有该 指令，否则全部为浏览器默认字体。 虽然可以出现中文，但仍然不能 使用中文的XML元素名称。

13 <?xml-stylesheet type="text/css" href="CSS样式表的URL" ?>
链接CSS和XML文档 CSS作为独立的文本文档，使用时必须和独立的DTD一样，通过指令和相应的XML文档关联起来. 语法格式为： <?xml-stylesheet type="text/css" href="CSS样式表的URL" ?> 说明： <?xml-stylesheet> ：该语句为处理指令，该指令告诉解析器显示该XML文档时使用后面属性中指定的样式表。 type属性：指定采用的样式文件的类型，对CSS样式表来说，其值为"text/css"，对XSL样式表来说，其值为"text/xsl"。 href属性：指定所引用的样式表的URL。 绝对路径： <?xml:stylesheet type="text/css" href=“c:\example\book-info.css"?> 相对路径： <?xml-stylesheet type="text/css" href="book-info.css"?>

14 案例1-1：引用CSS title { font-family:Arial,sans-serif; / * 字体 */
font-size:24px; /* 字号 */ color:#369; /* 前景色 * / } <?xml version="1.0" encoding="UTF-8"?> <?xml-stylesheet type="text/css" href=“title.css"?> <Book> <title>XML案例教程</title> </Book>

15 在CSS中引用其它的CSS文档 在CSS文档中也可以引用其它独立的CSS文档。 引用的语法为：
@import url (另一个CSS的URL ) ; url()：可选 @import url(print.css); @import "print.css"; URL可以是本地或网络上的相对路径或绝对路径： @import 指令注意事项：

16 @import 指令注意事项 1） @import 指令必须放在CSS文档的开头，即在此之前不能有其它规则
3）如果被引用的样式表中的格式与引用者中的格式冲突，则以引用者中的格式优先 4）如果引用的多个外部样式表中的格式冲突，则优先顺序即按引用的先后顺序

17 案例1-2：使用@import指令 title-import.css title.css @import url("title.css");
font-family:Arial,sans-serif; font-size:24px; color:#369; } @import url("title.css"); title { /* color:red; */ padding-bottom:4px; border-bottom:1px solid #999; } <?xml version="1.0" encoding="UTF-8"?> <?xml-stylesheet type="text/css" href=“title-import.css"?> <Book> <title>XML案例教程</title> </Book>

18 案例1-3 : @ import示例 <?xml version="1.0" encoding="gb2312" ?>
<?xml-stylesheet type="text/css" href="importsclass.css"?> <school> 软件学院 <class>信管072</class> <name>姚俊楠</name> </school> importschool.css school {display:block; font-size:20pt; color:blue; margin-top:40px } importclass.css @import url(importschool.css); Class {display:block;} Name {display:block; font-size:30pt; color:red; }

19 案例1-4 使用多个样式文件 <?xml version="1.0" encoding="gb2312" ?> <?xml:stylesheet type="text/css" href="style1.css"?> <?xml:stylesheet type="text/css" href="style2.css"?> <school> 软件学院 <class>信管072</class> <name>姚俊楠</name> </school> style1.css school {display:block; font-size:20pt; color:blue; margin-top:40px } style2.css Class {display:block;} Name {display:block; font-size:30pt; color:red; }

20 选择符{属性1: 属性值1 [;属性2: 属性值2]…]}
CSS选择符 CSS的主要功能是将某些指定的规则应用于文档中同一类型的元素。 定义CSS样式规则的语法为： 选择符{属性1: 属性值1 [;属性2: 属性值2]…]} 选择符：可以是多个元素以及其它与元素内容相关(CLASS或ID )的特殊选择符。 属性：控制元素呈现样式的特性，如显示属性、字体属性等等 book {display:block; font-size:15pt; color:red; }

21 成组选择符 name,author{display:block} name{font-size:20pt; font-family:宋体}
1. 成组选择符可以把一个规则同时应用于多个元素，各元素用逗号隔开。 例如: title,type,author {display: block; } 2. 在CSS中，可以为同一个元素指定多个规则。 name,author{display:block} name{font-size:20pt; font-family:宋体}

22 伪元素 伪元素（pseudo-element）是指将文档中通常不能作为独立元素来看待的部分作为元素来对待。常用的有两种伪元素：元素的第一行和首字母。 1．首行伪元素 首行伪元素是在元素名后加上“first-line”来选择，以创建只适用于此元素第一行的规则。如下列规则定义title元素的首行以粗体显示： title:first-line { font-weight: bold; font-style } 首行是实际显示时的元素文本的第一行。 2．首字符伪元素 首字符伪元素是用来选择一个元素的首字符， 通常用来将元素的首字符显示为下沉的大写字母效果。例如: title:first-letter { font-size: 200%; vertical-align: text-top }

23 伪元素--首行伪元素 firstline.xml firstline.css book {display:block;
<?xml version="1.0" encoding="gb2312"?> <book> <name>XML语言及应用</name> <author>华拴平</author> <price>19.00</price> <pubdate> </pubdate> </book> firstline.css book {display:block; font-size:20pt; } Book:first-line { text-decoration:underline; color:green; display:block price,pubdate{ display:block; color:blue;

24 伪类 CSS中的伪类包括first-child、:link、:visited、:active、:hover、:focus等，可以用来设置超链接等相关效果。

25 CLASS属性 使用CLASS属性（伪类）为相同元素的不同内容指定不同的格式。 在CSS中按下列格式来识别的不同对象：

26 CLASS属性 <banji class="x1" >
<banji_mc>01信管1班</banji_mc> <xuesheng> ，季慧奇，女， </xuesheng> <xuesheng> ，王燕萍，女， </xuesheng> </banji> <banji class="x2"> <banji_mc>01网络1班</banji_mc> <xuesheng> ，张明渊，男， </xuesheng> <xuesheng> ，旺建文，女， </xuesheng>

27 CLASS属性 banji.x2 { font-weight:bold; color:red; text-align:center; }
font-size:32pt;

28 <元素名 style="规则1 [; 规则2;]…]" >
使用元素的STYLE属性可以将特定元素样式直接应用在一个特定的元素上。这种样式设置方式也称为“内联样式”（inline）。 具体格式为： <元素名 style="规则1 [; 规则2;]…]" > 例如： <student style="color:purple;text-align:right;"> <number> </number> <name>张沙沙</name> <sex>女</sex> </student> 当STYLE属性的样式与CSS样式表中的样式冲突时，则STYLE属性中的样式优先，这称为“就近优先”原则。

29 样式继承与级联顺序 样式继承 如果XML文档中有一个标记没有定义样式，则该标记将使用它的父标记样式，这种机制称为样式的继承。因此,不要求为XML文档中各元素的每个可能的属性明确地定义规则。如果从父元素那里没有继承任何值，就使用默认值。 例如：没有指定子元素的字号、颜色等属性，则该元素将继承其父元素的属性，不被继承的属性一般有背景、边框等。 级联顺序 即如果标记的样式定义发生冲突时，最近标记的样式定义将生效。

30 CSS中的注释 和其他程序设计语言一样，在CSS样式表中也可以包含注释。前面已多次用到，CSS注释使用“/*…*/”符号将注释内容括起来。
注释不能嵌套。如下列段落使用了注释语句： /* 有注释的样式表段落 */ book { color: red; /*文字为红色 */ font-family:隶书; /* 字体为隶书 */ } 注意：IE浏览器对注释支持不是太好，特别是中文注释，很可能导致格式设置无效。

31 案例2-1：类型选择符 XML文档中元素名称 title { font-family:Arial,sans-serif; }

32 案例2-2：ID选择符 #b1 { font-family:Arial,sans-serif; font-size:24px;
color:#369; } <?xml version="1.0" encoding="UTF-8"?> <?xml-stylesheet type="text/css" href=“title-id.css"?> <Book> <title ID="b1">XML案例教程</title> </Book>

33 案例2-3：类选择符 .b1 { font-family:Arial,sans-serif; font-size:24px;
color:#369; } <?xml version="1.0" encoding="UTF-8"?> <?xml-stylesheet type="text/css" href=“title-class.css"?> <Book> <title class="b1">XML案例教程</title> </Book>

34 案例2-4：选择符分组 多个选择符应用相同样式，用“，”分割，并为一组。 .b1,author,publisher {
font-family:Arial,sans-serif; font-size:24px; color:#369; } <?xml version="1.0" encoding="UTF-8"?> <?xml-stylesheet type="text/css" href=“group.css"?> <Book> <title class="b1">XML案例教程</title> <author>郭永洪</author> <publisher>西安电子科技大学出版社</publisher> </Book>

35 案例2-5：包含选择符 .b1,author,publisher { font-family:Arial,sans-serif;
font-size:24px; color:#369; } Book author { color:red; font-size:36px; border-bottom:1px solid #999; <?xml version="1.0" encoding="UTF-8"?> <?xml-stylesheet type="text/css" href="containter.css"?> <Book> <title class="b1">XML案例教程</title> <author>郭永洪</author> <publisher>西安电子科技大学出版社</publisher> </Book>

36 任务3：使用CSS文本属性 任务3-1：使用显示属性display显示xml
display: none 用于隐藏元素，使元素在页面中不可见。 display: block 将元素显示在块中，块级元素通过换行与其他元素分隔。 display: inline 以内联方式显示元素，即元素内容紧接在前一元素内容之后。 注意： CSS1中默认值为block，CSS2中默认值为inline。 显示属性不继承——如果父元素被隐藏，子元素又没有设定display属性，则子元素不会被隐藏，而是以默认方式被显示。

37 任务3：使用CSS文本属性 任务3-1：使用显示属性display显示xml
display: inline-block 行内块元素。（CSS2.1 新增的值）。让一个元素具有“区块元素”的属性（可以设置width和height），又具有“内联元素”的属性（不产生换行）。 IE8开始支持这个属性。 例如 press, pubdate, price {     display: inline-block;      text-indent: 2em; }

38 任务3：使用CSS文本属性 任务3-1：使用显示属性display显示xml display: list-item以列表方式显示。
list-style-type list-style-image list-style-position list-style

39 list-style-type 列表项目符号类型
disc 默认值, 实心圆 circle : 空心圆 square : 实心方块 decimal : 阿拉伯数字 lower-roman 小写罗马数字 upper-roman 大写罗马数字 lower-alpha 小写英文字母 upper-alpha 大写英文字母 none : 不使用项目符号 Student { display: list-item; list-style-type: circle; }

40 list-style-image 列表项目符号图标，以指定的图片作为列表符号
list-style-image : none | url ( url ) Book { display: list-item; list-style-position: outside; list-style-image: url(qq.gif); color: green; font-size: 30pt; text-align: left; }

41 list-style-position 设置列表项标记如何根据文本排列。
list-style-position : outside | inside outside :默认值。列表项目标记放置在文本块以外，且环 绕文本不根据标记对齐 inside :列表项目标记放置在文本块以内，且环绕文本根据 标记对齐

42 <. xml version="1. 0" encoding="gb2312"
<?xml version="1.0" encoding="gb2312"?> <work> <title>惠通招贤榜</title> <content> <item> <head>市场主管10名:</head> <requirements>能适应国内出差，一年以上工作经验，沟通能力强。底薪 元/月。</requirements> </item> <head>项目经理5名:</head> <requirements>具有一年以上项目开发经验，沟通能力强，精通TCP和UDP开发。底薪 元/月。</requirements> <head>平面设计师2名:</head> <requirements>艺术院校毕业，具有一年以上GUI设计经验，创意独特。底薪 元/月。</requirements> </content> 联系电话： </connection> </work> recruitment.XML

43 display: list-item示例 Item {     margin-top: 5px;   display: list-item;   list-style: decimal;   list-style-position: inside;   font-size: 11pt; }

44 list-style : list-style-type list-style-position list-style-image
该属性为复合属性，用简洁的方式来设定list-item上述3个属性值 list-style : list-style-type list-style-position list-style-image 若不进行设置，则默认值为：disc outside none 例：book { display: list-item; list-style: none inside url(qq.gif) }

45 任务3：使用CSS文本属性 任务3-2：使用字体属性font显示xml font-family：指定字体名称，使用逗号分隔字体名称。
font-style：设置字体样式，normal(正常)、italic(斜体)和oblique(倾斜体)。 font-size：设置字体中典型字符的字高和字宽。 font-weight：设置字体粗细。 line-height：设置字高。

46 任务3：使用CSS文本属性 任务3-3：设置XML前景色和背景色
color属性：设置XML文档元素的前景色。color属性值可以是名称、十进制、十六进制或百分数RGB的颜色值。 background-color属性：设置元素内容的背景颜色，与color属性的属性值设置方式相同。 color:green color:#FF00CC color:rgb(100％,0,80％)

47 任务3：使用CSS文本属性 任务3-4：使用文本修饰属性显示XML 1、text-indent属性：设置元素中文本的缩进。
2、text-align属性：设置元素中文本的对齐方式。 left：左对齐；right：右对齐；center：居中对齐。 3、vertical-align属性：设置元素内容的垂直对齐方式。 top：顶对齐；middle：中对齐；bottom：底对齐。 4、text-decoration属性：设置文本内容的特殊效果。 line-through：加删除线；overline：加上划线；underline：加下划线；none：默认值，不加任何修饰。

48 任务4：使用CSS容器属性 盒模型： 1、在元素周围增加边框（border） 2、设置边框与周围元素之间的边距（margins）。
3、设定元素与其边框之间空白距离（padding，即补白）

49 任务4：使用CSS容器属性 任务4-1：设置XML页边距 1、margin-top：设置上页边距
2、margin-bottom：设置下页边距 3、margin-left：设置左页边距 4、margin-right：设置右的页边距 5、margin：设置四边页边距 例、/*上、下、左、右页边距都是2cm,二者等价*/ book{ margin:2cm 2cm 2cm 2cm } book{ margin:2cm} /*上面二者语句等价*/

50 任务4：使用CSS容器属性 任务4-2：设置XML边框
设置边框线样式：border-style属性，其值分别为： none、dotted、dashed、solid、 double、 groove、ridge、inset和outset。 设置边框线颜色：border-color、border-top-color、 border-right-color、 border-bottom-color和 border-left-color五个属性。

51 border-width : medium | thin | thick | length
设置边框线宽度：border-width、border-top-width、border-right-width、 border-bottom-width和border-1eft-width五个属性。属性值为 medium :默认值。默认宽度; thin :小于默认宽度; thick :大于默认宽度; length :绝对长度值。不可为负值，可以是0 。 例如 book {border-style: solid; border-width: thin; } book {display: block; border-style: solid; border-width: 10px; }

52 任务4：使用CSS容器属性 任务4-3：指定边框和内部元素的间距，使用 padding、 padding-top、
padding-right、 padding-bottom和 padding-left 五个属性来指定，属性值为绝对长度或父元素宽度的百分比。

53 任务5：使用CSS布局属性 任务5-1：元素绝对定位和相对定位 1. 绝对定位
元素根据浏览器左上角的边缘开始计算定位数值 ，其周围元素不受影响。 如：控制左移和上移用left,top，反之则用right,bottom position: absolute; left: 100px; top: 20px;

54 任务5：使用CSS布局属性 任务5-1：元素绝对定位和相对定位 2. 相对定位 元素根据自己原始位置作相对位移，其周围元素不受影响。
如：控制左移和上移用left,top，反之则用right,bottom position: relative; left: 100px; top: 20px;

55 任务5：使用CSS布局属性 任务5-2：设置元素大小 CSS通过高度（height）和宽度（width）参数设置元素显示的大小。

56 任务5：使用CSS布局属性 任务5-3：环绕文本 CSS中，一个元素的文本可以环绕另一个元素的文本，就像HTML中的文本能够环绕图片一样。
Price{ display: block; color: #2F4F4F; font-weight: bold; float: left; }

57 任务5：使用CSS布局属性 任务5-4：插入图片 XML中：<picture ID="1"/> CSS中：#1 {
display:block; background:url(xml.gif); float:left; width:75px; height:105px; }

58 Thank You !