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