XML mit CSS anzeigen

XML steht für Extensible Markup Language. Es handelt sich außerdem um eine Auszeichnungssprache, die speziell für Webdokumente entwickelt wurde. Es definiert eine Reihe von Regeln zum Kodieren von Dokumenten in einem Format, das sowohl für Menschen als auch für Maschinen lesbar ist. Es ermöglicht Entwicklern, benutzerdefinierte Tags zu erstellen. XML ermöglicht außerdem die Definition, Übertragung, Validierung und Interpretation von Daten zwischen Anwendungen.

So zeigen Sie XML mit CSS an

Wir können CSS-Eigenschaften verwenden, um dem Inhalt in XML-Dokumenten Stile hinzuzufügen. Hier sind die Schritte zum Anzeigen von XML mit CSS:

• Schritt 1 − Erstellen Sie eine .xml-Datei und fügen Sie Ihren Code hinzu.

• Schritt 2 − Erstellen Sie eine CSS-Datei und fügen Sie Stile zu den in der XML-Datei angegebenen Tags hinzu.

• Schritt 3 - Verknüpfen Sie die .css-Datei mit der .xml-Datei mithilfe des folgenden Codeblocks. Dieser sollte im .xml-Dokument enthalten sein.

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

• Schritt 4 – Legen Sie beide Dateien im selben Ordner ab.

• Schritt 5 – Öffnen Sie die XML-Datei in einem beliebigen Browser, um die auf das XML-Element angewendeten CSS-Stile anzuzeigen.

Beispiel

Im folgenden Beispiel erstellen wir eine XML-Datei, die Informationen über Cricket-Spielerstatistiken enthält, und zeigen die XML-Datei mithilfe von CSS an.

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

Führen Sie die Datei „data.xml“ in einem beliebigen Browser aus, um die auf Elemente in der XML-Datei angewendeten CSS-Stile anzuzeigen.

Beispiel

Im Folgenden finden Sie ein weiteres Beispiel für die Anzeige einer XML-Datei mit CSS −

Speichern Sie die folgende Datei als „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-Datei

Speichern Sie die folgende Datei als „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;
}

Beispiel

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

Führen Sie die Datei „data.xml“ in einem beliebigen Browser aus, um auf XML-Dateielemente angewendete Stile anzuzeigen.

Das obige ist der detaillierte Inhalt vonXML mit CSS anzeigen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!