Une feuille de style est-elle obligatoire ?

Visualisation du document sans feuille de style

Lorsqu'aucune précision n'est donnée quant à l'affichage (pas de feuille de style) la navigateur affichera le contenu du document XML. Prenons le document biblio.xml qui décrit une bibliothèque vu dans une DTD est-elle obligatoire, nous aurons l'affichage suivant sous IE :

document xml sous IE5

Il est possible de modifier l'affichage en appuyant sur les signes +/- dans le navigateur (Firefox, IE, ...). Dans l'exemple ci-dessus les trois derniers livres ne sont pas dépliés.

Visualisation avec une feuille de style CSS

Nous voulons à présent afficher ce document XML avec le titre en bleu et la référence en rouge, nous allons pour cela définir une feuille de style CSS dans le fichier biblio.css et nous allons l'appeler dans le document XML biblio.xml

Appel de la feuille de style dans le document

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

<bibliotheque>
...
</bibliotheque>

Feuille de style pour le document

livre{
	display:block;
	margin-left:10pt;
	margin-bottom:5pt; 
	font-size:12pt 
}
titre{
	margin-right:10pt; 
	color:blue; 
}
auteur{
	margin-right:10pt; 
}
ref{
	color:red;
}

Affichage sous IE

biblio.xml avec style CSS

feuille de style

Visualisation avec une feuille de style XSL

Appel de la feuille de style XSL

<?xml version="1.0"?>
<?xml-stylesheet type="application/xml" href="biblio.xsl"?>

<bibliotheque>

...

</bibliotheque>

NB: pour Internet Explorer le type mime à utiliser dans xml-stylesheet est text/xsl

Fichier XSL

<?xml version="1.0"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:output method="html"/>

<xsl:template match="/">

 <html>
   <head>
     <title>Ma bibliotheque</title>
     <style type="text/css">
	   th {background-color:silver;}
	   td {border-style:solid; border-width:1px;}
     </style>
   </head>
   <body>

         <H2>Bibliotheque</H2>
         <table>
		<tr>
			<th>Titre</th>
			<th>Auteur</th>
			<th>Ref.</th>
		</tr>
		<xsl:for-each select="bibliotheque/livre">
		<tr>
			<td><xsl:value-of select="titre"/></td>
			<td><xsl:value-of select="concat(auteur/nom, ' ', auteur/prenom)"/></td>
			<td><xsl:value-of select="ref"/></td>
		</tr>
            	</xsl:for-each>
	    </table>
    </body>
    </html>

</xsl:template>
</xsl:stylesheet>

Affichage sous Mozilla

biblio.xml avec style XSL

biblio.xml avec style XSL version pour IE

feuille de style XSL