使用CSS显示XML

百变鹏仔 3个月前 (09-20) #CSS

文章标签 CSS

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.

<?xml-stylesheet type="text/css" href="name_of_css_file.css"?>

第四步 - 将两个文件放在同一个文件夹中。
步骤-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.

<?xml version="1.0"?><style>   Cricket {      display: block;      margin-bottom: 30px;   }     name {      font-weight: bold;      color: seagreen;   }     hundreds, fifties {      color: lightslategray;   }</style><Sports>   <Cricket>      <name>Virat Kohli</name>      <hundreds>75</hundreds>      <fifties>130</fifties>   </Cricket>   <Cricket>      <name>Joe Root</name>      <hundreds>46</hundreds>      <fifties>99</fifties>   </Cricket>       <Cricket>      <name>Steve Smith</name>      <hundreds>44</hundreds>      <fifties>70</fifties>   </Cricket>   <Cricket>      <name>Faf du Plessis</name>      <hundreds>23</hundreds>      <fifties>66</fifties>   </Cricket></Sports>

在任何浏览器中执行"data.xml"文件，以查看应用于XML文件中元素的CSS样式。

Example

Following is another example to display XML file using CSS −

将以下文件保存为"data.xml" −

<?xml version="1.0" encoding="UTF-8"?><?xml-stylesheet type="text/css" href="style.css"?><root>   <person>      <name>Maya</name>      <age>30</age>      <gender>Female</gender>   </person>   <person>      <name>Ram</name>      <age>25</age>      <gender>Male</gender>   </person>   <person>      <name>Varun</name>      <age>25</age>      <gender>Male</gender>   </person>   <person>      <name>Sarah</name>      <age>25</age>      <gender>Female</gender>   </person></root>

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

<?xml version="1.0" encoding="UTF-8"?><style>   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;   }</style><root>   <person>      <name>Maya</name>      <age>30</age>      <gender>Female</gender>   </person>   <person>      <name>Ram</name>      <age>25</age>      <gender>Male</gender>   </person>   <person>      <name>Varun</name>      <age>25</age>      <gender>Male</gender>   </person>   <person>      <name>Sarah</name>      <age>25</age>      <gender>Female</gender>   </person></root>

Execute the "data.xml" file in any browser to view stylings applied on XML file elements.

文章推荐

使用CSS显示XML

如何使用CSS显示XML

Example

Example

CSS File

Example

css如何让导航栏变透明

css 怎么去除a标签的手形

css里怎样设置字体大小和字体颜色

css如何固定导航栏

css边框变圆角边框怎么写