Affichage les données structurées en XML avec une feuille de style CSS
Jusqu'à présent, nous avons des fichiers de données structurées avec XML, mais nous ne voyons pas encore comment sont-elles exploitées, triées, affichiées...
Pour afficher des données XML, on peut utiliser plusieurs méthodes et langages : a savoir XSLT (extensible stylesheet language transformation) ou simplement une feuilles de style (CSS), souvent utilisée dans le développement des pages web html.
A chaque balise dans le fichier XML, on va définir un élément de style que le navigateur pourra alors afficher.
Exemple : Exemple de fichier XML et une feuille de style 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 :
On ajoute un fichier .css dont voici le contenu :
Et voilà le résultat affiché avec un navigateur internet (Firefox explorer)
Méthode : Explication des instructions
Les CSS se composent de trois parties :
- la mise en page
- la typographie
- et la couleur
Dans une feuille de style CSS, il y a des "sélecteurs" et "déclarations"
Sélecteur CSS = élément XML = un couple de balise
Chaque sélecteur est constitué de déclarations : nom/valeur
selecteur { propriété : valeur }
Dans l'exemple précédant, les sélecteurs sont des balises XML : carnet, parent, medecin, ami, addresse, nom et fonction
Les déclarations sont entre les accolades :
display: block;
margin: 2%;
padding: 10px;
margin-bottom: 1em;
font-weight: bold;
La mise en page avec une feuille de style CSS
la mise en page (les instructions principales)
display
La propriété display (affichage) est utilisée pour spécifier si un élément doit ou non être affiché; et si oui, comment
display: none; (non afficher l'élément)
display: inline; (afficher dans la ligne, pas saut de ligne)
display: block; (afficher l'élément en block de texte, comme un paragraphe)
display: list-item; (afficher l'élément en liste d'items)
margin
La propriété margin (marge) est utilisée pour indiquer la taille de l'espace blanc qui entoure les blocs de texte
margin: 5%;
margin: 10px;
margin-top: 2em;
margin-left: 85%;
margin-right: 50px;
margin-bottom: 1em;
Les valeurs de margin peuvent être des pourcentages (%), des pixels (px), ou des conventions typographiques traditionnelles telles que l'unité em (em). Quand on donne une valeur à la propriété margin, elle s'applique simultanément aux marges droite, gauche, haut et bas.
Il est possible de spécifier différentes marges en utilisant les propriétés margin-top, margin-bottom, margin-left, et margin-right.
text-indent
Cette propriété est utilisée pour définir la façon dont certaines lignes doivent être mises en retrait dans des blocs de texte
text-indent: 3%;
text-indent: 5px;
text-align
Les valeurs courantes de text-align sont right, left, center, et justify. Elles sont utilisées pour aligner le texte à l'intérieur d'un bloc de texte
text-align: right;
text-align: left;
text-align: center;
text-align: justify;
La typographie
font-family
Associez font-family à un sélecteur si vous voulez décrire dans quelle police de caractère doit être affichée le XML.
font-family: helvetica;
font-family: times, serif;
font-family: 'cosmic cartoon', sans-serif;
Remarque : pour les polices dont le nom est composé, on conserve le blanc mais il faut mettre le nom entre guillemets (simple ou double)
font-size
Les tailles des polices peuvent être indiquées avec des dimensions exactes en points tout autant qu'avec des tailles relatives telles que small, x-small, ou large.
Par exemple:
font-size: 12px;
font-size: small;
font-size: large;
font-size: x-small;
font-weight
Ce paramètre est utilisé pour indiquer si le texte doit être rendu en gras ou non. Les valeurs habituelles sont normal et bold:
Par exemple:
font-weight: normal;
font-weight: bold;
La couleur
La couleur (appliquée au texte)
color
La propriété color (couleur) est utilisée pour spécifier la couleur du texte
Avec CSS, la couleur peut être définie par
- valeur HEX - comme "#ff0000"
- valeur RGB - comme "rgb(255,0,0)"
- nom de couleur- comme "red"
Ex : color:blue;
Associer la feuille de style CSS avec le fichier XML
Pour indiquer à votre navigateur web d'utiliser le fichier CSS pour afficher un fichier XML, vous devrez ajouter l'instruction de traitement de la feuille de style après le prologue du fichier xml.
<?xml-stylesheet type="text/css" href="nom_de_feuille_de_style.css" ?>
Exemple : Exemple 2 - Affichage différent du fichier XML
Prenons toujours le même fichier XML de l'exemple précédent, nous proposons une autre feuille de style, nous obtiendrons un autre affichage
Fichier XML de départ (Attention, la deuxième ligne du fichier XML, c'est l'instruction pour associer une feuille de style (style2.css) à un fichier XML)
Une feuille de style dont le contenu est suivant :
Et voici le résultat affiché avec un navigateur internet (Internet Explorer)
Remarque : Pour afficher les attribut id dans l'exemple, la syntaxe est # suivi de la valeur de l'attribut :
#professionnel { color: red; }
