XML文件本身是用于存储和传输结构化数据的，默认情况下浏览器等解析工具不会对其内容做样式渲染，若需要让XML内容按照指定的样式展示，就需要通过特定的语法引入CSS样式表。XML引用CSS的核心是使用处理指令声明样式表关联，下面详细介绍具体的语法规则和使用方法。
XML引用CSS的核心语法
XML中引入CSS需要使用<?xml-stylesheet?>处理指令，该指令必须放在XML文件的第一行声明之后，语法格式如下：
<?xml version="1.0" encoding="UTF-8"?> <?xml-stylesheet type="text/css" href="样式文件地址"?>
上述语法中各个属性的作用如下：
- type：固定值为text/css，用于声明引入的文件类型是CSS样式表
- href：填写CSS文件的路径，可以是相对路径也可以是绝对路径
完整使用示例
1. 准备XML数据文件
首先创建一个存储书籍信息的XML文件，命名为book.xml，内容如下：
<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/css" href="book.css"?>
<book_list>
<book>
<name>XML基础教程</name>
<author>张三</author>
<price>59.9</price>
</book>
<book>
<name>CSS实战指南</name>
<author>李四</author>
<price>69.9</price>
</book>
</book_list>
2. 准备对应的CSS样式文件
在同一目录下创建book.css文件，编写样式规则，XML中的元素可以直接作为CSS选择器使用：
/* 设置根元素样式 */
book_list {
display: block;
padding: 20px;
background-color: #f5f5f5;
font-family: "微软雅黑";
}
/* 设置每个book元素样式 */
book {
display: block;
margin: 10px 0;
padding: 15px;
border: 1px solid #ddd;
background-color: #fff;
}
/* 设置书名样式 */
name {
display: block;
font-size: 18px;
color: #333;
font-weight: bold;
margin-bottom: 8px;
}
/* 设置作者和价格样式 */
author, price {
display: block;
font-size: 14px;
color: #666;
line-height: 1.5;
}
3. 效果验证
将book.xml用浏览器打开，就可以看到XML内容按照book.css中定义的样式进行展示，每个书籍信息块会有边框、背景色，文字也有对应的字体大小和颜色设置。
注意事项
- 处理指令
<?xml-stylesheet?>必须放在XML声明之后，不能放在其他元素中间，否则会导致解析错误 - 如果CSS文件路径错误，浏览器会正常解析XML内容但不会应用样式，需要检查href属性填写的路径是否正确
- XML中的元素名是大小写敏感的，CSS选择器需要和XML中的元素名大小写完全一致才能匹配到样式
- 部分低版本浏览器对XML引用CSS的支持有限，若需要兼容更多场景，也可以考虑使用XSLT来转换XML的展示形式
常见问题解答
问：XML可以引用多个CSS文件吗？
不可以，一个XML文件只能使用一条<?xml-stylesheet?>处理指令，若需要引入多个样式规则，可以在同一个CSS文件中编写所有规则，或者在CSS中使用@import指令引入其他CSS文件。
问：绝对路径和相对路径怎么选择？
如果CSS文件和XML文件在同一目录，直接使用文件名作为相对路径即可；如果CSS文件在其他目录，需要填写正确的相对路径，比如href="css/book.css"表示CSS文件在当前目录的css子文件夹下。若使用绝对路径，需要注意路径的正确性，本地测试可以使用类似href="file:///C:/xml/book.css"的格式，线上环境使用对应的域名路径即可，注意如果路径中包含ipipp.com则保持原样即可。
XMLCSSxml_stylesheet样式引用样式表修改时间：2026-06-20 10:54:32