使用CSS样式表格式化XML文档

简介:

 这篇文章适用于有一定CSS基础的朋友们。如果你还没有CSS基础,可以到中文w3schools进行学习。

     1XML中引入CSS样式。

     XML中引入CSS样式表有两种方法。一种是在XML文档中直接嵌入CSS样式;另一种则是外部引入(似乎在WEB中很多引入的方式都有这两种)。在XML中直接嵌入CSS样式的方法如下:

 1 <?xml version="1.0" encoding="utf-8"?>
 2 <?xml-stylesheet type="text/css"?>
 3 <xml>
 4   <HTML:STYLE xmlns:HTML="http://www.w3.org/profiles/XHTML-transitional">
 5     book{
 6       display:block;
 7       background-color:#FFE4C4;
 8       margin:5px;
 9     }
10     name{
11       display:block;
12       line-height:30px;
13     }
14     author{
15       display:block;
16       line-height:30px;
17     }
18     date{
19       display:block;
20       line-height:30px;
21     }
22   </HTML:STYLE>
23   <book>
24     <name>Xml
应用系列</name>
25     <author>学路的小孩</author>
26     <date>2009-03-23</date>
27   </book>
28 </xml>

     代码说明:第一行是XML文件的头部声明,作为一个格式良好的Xml文档,都应该添加头部的声明信息。第二行是CSS样式的声明,其中,xml-stylesheet的意思是为XML文档添加样式表,type="text/css"的意思是样式表的类型是CSS样式表。第四行和第二十二行中间的内容则是CSS样式的内容,其中第四行用来声明添加CSS代码,第二十二行则是它的封闭标签。后面的几行是XML文档的内容。在添加了CSS样式之后,我们在IE中打开这个XML文档,效果如下图:

    

 第二种方式是外部引用。外部引用的代码示例如下:

1 <?xml version="1.0" encoding="utf-8"?>
2 <?xml-stylesheet type="text/css" href="bookstyle.css"?>
3 <xml>
4   <book>
5     <name>Xml
应用系列</name>
6     <author>学路的小孩</author>
7     <date>2009-03-23</date>
8   </book>
9 </xml>

     代码说明 第一行为Xml文档的声明;第二行中添加了一个href属性,它表示引入外部的CSS文件,文件的名字是bookstyle.css。后面的几行是XML文档的内容。我在bookstyle.css中写入的样式如下:

 1     book{
 2       display:block;
 3       background-color:gray;
 4       margin:5px;
 5     }
 6     name{
 7       display:block;
 8       line-height:30px;
 9     }
10     author{
11       display:block;
12       line-height:30px;
13     }
14     date{
15       display:block;
16       line-height:30px;
17     }

     这个样式跟第一个样式的唯一区别就是背景改为了gray,在IE中显示的效果为:

     

2CSS设置XML文档的显示效果

     CSS中使用选择符来格式化XML文档。选择符一般为一个或多个XML标签,例如上面的bookname等,在花括号中为显示的属性和属性值,属性和属性值中间以冒号分开。使用CSS可以通过dispaly属性设置标签内容是否显示,属性值有noneblockinlinelist-item。另外CSS还可以设置XML显示的字体、颜色、文本、边距、边框、填充以及定位显示。这些使用方法和在HTML中的使用是一样的,这里就不再详细说明。下一篇将说明如何使用XSLT模板化XML文档,请喜欢的朋友继续关注。

 

如果认为此文对您有帮助,别忘了支持一下哦!

作者: 齐飞
声明:本博客原创文字只代表本人工作中在某一时间内总结的观点或结论,与本人所在单位没有直接利益关系。非商业,未授权,贴子请以现状保留,转载时必须保留此段声明,且在文章页面明显位置给出原文连接。

转载:http://www.cnblogs.com/youring2/archive/2009/03/30/1422523.html
目录
相关文章
|
2月前
|
XML 存储 JavaScript
DOM 节点遍历:掌握遍历 XML文档结构和内容的技巧
**XML DOM 遍历、操作和导航概述** - 遍历XML节点树用于提取信息,例如,通过JavaScript的DOM API循环`&lt;book&gt;`子节点显示名称和值。 - DOM解析器处理XML文本数据,包括解析字符数据(PCDATA)和识别CDATA段。 - 节点导航涉及`parentNode`、`childNodes`等属性,`get_nextSibling`等辅助函数避免空文本节点。 - `getElementsByTagName`、`getAttribute`和`nodeValue`用于检索元素、属性值和文本。
62 6
DOM 节点遍历:掌握遍历 XML文档结构和内容的技巧
|
2月前
|
缓存 前端开发
css使用各类样式表
css使用各类样式表
|
25天前
|
前端开发 容器
你不知道的css——3. 内外尺寸、流宽度、格式化宽度、格式化高度、首选最小宽度、包裹性、最大宽度
你不知道的css——3. 内外尺寸、流宽度、格式化宽度、格式化高度、首选最小宽度、包裹性、最大宽度
11 2
|
28天前
|
前端开发 开发者
深入解析CSS样式表的优先级
深入解析CSS样式表的优先级
21 1
|
1月前
|
XML 数据格式
程序技术好文:格式化xml
程序技术好文:格式化xml
61 0
|
1月前
|
机器学习/深度学习 Web App开发 前端开发
揭开 CSS3 的魔法面纱:深入探索格式化上下文与兼容性的奇幻世界
揭开 CSS3 的魔法面纱:深入探索格式化上下文与兼容性的奇幻世界
|
2月前
|
XML 存储 C#
C# xml文档反序列化记事
本文介绍了使用XmlSerializer进行XML序列化和反序列化的关键点。包括:1) 以独占方式读取XML文件以避免并发问题;2) 当元素名与类型名不一致时,可通过`[XmlArrayItem]`指定元素名,或创建继承自原始类型的子类;3) 处理DateTime反序列化错误,通过中间字符串属性转换;4) 提到了常用C#特性如`[XmlRoot]`, `[XmlElement]`, `[XmlAttribute]`, `[XmlIgnore]`和`[XmlArrayItem]`的作用。
|
2月前
|
XML JavaScript 数据格式
XML Schema(XSD)详解:定义 XML 文档结构合法性的完整指南
XML Schema(XSD)是用于定义XML文档结构的规范,它描述了元素、属性及其顺序、数据类型和约束。与DTD相比,XML Schema支持更多数据类型,如字符串、日期等,并且是基于XML的,允许扩展和重用。学习XML Schema有助于确保数据通信时双方对内容的理解一致,通过验证防止错误。示例展示了如何定义一个`note`元素,包含`to`, `from`, `heading`和`body`子元素,都是字符串类型。XML文档可以通过引用XML Schema进行验证,确保内容符合预设模式。
164 0
|
2月前
|
前端开发 搜索推荐 开发者
CSS不仅使得网页内容的呈现多样化和个性化成为可能,还大大简化了样式表的编写工作
【4月更文挑战第6天】CSS不仅使得网页内容的呈现多样化和个性化成为可能,还大大简化了样式表的编写工作
36 3
|
2月前
|
XML JavaScript 前端开发
XML文档节点导航与选择指南
XPath是XSLT的核心部分,用于XML文档的节点定位和选择。它采用路径表达式语法,包含200多个内置函数处理各种数据类型。XPath在编程语言如JavaScript中广泛使用,与XSLT配合进行XML转换和样式处理。它涉及7种节点类型,如元素、属性和文本,以及多种节点间关系,如父、子、同级等。XPath还使用轴(如ancestor、child)来描述节点间的关联,并支持运算符进行逻辑和数学操作。
44 0
XML文档节点导航与选择指南