Initiation à XML - Part. 5 - Mise en forme et affichage d'un doc XML 1/4 : CSS

Mise en forme et affichage de fichiers XML sur le Web

• Avant-propos
En fait, contrairement à ce que j'ai pu énoncer dans l'introduction de ce Part, vous avez déjà vu, dans le Part précédent, comment faire une mise en forme simple en insérant du HTML dans un document XML.

• Avec les CSS
Le but de cette section n'est pas de vous enseigner le langage des feuilles de styles en cascade (CSS) que vous êtes sensé connaître, mais plutôt de vous montrer comment lier un document XML et des éléments XML à une feuille de styles CSS.
Si les CSS ne sont ni la meilleure ni la plus puissante solution pour la mise en forme d'un document XML, elles représentent, malgré tout, la solution la plus simple.

Pour lier un élément XML à un style, la première solution consiste en l'utilisation de l'attribut style au sein de l'élément à formater. Pour que la mise en forme apparaisse, il est nécessaire de faire un lien vers une feuille de styles fictive.

<nom_element style="attributs de style"> ... </nom_element>

Comme pour l'insertion d'éléments HTML au sein d'un document XML, si vous souhaitez obtenir un
affichage reproduisant la mise en forme du style appliqué, il est nécessaire de faire un lien vers une
feuille de styles fictive.
De plus, pour rendre le document XML valide, il ne faut pas oublier de déclarer l'attribut style dans la DTD
comme ceci : 
<!ATTLIST nom_element style CDATA #IMPLIED>

Je vous déconseille l'utilisation de styles locaux. Ils ne correspondent pas à la philosophie du XML :
séparation de la structure et des données de la mise en forme. Définissez plutôt les styles uniquement au
sein d'un fichier CSS lié au document XML (voir deuxième solution).

La seconde solution consiste tout simplement à lier un fichier de feuilles de styles CSS au document XML avec l'instruction de traitement suivante :
<?xml-stylesheet href="URL document CSS" type="text/css"?>

Exemple 13

ex-13.css

/* Fichier de Styles CSS : ex-13.css */
livre
   {
   font-family: arial;
   font-size: 12px;
   color: #000000;
   display: block;
   background: #cccccc;
   margin: 5px;
   padding: 5px;
   width: 300px;
   }

titre
   {
   font-weight: bold;
   display: block;
   }

auteur
   {
   color: #ff6600;
   display: block;
   }

collection
   {
   font-size: 10px;
   display: block;
   }

Initiation à XML - Part. 5 (1/3)

Mise en forme et affichage d'un doc XML 1/4 : CSS