資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法學使用 CSS 顯示 XML
XML 也是一種標記語言，代表可擴充套件標記語言 (Extensible Markup Language)，專為網路文件設計。它定義了一套規則，用於以既方便人閱讀又方便機器閱讀的格式編碼文件，允許開發者建立自定義標籤。
在這篇文章中，我們有一個 XML 檔案，我們的任務是使用 CSS 顯示 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 檔案
這裡我們建立了一個名為 data.xml 的 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 檔案
這是我們連結到 xml 檔案的 CSS 檔案 style.css。
root {
font-family: Arial, sans-serif;
font-size: 14px;
}
person {
display: block;
width: 10%;
border: 1px solid black;
padding: 10px;
border-radius: 5px;
margin: 1px auto 20px;
}
name {
font-weight: bold;
color: #333;
}
age {
color: #999;
}
gender{
color: brown;
font-weight: bolder;
}
完整的示例程式碼
以下是包含單個檔案中的 XML 和 CSS 的完整示例程式碼。
<?xml version="1.0" encoding="UTF-8"?>
<style>
root {
font-family: Arial, sans-serif;
font-size: 14px;
}
person {
display: block;
width: 10%;
border: 1px solid black;
padding: 10px;
border-radius: 5px;
margin: 1px auto 20px;
}
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 檔案元素的樣式。
結論
在這篇文章中，我們瞭解了使用 CSS 顯示 XML 的步驟。我們已將樣式應用於 XML 檔案中使用的每個標籤。使用 CSS 顯示 XML 非常簡單，可以使用 <?xml-stylesheet type="" href=""?> 完成。
更新於：2024年10月28日
3K+ 次瀏覽
廣告