Cette page contient un exemple d'utilisation de CSS avec des données XML.
Vous créerez un document XML simple et une feuille de style servant à l'afficher dans un navigateur.
Information : données XML
XML (eXtended Markup Language) est un langage d'usage général prévu pour tous types de données structurées.
Par défaut, votre navigateur Mozilla affiche XML dans un format très similaire aux données originales contenues dans le fichier XML. Les balises définissant la structure des données sont visibles.
En liant un fichier CSS avec le document XML, vous pouvez définir d'autres manières de l'afficher. Pour ce faire, votre feuille de style utilisera des règles associant les balises du document XML aux types d'affichage utilisés par HTML.
Les données d'un document XML utilisent des balises <INFO>. Vous désirez que les éléments INFO du document soient affichés comme des paragraphes en HTML.
Dans la feuille de style du document, vous spécifierez comment les éléments INFO doivent être affichés : INFO {
display: block;
margin: 1em 0;
}
|
Les valeurs les plus courantes pour la propriété display sont :
block | Est affiché comme un élément DIV en HTML (pour les titres, les paragraphes, etc.) |
inline | Est affiché comme un élément SPAN en HTML (pour insister sur certaines parties du texte) |
Vous ajouterez vos propres règles de style spécifiant la police, les marges et d'autres détails de la même façon que pour un document HTML.
D'autres valeurs de la propriété display permettent d'afficher l'élément comme un élément de liste, ou un élément de tableau.
Pour la liste complète des types d'affichage, consultez The display property dans la spécification CSS. Si vous n'utilisez que CSS, la structure de ce qui est affiché doit être la même que la structure du document. D'autres technologies peuvent modifier la structure de l'affichage, par exemple XBL peut ajouter du contenu, et JavaScript peut modifier le DOM. Pour plus d'informations à propos de l'utilisation de XML dans Mozilla, consultez la page XML de ce wiki. |
Action : une démonstration de XML
Créez un nouveau fichier XML, doc9.xml.
Copiez et collez-y le contenu ci-dessous, en vous assurant de le faire défiler pour en obtenir l'entièreté :
<?xml version="1.0"?> <!-- Démonstration de XML --> <?xml-stylesheet type="text/css" href="style9.css"?> <!DOCTYPE planete> <planete> <ocean> <nom>Arctique</nom> <surface>13 000</surface> <profondeur>1 200</profondeur> </ocean> <ocean> <nom>Atlantique</nom> <surface>87 000</surface> <profondeur>3 900</profondeur> </ocean> <ocean> <nom>Pacifique</nom> <surface>180 000</surface> <profondeur>4 000</profondeur> </ocean> <ocean> <nom>Indien</nom> <surface>75 000</surface> <profondeur>3 900</profondeur> </ocean> <ocean> <nom>Antarctique</nom> <surface>20 000</surface> <profondeur>4 500</profondeur> </ocean> </planete>
Créez un nouveau fichier CSS, style9.css.
Copiez et collez-y le contenu ci-dessous, en vous assurant de le faire défiler pour en obtenir l'entièreté :
/*** Démonstration de XML ***/
planete:before {
display: block;
width: 8em;
font-weight: bold;
font-size: 200%;
content: "Océans";
margin: -.75em 0px .25em -.25em;
padding: .1em .25em;
background-color: #cdf;
}
planete {
display: block;
margin: 2em 1em;
border: 4px solid #cdf;
padding: 0px 1em;
background-color: white;
}
ocean {
display: block;
margin-bottom: 1em;
}
nom {
display: block;
font-weight: bold;
font-size: 150%;
}
surface {
display: block;
}
surface:before {
content: "Surface : ";
}
surface:after {
content: " millions de km\B2";
}
profondeur {
display: block;
}
profondeur:before {
content: "Profondeur moyenne : ";
}
profondeur:after {
content: " m";
}
Ouvrez le document dans votre navigateur :
Océans Arctique Atlantique . . . |
Remarques à propos de cette démonstration :
- L'exposant (dans "millions de km²") est un caractère Unicode, codé comme
\B2dans le fichier CSS. - Le titre, « Océans », a une marge supérieure négative, ce qui l'amène à être affiché par dessus la bordure.
| Modifiez la feuille de style afin qu'elle affiche le document comme un tableau.
(Consultez le chapître Tables dans la spécification CSS pour des exemples que vous pouvez adapter.) |
Pour continuer
Si vous avez eu des difficultés à comprendre cette page, ou si vous avez d'autres commentaires à son sujet, n'hésitez pas à contribuer à sa page de discussion.
Ceci est la dernière page du tutoriel. Pour plus d'informations à propos de l'utilisation de CSS dans Mozilla, consultez la page principale CSS de ce wiki.