Le langage XML
Afficher le XML avec CSS

Home

Le CSS

Pour afficher les balises XML, on peut faire appel aux bonnes vieilles feuilles de style (CSS), maintenant classiques dans le paysage Html. A chaque balise "inventée" dans le fichier XML, on va définir un élément de style que le navigateur pourra alors afficher.


 

Un exemple de XML + CSS

A seule fin de démonstration, voici un exemple des possibilités d'une feuille de style CSS associée à un document XML.

Voici notre document XML de départ :

<?xml version="1.0" encoding="ISO-8859-1"?>
<racine>
    <enfant>
        <nom>Loïc</nom>
        <lien>garçon</lien>
        <date>07/11/83</date>
        <data>Le petit qui me dépasse d'une tête.</data>
    </enfant>
    <enfant>
        <nom>Marine</nom>
        <lien>fille</lien>
        <date>20/12/85</date>
        <data>La petite fille chérie à son papa.</data>
    </enfant>
</racine>

Affiché dans le navigateur, cela nous donne :

Tristounet !

On ajoute un fichier .css dont voici le contenu :

<style type="text/css">
racine , enfant {}
nom {
    display: block;
    width: 250px;
    font-size: 16pt ;
    font-family: arial ;
    font-weight: bold;
    background-color: teal;
    color: white;
    padding-left: 10px;
}

lien {
    display: block;
    font-size: 12pt;
    padding-left: 10px;
}

date {
    display: block;
    font-size: 12pt;
    color: red ;
    font-weight: bold;
    padding-left: 10px;
}

data {
    display: block;
    font-size: 11pt ;
    font-style: italic;
    font-family: arial ;
    padding-left: 10px;
}
</style>

Après avoir ajouté un lien vers le fichier css dans le fichier xml :

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

On obtient finalement :

Plutôt sympa non ?...

Pour voir les fichiers en direct - IE5+ seul - :

Mais il y a encore un autre moyen, plus performant et aux possibilités plus étendues : afficher du XML avec le XSL soit le langage de feuilles de style eXtensible. Le pendant du XML au CSS.