Afficher XML en utilisant CSS

XML signifie Extensible Markup Language. C'est également un langage de balisage conçu spécifiquement pour les documents Web. Il définit un ensemble de règles pour encoder les documents dans un format à la fois lisible par l'homme et par la machine. Il permet aux développeurs de créer des balises personnalisées. XML permet également la définition, le transfert, la validation et l'interprétation des données entre applications.

Comment afficher XML en utilisant CSS

Nous pouvons utiliser les propriétés CSS pour ajouter des styles au contenu des documents XML. Voici les étapes pour afficher du XML en utilisant CSS :

• Étape 1 − Créez un fichier .xml et ajoutez-y votre code.

• Étape 2 - Créez un fichier .css et ajoutez des styles aux balises spécifiées dans le fichier .xml.

• Étape 3 - Liez le fichier .css au fichier .xml à l'aide du bloc de code suivant. Celui-ci doit être inclus dans le document .xml.

.

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

• Étape 4 - Placez les deux fichiers dans le même dossier.

• Étape 5 - Ouvrez le fichier .xml dans n'importe quel navigateur pour voir les styles CSS appliqués à l'élément .xml.

Exemple

Dans l'exemple suivant, nous créons un fichier XML contenant des informations sur les statistiques des joueurs de cricket et affichons le fichier XML en utilisant 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>

Exécutez le fichier "data.xml" dans n'importe quel navigateur pour voir les styles CSS appliqués aux éléments du fichier XML.

Exemple

Voici un autre exemple pour afficher un fichier XML en utilisant CSS −

Enregistrez le fichier suivant sous "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>

Fichier CSS

Enregistrez le fichier suivant sous "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;
}

Exemple

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

Exécutez le fichier "data.xml" dans n'importe quel navigateur pour afficher les styles appliqués aux éléments du fichier XML.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!