XML（Extensible Markup Language）是一种标记语言，用于存储和传输数据，而CSS（Cascading Style Sheets）则是用于描述HTML或XML（包括如SVG、MathML等各种XML方言）文档的呈现方式。在这个“XML+CSS小例子”中，我们将探讨如何结合两者，使XML文档的数据以更美观和结构化的方式呈现。
让我们从XML文件“test.xml”开始。XML文件的核心是定义和组织数据。例如，一个简单的XML文档可能包含以下内容：
```xml
<?xml version="1.0" encoding="UTF-8"?>
<library>
<book id="1">
<title>计算机科学导论</title>
<author>张三</author>
<year>2015</year>
</book>
<book id="2">
<title>JavaScript高级程序设计</title>
<author>李四</author>
<year>2018</year>
</book>
</library>
```
这个XML文档定义了一个图书馆的书籍目录，每个`book`元素表示一本书，包含`title`（书名）、`author`（作者）和`year`（出版年份）等属性。
接下来，我们看下与XML文件配合使用的CSS文件“show.css”。CSS允许我们定义XML元素的样式，如颜色、字体、布局等。例如，我们可以创建以下CSS规则：
```css
/* CSS文件 - show.css */
library {
display: flex;
flex-direction: column;
}
book {
margin-bottom: 1em;
border: 1px solid #ccc;
padding: 0.5em;
border-radius: 5px;
}
title {
font-size: 1.2em;
font-weight: bold;
}
author {
font-style: italic;
}
year {
color: #999;
}
```
这个CSS样式表将`library`元素设置为一个垂直排列的Flex容器，每本书`book`有一个边距和边框，标题`title`加粗并增大字体，作者`author`变为斜体，出版年份`year`颜色稍淡。
将这两个文件关联起来，可以在浏览器中展示XML数据。在XML文件顶部添加一个`xml-stylesheet`处理指令，指示XML解析器应用哪个CSS样式表：
```xml
<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/css" href="show.css"?>
<library>
...
</library>
```
现在，当浏览器加载XML文件时，它会找到并应用指定的CSS样式，使得数据以清晰、有层次的形式展现出来。这个小例子展示了XML和CSS结合的强大之处，即分离了数据结构与表现形式，使得XML数据可以被多个样式表以不同的方式呈现，同时保持数据本身的独立性和可读性。
总结一下，这个“XML+CSS小例子”主要涉及以下知识点：
1. XML：一种标记语言，用于描述和组织结构化数据。
2. CSS：用于定义HTML或XML文档的视觉样式。
3. XML文档结构：理解XML元素、属性及其嵌套关系。
4. CSS选择器和样式规则：应用样式到XML元素，如通过元素名称、类或ID选择器。
5. 处理指令：`xml-stylesheet`用于链接XML文件和CSS样式表。
6. 数据与表现分离：XML负责数据，CSS负责显示，实现灵活的可重用性和可维护性。
通过实践这个小例子，你可以更好地理解XML和CSS如何协同工作，以及它们在网页开发、数据交换和许多其他应用场景中的作用。
小例子.zip （2个子文件） 
test.xml 344B
centimetre132012-07-12例子很简单，实用
