Paparkan XML menggunakan CSS

XML ialah singkatan dari Extensible Markup Language. Ia juga merupakan bahasa penanda yang direka khusus untuk dokumen web. Ia mentakrifkan satu set peraturan untuk pengekodan dokumen dalam format yang boleh dibaca oleh manusia dan boleh dibaca oleh mesin. Ia membolehkan pembangun membuat teg tersuai. XML juga membolehkan definisi, pemindahan, pengesahan dan tafsiran data antara aplikasi.

Cara untuk memaparkan XML menggunakan CSS

Kami boleh menggunakan sifat CSS untuk menambah gaya pada kandungan dalam dokumen XML. Berikut ialah langkah untuk memaparkan XML menggunakan CSS:

• Langkah-1 − Buat fail .xml dan tambahkan kod anda padanya.

• Langkah-2 − Buat fail .css dan tambah gaya pada teg yang dinyatakan dalam fail .xml.

• Langkah-3 − Pautkan fail .css ke fail .xml menggunakan blok kod berikut Ini harus disertakan dalam dokumen .xml.

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

• Langkah 4 - Letakkan kedua-dua fail dalam folder yang sama.

• Langkah-5 - Buka fail .xml dalam mana-mana penyemak imbas untuk melihat gaya CSS digunakan pada elemen .xml.

Contoh

Dalam contoh berikut, kami sedang mencipta fail XML yang mengandungi maklumat tentang statistik pemain kriket dan memaparkan fail XML menggunakan 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>

Laksanakan fail "data.xml" dalam mana-mana penyemak imbas untuk melihat gaya CSS digunakan pada elemen dalam fail XML.

Contoh

Berikut ialah satu lagi contoh untuk memaparkan fail XML menggunakan CSS −

Simpan fail berikut sebagai "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>

Fail CSS

Simpan fail berikut sebagai "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;
}

Contoh

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

Laksanakan fail "data.xml" dalam mana-mana pelayar untuk melihat gaya yang digunakan pada elemen fail XML.

Atas ialah kandungan terperinci Paparkan XML menggunakan CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!