使用CSS显示XML-css教程-PHP中文网

使用CSS显示XML

WBOY

发布： 2023-08-20 11:37:26

转载

1800人浏览过

使用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 样式。

eMart 网店系统
功能列表：底层程序与前台页面分离的效果，对页面的修改无需改动任何程序代码。完善的标签系统，支持自定义标签，公用标签，快捷标签，动态标签，静态标签等等，支持标签内的vbs语法，原则上运用这些标签可以制作出任何想要的页面效果。兼容原来的栏目系统，可以很方便的插入一个栏目或者一个栏目组到页面的任何位置。底层模版解析程序具有非常高的效率，稳定性和容错性，即使模版中有错误的标签也不会影响页面的显示。所有的标

0

查看详情

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中文网其它相关文章！