XML如何与CSS结合显示是很多处理数据展示场景的开发者会遇到的问题，XML主要用于承载结构化数据，本身不具备样式渲染能力，通过关联CSS样式表可以让XML的内容按照预设的样式规则呈现。
XML与CSS结合的基本原理
XML文档中包含了各类元素和属性，CSS的作用是为这些XML元素定义显示规则，比如字体大小、颜色、布局方式等。结合的核心是在XML文档中声明关联的CSS文件，浏览器解析XML时会加载对应的CSS规则，将数据和样式匹配后渲染出最终的页面效果。
基础结合步骤
1. 编写XML文档
首先准备一个结构清晰的XML文件，示例如下：
<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/css" href="style.css"?>
<book_list>
<book>
<title>XML基础教程</title>
<author>张三</author>
<price>59.9</price>
</book>
<book>
<title>CSS实战指南</title>
<author>李四</author>
<price>69.9</price>
</book>
</book_list>
注意XML文档第二行的<?xml-stylesheet?>处理指令就是用来关联CSS文件的，type属性指定样式类型为CSS，href属性指定CSS文件的路径。
2. 编写对应的CSS样式文件
创建名为style.css的文件，为XML元素定义样式规则：
/* 为根元素设置整体布局 */
book_list {
display: block;
width: 800px;
margin: 20px auto;
font-family: "微软雅黑", sans-serif;
}
/* 为单个book元素设置样式 */
book {
display: block;
padding: 15px;
margin-bottom: 10px;
border: 1px solid #e0e0e0;
border-radius: 4px;
}
/* 为title元素设置样式 */
title {
display: block;
font-size: 18px;
color: #333333;
font-weight: bold;
margin-bottom: 8px;
}
/* 为author元素设置样式 */
author {
display: block;
font-size: 14px;
color: #666666;
margin-bottom: 5px;
}
/* 为price元素设置样式 */
price {
display: block;
font-size: 16px;
color: #ff4d4f;
font-weight: bold;
}
3. 浏览器解析显示
将XML文件和CSS文件放在同一目录下，用浏览器打开XML文件，浏览器会自动加载关联的CSS样式，按照定义的规则渲染出书籍列表的样式效果。
结合使用的注意事项
- XML中的元素名是区分大小写的，CSS选择器中的元素名必须和XML中的元素名完全一致，否则样式无法生效。
- 如果XML文档结构比较复杂，建议先梳理清楚元素的层级关系，再编写对应的CSS选择器，避免样式匹配错误。
- 部分旧版本浏览器对XML和CSS结合的支持存在兼容性问题，如果需要在多浏览器环境使用，建议提前测试效果。
- 如果需要对XML进行更复杂的转换处理，还可以结合XSLT先转换XML结构，再配合CSS显示，能满足更灵活的展示需求。
常见场景示例
如果需要让XML中的数据以表格形式显示，可以调整CSS的display属性，示例如下：
/* 根元素显示为表格 */
book_list {
display: table;
border-collapse: collapse;
width: 100%;
}
/* book元素显示为表格行 */
book {
display: table-row;
}
/* 子元素显示为表格单元格 */
title, author, price {
display: table-cell;
padding: 10px;
border: 1px solid #cccccc;
text-align: center;
}
这样修改后，XML中的书籍数据就会以表格的形式呈现，更符合列表数据的展示习惯。