如何用CSS设置XML样式 XML文档样式表使用教程

XML文档本身主要用于存储和传输数据，默认情况下浏览器会以纯文本树形结构展示其内容，可读性较差。通过CSS可以为XML中的元素设置字体、颜色、布局等样式，让XML内容按照预期的效果呈现。

XML中引入CSS的方式

要在XML中使用CSS，首先需要在XML文档的开头声明样式表关联，通过<?xml-stylesheet?>处理指令实现，语法格式如下：

<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/css" href="style.css"?>
<bookstore>
    <book>
        <title>CSS实战教程</title>
        <author>张三</author>
        <price>59.9</price>
    </book>
</bookstore>

上述代码中，type="text/css"指定样式表类型为CSS，href属性指向CSS文件的路径，可以是相对路径也可以是绝对路径。

CSS设置XML样式的核心规则

XML中的元素没有默认的HTML语义，所以CSS选择器需要直接匹配XML的元素名，基本的选择器使用方式和HTML中一致：

• 元素选择器：直接写XML的元素名，匹配所有该名称的元素
• 后代选择器：用空格分隔多个元素名，匹配嵌套在指定元素内的目标元素
• 类选择器：如果XML元素有自定义属性，也可以通过属性选择器匹配

基础样式设置示例

针对前面给出的bookstore XML文档，对应的CSS文件内容如下：

/* 设置根元素bookstore的布局 */
bookstore {
    display: block;
    padding: 20px;
    font-family: "微软雅黑", sans-serif;
}

/* 设置每个book元素的样式 */
book {
    display: block;
    margin-bottom: 15px;
    padding: 10px;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
}

/* 设置title元素样式 */
title {
    display: block;
    font-size: 18px;
    font-weight: bold;
    color: #2c3e50;
    margin-bottom: 8px;
}

/* 设置author和price元素样式 */
author, price {
    display: block;
    font-size: 14px;
    color: #666;
    line-height: 1.5;
}

/* 单独设置price的颜色 */
price {
    color: #e74c3c;
}

注意事项

在给XML设置CSS样式时，需要注意以下几点：

• XML元素默认是行内元素，需要手动设置display:block才能让元素换行显示，符合常规布局逻辑
• XML区分大小写，CSS选择器中的元素名必须和XML文档中的元素名完全一致，包括大小写
• 如果XML文档结构复杂，建议先梳理清楚元素的嵌套关系，再编写对应的CSS选择器，避免样式匹配错误
• 部分浏览器对XML+CSS的支持存在差异，测试时建议多换几个主流浏览器验证效果

完整运行示例

将XML文件和CSS文件放在同一个目录下，XML文件内容如下：

<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/css" href="style.css"?>
<user_list>
    <user>
        <name>李四</name>
        <age>25</age>
        <email>test@ipipp.com</email>
    </user>
    <user>
        <name>王五</name>
        <age>30</age>
        <email>demo@ipipp.com</email>
    </user>
</user_list>

对应的style.css文件内容：

user_list {
    display: block;
    max-width: 600px;
    margin: 20px auto;
}

user {
    display: block;
    padding: 12px;
    margin-bottom: 10px;
    background-color: #f9f9f9;
    border-left: 4px solid #3498db;
}

name {
    display: block;
    font-size: 16px;
    font-weight: bold;
    color: #2980b9;
}

age, email {
    display: block;
    font-size: 14px;
    color: #555;
    margin-top: 5px;
}

用浏览器打开XML文件，就能看到按照CSS规则渲染后的用户列表内容，比默认的纯文本展示清晰很多。

CSSXML样式表XML_stylesheet修改时间：2026-07-12 05:18:21