diff options
Diffstat (limited to 'files/fr/css/premiers_pas/données_xml/index.html')
| -rw-r--r-- | files/fr/css/premiers_pas/données_xml/index.html | 191 |
1 files changed, 0 insertions, 191 deletions
diff --git a/files/fr/css/premiers_pas/données_xml/index.html b/files/fr/css/premiers_pas/données_xml/index.html deleted file mode 100644 index c4608b74eb..0000000000 --- a/files/fr/css/premiers_pas/données_xml/index.html +++ /dev/null @@ -1,191 +0,0 @@ ---- -title: Données XML -slug: CSS/Premiers_pas/Données_XML -tags: - - CSS - - 'CSS:Premiers_pas' -translation_of: Archive/Beginner_tutorials/XML_data ---- -<p> -</p><p>Cette page contient un exemple d'utilisation de CSS avec des données XML. -</p><p>Vous créerez un document XML simple et une feuille de style servant à l'afficher dans un navigateur. -</p> -<h3 id="Information_:_donn.C3.A9es_XML" name="Information_:_donn.C3.A9es_XML"> Information : données XML </h3> -<p><i><a href="fr/XML">XML</a></i> (eXtended Markup Language) est un langage d'usage général prévu pour tous types de données structurées. -</p><p>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. -</p><p>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. -</p> -<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;"> -<caption>Exemple -</caption><tbody><tr> -<td> Les données d'un document XML utilisent des balises <code><INFO></code>. Vous désirez que les éléments <small>INFO</small> du document soient affichés comme des paragraphes en HTML. -<p>Dans la feuille de style du document, vous spécifierez comment les éléments <small>INFO</small> doivent être affichés : -</p> -<div style="width: 30em;"> -<pre class="eval">INFO { - display: block; - margin: 1em 0; - } -</pre> -</div> -</td></tr></tbody></table> -<p>Les valeurs les plus courantes pour la propriété <code>display</code> sont : -</p> -<table style="margin-left: 2em;"> -<tbody><tr> -<td style="padding-right: 2em;"><code>block</code></td><td>Est affiché comme un élément <small>DIV</small> en HTML (pour les titres, les paragraphes, etc.) -</td></tr> -<tr> -<td><code>inline</code></td><td>Est affiché comme un élément <small>SPAN</small> en HTML (pour insister sur certaines parties du texte) -</td></tr></tbody></table> -<p>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. -</p> -<table style="border: 1px solid #36b; padding: 1em; background-color: #f4f4f4; margin-bottom: 1em;"> -<caption>Plus de détails -</caption><tbody><tr> -<td> D'autres valeurs de la propriété <code>display</code> permettent d'afficher l'élément comme un élément de liste, ou un élément de tableau. -<p>Pour la liste complète des types d'affichage, consultez <a class="external" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-display">The display property</a> dans la spécification CSS. -</p><p>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. -</p><p>Pour plus d'informations à propos de l'utilisation de XML dans Mozilla, consultez la page <a href="fr/XML">XML</a> de ce wiki. -</p> -</td></tr></tbody></table> -<h3 id="Action_:_une_d.C3.A9monstration_de_XML" name="Action_:_une_d.C3.A9monstration_de_XML"> Action : une démonstration de XML </h3> -<p>Créez un nouveau fichier XML, <code>doc9.xml</code>. -Copiez et collez-y le contenu ci-dessous, en vous assurant de le faire défiler pour en obtenir l'entièreté : -</p> -<div style="width: 48em; height: 12em; overflow: auto;"><pre><?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> -</pre></div> -<p>Créez un nouveau fichier CSS, <code>style9.css</code>. -Copiez et collez-y le contenu ci-dessous, en vous assurant de le faire défiler pour en obtenir l'entièreté : -</p> -<div style="width: 48em; height: 12em; overflow: auto;"><pre>/*** 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"; - } -</pre></div> -<p>Ouvrez le document dans votre navigateur : -</p> -<table style="border: 2px outset #36b; padding: 1em;"> -<tbody><tr> -<td><div style="border: 2px solid #cdf; border-bottom: none; padding: .5em 8em 1em .5em;"> -<p style="font-size: 150%; font-weight: bold; margin: -1em 0px 0px 0px; padding: .1em .25em; background-color: #cdf; width: 8em;">Océans</p> -<p style="font-size: 75%; margin: .25em 0px 0px 0px; line-height: 110%;"><b>Arctique</b><br> -Surface : 13 000 millions de km²<br> -Profondeur moyenne : 1 200 m</p> -<p style="font-size: 75%; margin: .5em 0px 0px 0px; line-height: 110%;"><b>Atlantique</b><br> -Surface : 87 000 millions de km²<br> -Profondeur moyenne : 3 900 m</p> -<p style="font-size: 75%; margin: .5em 0px 0px 0px; line-height: 110%;"><b>. . .</b></p> -</div> -</td></tr></tbody></table> -<p><br> -Remarques à propos de cette démonstration : -</p> -<ul><li> L'exposant (dans "millions de km²") est un caractère Unicode, codé comme <code>\B2</code> dans le fichier CSS. -</li><li> Le titre, « Océans », a une marge supérieure négative, ce qui l'amène à être affiché par dessus la bordure. -</li></ul> -<p><br> -</p> -<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;"> -<caption>Challenge -</caption><tbody><tr> -<td> Modifiez la feuille de style afin qu'elle affiche le document comme un tableau. -<p>(Consultez le chapître <a class="external" href="http://www.w3.org/TR/CSS21/tables.html">Tables</a> dans la spécification CSS pour des exemples que vous pouvez adapter.) -</p> -</td></tr></tbody></table> -<h4 id="Pour_continuer" name="Pour_continuer"> Pour continuer </h4> -<p>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 <a>page de discussion</a>. -</p><p>Ceci est la dernière page du tutoriel. -Pour plus d'informations à propos de l'utilisation de CSS dans Mozilla, consultez la page principale <a href="fr/CSS">CSS</a> de ce wiki. -</p>{{ languages( { "en": "en/CSS/Getting_Started/XML_data", "ko": "ko/CSS/Getting_Started/XML_data", "pl": "pl/CSS/Na_pocz\u0105tek/Dane_XML", "pt": "pt/CSS/Como_come\u00e7ar/Dados_XML" } ) }} |