Comme nous l'avons vu, XML ne se préoccupe que de la structure des documents, pas de la mise en page. Pour mettre en page un document XML, deux possibilités sont offertes : CSS et XSL. Nous étudions ici la première possibilité.
Cascading Style Sheets (CSS) permet de définir des feuilles de style qui accompagnent un document (HTML ou XML). Une feuille de style, comme indique son nom, définit les styles qui sont utilisés dans un document. Elle correspond elle-même à un document reconnaissable à son suffixe .css.
Pour faire comprendre leur utilisation, nous utiliserons un exemple en HTML . Soit le document HTML suivant :
<html>
<head><title>Bonjour</title></head>
<body>
<h1>Bonjour les petits enfants</h1>
<p>Une <b>grande nouvelle</b> :</p>
<img border="0" src="joueur.gif" width="156" height="157" align="right">
<p>à partir d'aujourd'hui vous pourrez consulter les résultats des compétitions sportives en cliquant sur les liens suivants :</p>
<ul>
<li>le <a href="tennis.htm"> tennis</a></li>
<li>le <a href="foot.htm"> foot-ball</a></li>
<li>le <a href="velo.htm"> cyclisme</a></li>
<li>la <a href="cochonnet.htm"> pétanque</a></li>
</ul>
<p>Vous pouvez aussi faire du sport.</p>
<p>Inscrivez-vous au plus vite au club en cliquant sur <a href="mailto:zidane@u-picardie.fr">contact</a></p>
<p>A très bientôt</p>
</body>
</html>
Le résultat dans Internet Explorer est donné ci-dessous :
Nous allons joindre une feuille de style que nous appellerons style1.css à cette page. Tout d'abord, il faut indiquer dans le document HTML où se trouve la feuille de style. Cela se fait simplement en ajoutant la ligne
<link rel="stylesheet" type="text/css" href="style1.css"/>
dans la section <head></head>
Ensuite il faut rédiger la feuille de style sous forme d'un document texte (style1.css) : body {margin: 1.0cm;}
h1 {font-family: Comic Sans MS, Helvetica, sans-serif; font-size: 30pt;}
p {font-family: Arial, Helvetica, sans-serif; font-size: 15pt;}
b {color: red;}
ul {font-family: Times New Roman, Helvetica, sans-serif; font-size : 18pt;}
a:link {color: blue;}
a:hover {color: red;}
a:active {color: green;}
où l'on peut constater que, pour chaque balise, le style est défini. En particulier, on remarquera que pour les polices de caractères, il est utile d'en définir plusieurs car l'utilisateur ne possède pas forcément sur sa machine les polices que vous utilisez.
Avec l'ajout de la feuille de style, le résultat est donné ci-dessous :
Imaginons maintenant une autre feuille de style, style2.css body {margin: 1.0cm;}
h1 {font-family: Verdana, Helvetica, sans-serif; font-size: 20pt;}
p {font-family: Comic Sans MS, Helvetica, sans-serif; font-size: 20pt;}
b {color: green;}
ul {font-family: Arial, Helvetica, sans-serif; font-size : 18pt;}
a:link {color: blue;}
a:hover {color: red;}
a:active {color: green;}
Cette feuille peut être ajoutée en déclaration dans le fichier HTML, en plus de la feuille de style, style1.css.
<html>
<head><title>Bonjour</title>
<link rel="stylesheet" type="text/css" href="style1.css"/>
<link rel="stylesheet" type="text/css" href="style2.css"/>
</head>
<body>
<h1>Bonjour les petits enfants</h1>
<p>Une <b>grande nouvelle</b> :</p>
<img border="0" src="joueur.gif" width="156" height="157" align="right">
<p>à partir d'aujourd'hui vous pourrez consulter les résultats des compétitions sportives en cliquant sur les liens suivants :</p>
<ul>
<li>le <a href="tennis.htm"> tennis</a></li>
<li>le <a href="foot.htm"> foot-ball</a></li>
<li>le <a href="velo.htm"> cyclisme</a></li>
<li>la <a href="cochonnet.htm"> pétanque</a></li>
</ul>
<p>Vous pouvez aussi faire du sport.</p>
<p>Inscrivez-vous au plus vite au club en cliquant sur <a href="mailto:zidane@u-picardie.fr">contact</a></p>
<p>A très bientôt</p>
</body>
</html>
On obtient le résultat suivant :
Cet exemple nous apprend que l'on peut superposer les feuilles de style css, d'où le nom "cascading", les dernières directives d'affichage prenant le pas sur les directives plus anciennes.
Qu'en est-il pour un document XML. C'est à peu près la même chose. Reprenons l'exemple des livres (livres.xml) donné plus haut. Intercalons le lien avec la feuille de style appelée livres.css (en rouge en deuxième ligne) ; soit livres2.xml, le fichier correspondant :
<?xml version="1.0" encoding="ISO-8859-1" ?>
<?xml-stylesheet href="livres.css" type="text/css"?>
<bouquins>
<livre>
<numero>123</numero>
<titre>Les Trois Mousquetaires</titre>
<auteur>A.Dumas</auteur>
<editeur>Gallimard</editeur>
<prix>246FF</prix>
</livre>
<livre>
<numero>124</numero>
<titre>Les Diaboliques</titre>
<auteur>Boileau</auteur>
<auteur>Narcejac</auteur>
<editeur>Duchnok</editeur>
<prix>210FF</prix>
</livre>
</bouquins>
La feuille de style doit maintenant être établie suivant un mode opératoire assez similaire à celui utilisé plus haut : pour chaque balise on définit le style :
bouquins {font-family : Arial, Helvetica, sans-serif;}
numero {display: block; font-size : 12pt; color=green;}
titre {display: block; font-size: 14pt; color: red; font-style: bold } auteur {display: block; font-size: 12pt}
editeur { display: inline; font-size : 12pt;}
prix {display: inline; font-size :12pt; font-style: italic;}
L'attribut display est particulièrement utile. Il permet d'afficher quelque chose, puis, soit de passer à la ligne suivante ("Gérard-Michel Cochardblock" - en fait
l'affichage correspond à un bloc), soit de continuer sur la même ligne ("inline"). On notera aussi que la police de caractère étant définie dans
"bouquins" est commune aux éléments "intérieurs". Le résultat est donné ci-dessous dans Internet Explorer :
Un aspect intéressant de CSS concerne les images d'arrière plan. Imaginons que l'on souhaite ajouter une image d'arrière-plan à l'affichage précédent. Voici quelques possibilités
Gérard-Michel Cochard
l'image est répétée régulièrement mais seulement sur l'élément bouquins.
bouquins {font-family : Arial, Helvetica, sans-serif;
background-image: url(photo.gif)}
numero {display: block; font-size : 12pt; color=green;}
titre {display: block; size: 14pt; color: red; font-style: bold }
auteur {display: block; font-size: 12pt}
editeur { display: inline; font-size : 12pt;}
prix {display: inline; font-size :12pt; font-style:
italic;}
l'image est répétée régulièrement mais seulement sur l'élément éditeur
bouquins {font-family : Arial, Helvetica, sans-serif; } numero {display: block; font-size : 12pt; color=green;}
titre {display: block; size: 14pt; color: red; font-style: bold }
auteur {display: block; font-size: 12pt}
editeur { display: inline; font-size : 12pt; background-image: url(photo.gif)}
prix {display: inline; font-size :12pt; font-style:
italic;}
Gérard-Michel Cochard
l'image n'est pas répétée et est
positionnée en haut à gauche sur l'élément bouquins
bouquins {font-family : Arial, Helvetica, sans-serif;
background-image: url(photo.gif);
background-repeat: no-repeat}
numero {display: block; font-size : 12pt; color=green;}
titre {display: block; size: 14pt; color: red; font-style: bold }
auteur {display: block; font-size: 12pt}
editeur { display: inline; font-size : 12pt;}
prix {display: inline; font-size :12pt; font-style:
italic;}
L'image est centrée horizontalement et verticalement sur l'élément bouquins
bouquins {font-family : Arial, Helvetica, sans-serif;
background-image: url(photo.gif);
background-repeat: no-repeat ;
background-position: center center}
numero {display: block; font-size : 12pt; color=green;}
titre {display: block; size: 14pt; color: red; font-style: bold }
auteur {display: block; font-size: 12pt}
editeur { display: inline; font-size : 12pt;}
prix {display: inline; font-size :12pt; font-style:
italic;}
CSS a fait l'objet d'une standardisation en 1996 sous le nom CSS1. Depuis une nouvelle version CSS2 a vu le jour en 1998 et encore une autre, CSS3, est en préparation. Mais les navigateurs usuels ne reconnaissant encore que CSS1.
Gérard-Michel Cochard