使用CSS显示XML

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的详细内容。更多信息请关注PHP中文网其他相关文章！