CSS 显示XML

XML代表可扩展标记语言。它也是一种专门为Web文档设计的标记语言。它定义了一套规则，用于以人类可读和机器可读的格式对文档进行编码。它允许开发人员创建自定义标签。XML还可以在应用程序之间定义、传输、验证和解释数据。

如何使用CSS显示XML

我们可以使用CSS属性来为XML文档中的内容添加样式。以下是使用CSS显示XML的步骤：

• 第一步 - 创建一个.xml文件并将代码添加到其中。

• 第二步 - 创建一个.css文件，并为在.xml文件中指定的标签添加样式。

• 第三步 - 使用以下代码块将.css文件链接到.xml文件中。这应该包含在.xml文档中。

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

• 第四步 - 将两个文件放置在同一个文件夹中。

• 第五步 - 在任何浏览器中打开.xml文件以查看应用于.xml元素的CSS样式。

示例

在下面的示例中，我们正在创建一个包含有关板球运动员统计信息的XML文件，并使用CSS来显示该XML文件。

<?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样式。

例子

以下是另一个使用CSS显示XML文件的例子-

将以下文件保存为”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文件

将以下文件另存为”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;
}

例子

<?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>

执行”data.xml”文件在任何浏览器中查看应用在XML文件元素上的样式。