使用CSS顯示XML-css教學-PHP中文網

使用CSS顯示XML

WBOY

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

轉載

1597 人瀏覽過

使用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中文網其他相關文章！