XML代表可扩展标记语言。它也是一种专门为Web文档设计的标记语言。它定义了一组规则，用于以既可读又可机器读取的格式对文档进行编码。它允许开发人员创建自定义标签。XML还使得应用程序之间的数据定义、传输、验证和解释成为可能。
如何使用CSS显示XML
我们可以使用CSS属性来为XML文档中的内容添加样式。以下是使用CSS显示XML的步骤：
Step-1 − Create a .xml file and add your code to it.
步骤-2 − 创建一个 .css 文件，并为 .xml 文件中指定的标签添加样式。
立即学习“前端免费学习笔记（深入）”；
Step-3 − Link the .css file to the .xml file using the following code block. This should be included in the .xml document.
第四步 – 将两个文件放在同一个文件夹中。
步骤-5 – 在任何浏览器中打开 .xml 文件，以查看应用于 .xml 元素的 CSS 样式。
Example
In the following example, we are creating an XML file that contains information about cricket player statistics and displaying the XML file using CSS.
Cricket { display: block; margin-bottom: 30px; } name { font-weight: bold; color: seagreen; } hundreds, fifties { color: lightslategray; } Virat Kohli 75 130 Joe Root 46 99 Steve Smith 44 70 Faf du Plessis 23 66
在任何浏览器中执行”data.xml”文件，以查看应用于XML文件中元素的CSS样式。
Example
Following is another example to display XML file using CSS −
将以下文件保存为”data.xml” −
Maya 30 Female Ram 25 Male Varun 25 Male Sarah 25 Female
CSS File
Save the following file as “style.css” −
root { display: block; font-family: Arial, sans-serif; font-size: 14px; margin-bottom: 20px;} person { display: block; width: 10%; display: block; margin-bottom: 20px; border: 1px solid black; padding: 10px; border-radius: 5px;}name { font-weight: bold; color: #333;}age { color: #999;}gender{ color: brown; font-weight: bolder;}
Example
root { display: block; font-family: Arial, sans-serif; font-size: 14px; margin-bottom: 20px; } person { display: block; width: 10%; display: block; margin-bottom: 20px; border: 1px solid black; padding: 10px; border-radius: 5px; } name { font-weight: bold; color: #333; } age { color: #999; } gender{ color: brown; font-weight: bolder; } Maya 30 Female Ram 25 Male Varun 25 Male Sarah 25 Female
Execute the “data.xml” file in any browser to view stylings applied on XML file elements.
以上就是使用CSS显示XML的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1625256.html
微信扫一扫 
支付宝扫一扫 
