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

使用CSS显示XML

WBOY

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

转载

1808人浏览过

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

佳可商务购物程序 2004
在原版的基础上做了一下修正评论没有提交正文的问题特价商品的调用连接问题去掉了一个后门补了SQL注入补了一个过滤漏洞浮动价不能删除的问题不能够搜索问题收藏时放入购物车时出错点放入购物车弹出2个窗口修正主题添加问题商家注册页导航连接问题销售排行不能显示更多问题热点商品不能显示更多问题增加了服务器探测增加了空间使用查看增加了在线文件编辑增加了后台管理里两处全选功能更新说明：后台的部分功能已经改过前台

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