diff options
Diffstat (limited to 'files/fr/css/premiers_pas')
16 files changed, 0 insertions, 3350 deletions
diff --git a/files/fr/css/premiers_pas/boîtes/index.html b/files/fr/css/premiers_pas/boîtes/index.html deleted file mode 100644 index fd147c876d..0000000000 --- a/files/fr/css/premiers_pas/boîtes/index.html +++ /dev/null @@ -1,74 +0,0 @@ ---- -title: Boîtes -slug: CSS/Premiers_pas/Boîtes -tags: - - CSS - - 'CSS:Premiers_pas' -translation_of: Learn/CSS/Building_blocks -translation_of_original: Web/Guide/CSS/Getting_started/Boxes ---- -<p> </p> -<p>Cette page explique comment utiliser CSS pour contrôler l'espace occupé par un élément lorsqu'il est affiché.</p> -<p>Dans votre document d'exemple, vous changerez l'espacement et ajouterez des règles décoratives.</p> -<h3 id="Information_:_les_bo.C3.AEtes" name="Information_:_les_bo.C3.AEtes">Information : les boîtes</h3> -<p>Lorsque votre navigateur affiche un élément, celui-ci prend une certaine place. L'espace occupé est divisé en quatre parties.</p> -<p>Au centre, l'espace dont l'élément a besoin pour afficher son contenu. Autour du contenu, il y a des marges internes (padding). Autour des marges internes, il y a une bordure (border). Autour des bordures, il y a des marges extérieures (margin).</p> -<table> <tbody> <tr> <td style="width: 26em;"> <div style="background-color: #eee; padding: 0px 2em 2em 2em; width: 20em;"> <p style="text-align: center; margin: 0px;">margin</p> <p style="text-align: center; margin: 0px 0px -.75em 0px;">border</p> <div style="background-color: #fff; padding: 0px 2em 2em 2em; border: 4px solid #fd9;"> <p style="text-align: center;">padding</p> <div style="background-color: #eee;"> <p style="text-align: center; padding: 0px; margin: 0px; font-size: 200%; font-weight: bold; color: #999;">élément</p> </div> </div> </div> <p><em>Une partie de la mise en page est visible en gris.</em></p> </td> <td> <div style="background-color: #fff; padding: 0px 2em 2em 2em; width: 20em;"> <p style="text-align: center; margin: 0px;"> </p> <p style="text-align: center; margin: 0px 0px -.75em 0px;"> </p> <div style="background-color: #fff; padding: 0px 2em 2em 2em; border: 4px solid #fd9;"> <p style="text-align: center;"> </p> <div style="background-color: #fff;"> <p style="text-align: center; padding: 0px; margin: 0px; font-size: 200%; font-weight: bold; color: #999;">élément</p> </div> </div> </div> <p><em>Ce qui apparait dans le navigateur.</em></p> </td> </tr> </tbody> -</table> -<p>Les marges intérieures, les bordures et les marges extérieures peuvent avoir des tailles différentes en haut, à droite, en bas et à gauche de l'élément. Chacune de ces tailles peut être zéro.</p> -<p>Les marges intérieures sont toujours de la même couleur que le fond de l'élément. Lorsque vous choisissez la couleur de fond, vous appliquez donc la couleur à l'élément lui-même et à ses marges intérieures. Celles-ci sont toujours transparentes.</p> -<table> <tbody> <tr> <td style="width: 22em;"> <div style="background-color: #eee; padding: 0px 2em 2em 2em; width: 16em;"> <p style="text-align: center; margin: 0px;">margin</p> <p style="text-align: center; margin: 0px 0px -.75em 0px;">border</p> <div style="background-color: #efe; padding: 0px 2em 2em 2em; border: 4px solid #fd9;"> <p style="text-align: center;">padding</p> <div style="background-color: #ded;"> <p style="text-align: center; padding: 0px; margin: 0px; font-size: 200%; font-weight: bold; color: #898;">élément</p> </div> </div> </div> <p><em>L'élément a un fond vert.</em></p> </td> <td> <div style="background-color: #fff; padding: 0px 2em 2em 2em; width: 16em;"> <p style="text-align: center; margin: 0px;"> </p> <p style="text-align: center; margin: 0px 0px -.75em 0px;"> </p> <div style="background-color: #efe; padding: 0px 2em 2em 2em; border: 4px solid #fd9;"> <p style="text-align: center;"> </p> <div style="background-color: #efe;"> <p style="text-align: center; padding: 0px; margin: 0px; font-size: 200%; font-weight: bold; color: #898;">élément</p> </div> </div> </div> <p><em>Ce qui apparaît dans le navigateur.</em></p> </td> </tr> </tbody> -</table> -<h4 id="Bordures" name="Bordures">Bordures</h4> -<p>Vous pouvez utiliser des bordures pour décorer des éléments avec des lignes ou des encadrements.</p> -<p>Pour spécifier la même bordure tout autour d'un élément, utilisez la propriété <code>border</code>. Spécifiez l'épaisseur (habituellement en pixels pour l'affichage à l'écran), le style et la couleur.</p> -<p>Les styles sont :</p> -<table style="margin-left: 2em;"> <tbody> <tr> <td style="width: 6em;"> <div style="border: 2px solid #4a4; margin: .5em; padding: .5em; width: 6em; text-align: center;"><code>solid</code> (trait plein)</div> </td> <td style="width: 6em;"> <div style="border: 2px dotted #4a4; margin: .5em; padding: .5em; width: 6em; text-align: center;"><code>dotted</code> (pointillés)</div> </td> <td style="width: 6em;"> <div style="border: 2px dashed #4a4; margin: .5em; padding: .5em; width: 6em; text-align: center;"><code>dashed</code> (trait interrompu)</div> </td> <td style="width: 6em;"> <div style="border: 4px double #4a4; margin: .5em; padding: .5em; width: 6em; text-align: center;"><code>double</code> (trait double)</div> </td> </tr> <tr> <td style="width: 6em;"> <div style="border: 2px inset #4a4; margin: .5em; padding: .5em; width: 6em; text-align: center;"><code>inset</code> (creux)</div> </td> <td style="width: 6em;"> <div style="border: 2px outset #4a4; margin: .5em; padding: .5em; width: 6em; text-align: center;"><code>outset</code> (en relief)</div> </td> <td style="width: 6em;"> <div style="border: 4px ridge #4a4; margin: .5em; padding: .5em; width: 6em; text-align: center;"><code>ridge</code> (bordure en relief)</div> </td> <td style="width: 6em;"> <div style="border: 4px groove #4a4; margin: .5em; padding: .5em; width: 6em; text-align: center;"><code>groove</code> (bordure en creux)</div> </td> </tr> </tbody> -</table> -<p>Vous pouvez également définir le style à <code>none</code> ou <code>hidden</code> pour enlever explicitement la bordure, ou mettre sa couleur à <code>transparent</code> pour rendre celle-ci invisible sans changer la mise en page.</p> -<p>Pour spécifier les bordures un côté à la fois, utilisez les propriétés : <code>border-top</code>, <code>border-right</code>, <code>border-bottom</code>, <code>border-left</code>. Vous pouvez utiliser celles-ci pour spéficier une bordure d'un seul côté, ou différentes bordures sur différents côtés.</p> -<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;"> <caption>Exemples</caption> <tbody> <tr> <td>Cette règle change la couleur de fond et la bordure supérieure des éléments de titre : <div style="width: 40em;"> <pre class="eval">h3 { - border-top: 4px solid #7c7; /* vert moyen */ - background-color: #efe; /* vert pâle */ - color: #050; /* vert foncé */ - } -</pre> </div> <p>Le résultat ressemble à ceci :</p> <table> <tbody> <tr> <td> <p style="font-size: 133%; font-weight: bold; background-color: #efe; border-top: 4px solid #7c7; color: #050; padding-right: 6em;">Un titre avec du style</p> </td> </tr> </tbody> </table> <p><br> Cette règle rend les images plus faciles à voir en leur donnant une bordure grisée tout autour :</p> <div style="width: 30em;"> <pre class="eval">img {border: 2px solid #ccc;} -</pre> </div> <p>Le résultat ressemble à ceci :</p> <table> <tbody> <tr> <td>Image :</td> <td style="border: 2px solid #ccc;"><img alt="Image:ligne-bleue.png" class="internal" src="/@api/deki/files/1398/=Ligne-bleue.png"></td> </tr> </tbody> </table> </td> </tr> </tbody> -</table> -<h4 id="Marges_int.C3.A9rieures_et_ext.C3.A9rieures" name="Marges_int.C3.A9rieures_et_ext.C3.A9rieures">Marges intérieures et extérieures</h4> -<p>Utilisez les marges pour ajuster les positions des éléments et pour créer de l'espace autour d'eux.</p> -<p>Utilisez les propriétés <code>margin</code> et <code>padding</code> pour changer respectivement la largeur des marges extérieures et intérieures.</p> -<p>Si vous spécifiez une seule largeur, elle s'applique tout autour de l'élément (en haut, à droite, en bas et à gauche).</p> -<p>Si vous spécifiez deux largeurs, la première s'applique en haut et en bas, la seconde sur les côtés droits et gauches.</p> -<p>Vous pouvez spécifier les quatres largeurs dans cet ordre : haut, droite, bas, gauche.</p> -<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;"> <caption>Exemple</caption> <tbody> <tr> <td>Cette règle marque les paragraphes de la classe <code>remarque</code> en leur donnant une bordure rouge tout autour. <p>Une marge intérieure (padding) sépare légèrement cette bordure du texte.</p> <p>Une marge extérieure (margin) à gauche met le paragraphe en retrait par rapport au reste du texte :</p> <div style="width: 30em;"> <pre class="eval">p.remarque { - border: 2px solid red; - padding: 4px; - margin-left: 24px; - } -</pre> </div> <p>Le résultat ressemble à ceci :</p> <table> <tbody> <tr> <td> <p>Ceci est un paragraphe normal.</p> <p style="border: 2px solid red; padding: 4px 6em 4px 4px; margin: 0px 0px 0px 24px;">Ceci est une remarque.</p> </td> </tr> </tbody> </table> </td> </tr> </tbody> -</table> -<table style="border: 1px solid #36b; padding: 1em; background-color: #f4f4f4; margin-bottom: 1em;"> <caption>Plus de détails</caption> <tbody> <tr> <td>Lorsque vous utilisez des marges pour ajuster la façon dont les éléments sont placés, vos règles de style interagissent avec les réglages par défaut du navigateur de différentes manières, qui sont parfois complexes. <p>Différents navigateurs peuvent placer les éléments différemment. Le résultat peut sembler similaire jusqu'à ce que votre feuille de style change des choses, et celle-ci peut parfois donner des résultats surprenants.</p> <p>Pour obtenir le résultat voulu, il se peut que vous ayez à changer le balisage de votre document. La page suivante de ce tutoriel donne plus d'informations à ce sujet.</p> <p>Pour des informations détaillées à propos des marges et des bordures, consultez <a class="external" href="http://www.w3.org/TR/CSS21/box.html">Box model</a> dans la spécification CSS.</p> </td> </tr> </tbody> -</table> -<h3 id="Action_:_ajout_de_bordures" name="Action_:_ajout_de_bordures">Action : ajout de bordures</h3> -<p>Éditez votre fichier CSS. Ajoutez cette règle pour dessigner une ligne en travers de la page au dessus de chaque titre :</p> -<div style="width: 30em;"> <pre class="eval">h3 {border-top: 1px solid gray;} -</pre> -</div> -<p>Si vous avez tenté le challenge sur la page précédente, modifiez la règle que vous aviez créée, sinon ajoutez cette nouvelle règle pour ajouter de l'espace sous chaque élément de liste :</p> -<div style="width: 30em;"> <pre class="eval">li { - list-style: lower-roman; - margin-bottom: 8px; - } -</pre> -</div> -<p>Actualisez dans votre navigateur pour voir le résultat :</p> -<table style="border: 2px outset #36b; padding: 1em; background-color: white;"> <tbody> <tr> <td> <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(A) Les océans</p> <ul style=""> <li style="margin-bottom: 8px;">Arctique</li> <li style="margin-bottom: 8px;">Atlantique</li> <li style="margin-bottom: 8px;">Pacifique</li> <li style="margin-bottom: 8px;">Indien</li> <li style="margin-bottom: 8px;">Antarctique</li> </ul> <p style="font-weight: bold; font-size: 133%; margin-top: 1em; margin-bottom: .3em; padding: .4em 4em .16em 0; border-top: 1px solid gray;">(B) Paragraphes numérotés</p> <p><strong>1: </strong>Lorem ipsum</p> <p><strong>2: </strong>Dolor sit</p> <p><strong>3: </strong>Amet consectetuer</p> <p><strong>4: </strong>Magna aliquam</p> <p><strong>5: </strong>Autem veleum</p> </td> </tr> </tbody> -</table> -<p> </p> -<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;"> <caption>Challenge</caption> <tbody> <tr> <td>Ajoutez une règle à votre feuille de style pour entourer les océans d'une bordure épaisse dans une couleur rapellant celle de la mer — quelque chose comme ceci : <table style="border: 2px outset #36b; padding: 1em; background-color: white;"> <tbody> <tr> <td> <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(A) Les océans</p> <div style="border: 12px solid #69b; padding-left: 1em;"> <ul style=""> <li style="margin-bottom: 8px;">Arctique</li> <li style="margin-bottom: 8px;">Atlantique</li> <li style="margin-bottom: 8px;">Pacifique</li> <li style="margin-bottom: 8px;">Indien</li> <li style="margin-bottom: 8px;">Antarctique</li> </ul> </div> <p style="font-weight: bold; font-size: 133%; margin-top: 1em; margin-bottom: .3em; padding: .4em 4em .16em 0; border-top: 1px solid gray;">(B)Paragraphes numérotés</p> <p><strong>. . .</strong></p> </td> </tr> </tbody> </table> <p>(Il n'est pas nécessaire de retrouver exactement la même épaisseur et la même couleur qu'ici.)</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 href="/Talk:fr/CSS/Premiers_pas/Boîtes" title="Talk:fr/CSS/Premiers_pas/Boîtes">page de discussion</a>.</p> -<p>En spécifiant des marges, vous avez modifié la mise en page de votre document. À la page suivante, vous apprendrez d'autres manières de changer celle-ci : <strong><a href="/fr/CSS/Premiers_pas/Mise_en_page" title="fr/CSS/Premiers_pas/Mise_en_page">Mise en page</a></strong>.</p> -<p>{{ languages( { "en": "en/CSS/Getting_Started/Boxes", "pl": "pl/CSS/Na_pocz\u0105tek/Bloki", "pt": "pt/CSS/Como_come\u00e7ar/Caixas" } ) }}</p> diff --git a/files/fr/css/premiers_pas/cascade_et_héritage/index.html b/files/fr/css/premiers_pas/cascade_et_héritage/index.html deleted file mode 100644 index d5c4ea0ea9..0000000000 --- a/files/fr/css/premiers_pas/cascade_et_héritage/index.html +++ /dev/null @@ -1,110 +0,0 @@ ---- -title: Cascade et héritage -slug: CSS/Premiers_pas/Cascade_et_héritage -tags: - - CSS - - 'CSS:Premiers_pas' -translation_of: Learn/CSS/Building_blocks/Cascade_and_inheritance -translation_of_original: Web/Guide/CSS/Getting_started/Cascading_and_inheritance ---- -<p> </p> -<p>Cette page met en évidence la façon dont les feuilles de style interagissent dans une cascade et comment les éléments héritent leur style de leurs parents.</p> -<p>Vous améliorerez votre feuille de style d'exemple en utilisant l'héritage pour changer le style de nombreuses parties de votre document à la fois.</p> -<h3 id="Information_:_cascade_et_h.C3.A9ritage" name="Information_:_cascade_et_h.C3.A9ritage">Information : cascade et héritage</h3> -<p>Le style final d'un élément peut être spécifié à de nombreux endroits, qui peuvent interagir de manière complexe. C'est ce qui rend CSS puissant, mais peut aussi le rendre déroutant et difficile à déboguer.</p> -<p>Trois sources principales d'information de style forment une cascade.</p> -<p>Celles-ci sont :</p> -<ul> - <li>Le style par défaut du navigateur pour le langage de balisage</li> - <li>Le style spécifié par l'utilisateur lisant le document</li> - <li>Le style lié au document par son auteur</li> -</ul> -<p>Le style de l'utilisateur modifie le style par défaut du navigateur. Le style de l'auteur du document modifie ensuite le style plus avant. Dans ce tutoriel, vous êtes l'auteur de votre document, et vous travaillez uniquement avec des feuilles de style d'auteur.</p> -<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4;"> - <caption> - Exemple</caption> - <tbody> - <tr> - <td>Lorsque vous lisez ce document dans votre navigateur, une partie du style visible vient des réglages par défaut de votre navigateur pour HTML. - <p>Une partie du style peut venir de vos paramètres utilisateur dans les Options, ou d'un fichier <code>userContent.css</code> dans le profil de votre navigateur Mozilla.</p> - <p>Enfin, une partie du style provient de feuilles de style liées au document par le serveur wiki.</p> - </td> - </tr> - </tbody> -</table> -<p><br> - Lorsque vous ouvrez votre document d'exemple dans le navigateur, les éléments STRONG sont en gras par rapport au reste du texte. Cela provient du style par défaut du navigateur pour HTML.</p> -<p>Les éléments STRONG sont rouges. Cela provient de votre propre feuille de style.</p> -<p>Les éléments STRONG héritent aussi en grande partie du style de l'élément P, étant ses enfants. De même, l'élément P hérite en grande partie du style de l'élément BODY.</p> -<p>Pour les styles dans la cascade, les feuilles de style de l'auteur ont priorité, ensuite ceux de l'utilisateur et enfin les réglages par défaut du navigateur.</p> -<p>Pour les styles hérités, le style propre d'un nœud enfant a priorité sur le style hérité de son parent.</p> -<p>Ce ne sont pas les seules priorités qui s'appliquent. Une prochaine page du tutoriel expliquera cela plus en détail.</p> -<table style="border: 1px solid #36b; padding: 1em; background-color: #f4f4f4;"> - <caption> - Plus de détails</caption> - <tbody> - <tr> - <td>CSS fournit également une manière pour l'utilisateur de passer outre le style de l'auteur du document, en utilisant le mot-clé <code>!important</code>. - <p>Cela signifie qu'en tant qu'auteur du document, vous ne pouvez pas toujours prédire exactement ce que vos lecteurs verront.</p> - <p>Si vous voulez connaître tous les détails de la cascade et de l'héritage, consultez <a class="external" href="http://www.w3.org/TR/CSS21/cascade.html">Assigning property values, Cascading, and Inheritance</a> <span class="comment">note : ce lien existe(ra) peut-être quelque part en français</span> dans la spécification CSS.</p> - </td> - </tr> - </tbody> -</table> -<h3 id="Action_:_utilisation_de_l.27h.C3.A9ritage" name="Action_:_utilisation_de_l.27h.C3.A9ritage">Action : utilisation de l'héritage</h3> -<p>Éditez votre exemple de fichier CSS.</p> -<p>Ajoutez cette ligne à l'aide d'un copier-coller. Que vous la mettiez au dessus ou en dessous de la ligne déjà existante n'a pas grande importance. Cependant, l'ajouter en haut est plus logique étant donné que dans votre document l'élément P est le parent de l'élément STRONG :</p> -<pre>p {color: blue; text-decoration: underline;} -</pre> -<p>Maintenant, actualisez dans votre navigateur pour voir l'effet sur votre document. Le soulignement affecte tout le texte du paragraphe, y compris les lettres initiales. Les éléments STRONG ont hérité du style souligné depuis leur élément parent P.</p> -<p>Mais les éléments STRONG sont toujours rouges. La couleur rouge est leur propre style, il a donc priorité sur la couleur bleue de leur élément parent P.</p> -<table> - <tbody> - <tr> - <td> - <table style="border: 2px outset #36b; padding: 1em; margin-right: 2em;"> - <caption> - Avant</caption> - <tbody> - <tr> - <td><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td> - </tr> - </tbody> - </table> - </td> - <td> - <table style="border: 2px outset #36b; padding: 1em;"> - <caption> - Après</caption> - <tbody> - <tr> - <td style="color: blue; text-decoration: underline;"><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td> - </tr> - </tbody> - </table> - </td> - </tr> - </tbody> -</table> -<p> </p> -<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4;"> - <caption> - Challenge</caption> - <tbody> - <tr> - <td>Modifiez votre feuille de style afin que seules les lettres rouges soient soulignées : - <table style="border: 2px outset #36b; padding: 1em;"> - <tbody> - <tr> - <td style="color: blue;"><strong style="color: red; text-decoration: underline;">C</strong>ascading <strong style="color: red; text-decoration: underline;">S</strong>tyle <strong style="color: red; text-decoration: underline;">S</strong>heets</td> - </tr> - </tbody> - </table> - </td> - </tr> - </tbody> -</table> -<p> </p> -<h4 id="Pour_continuer" name="Pour_continuer">Pour continuer</h4> -<p>Si vous avez eu des difficultés à comprendre cette page, ou avez des commentaires à son sujet, n'hésitez pas à contribuer à sa <a>page de discussion</a>.</p> -<p>Votre feuille de style d'exemple spécifie des styles pour les balises <code>P</code> et <code>STRONG</code>, qui changent le style des éléments correspondants au sein de votre document. La page suivante explique comment spécifier des styles de manière plus sélective : <b><a href="/fr/docs/CSS/Premiers_pas/Les_s%c3%a9lecteurs">Les sélecteurs</a></b>.</p> diff --git a/files/fr/css/premiers_pas/couleurs/index.html b/files/fr/css/premiers_pas/couleurs/index.html deleted file mode 100644 index 24952f7505..0000000000 --- a/files/fr/css/premiers_pas/couleurs/index.html +++ /dev/null @@ -1,314 +0,0 @@ ---- -title: Couleurs -slug: CSS/Premiers_pas/Couleurs -tags: - - CSS - - 'CSS:Premiers_pas' -translation_of: Learn/CSS/Introduction_to_CSS/Values_and_units#Colors -translation_of_original: Web/Guide/CSS/Getting_started/Color ---- -<p> </p> -<p>Cette page donne plus de détails sur la manière de spécifier les couleurs en CSS.</p> -<p>Dans votre exemple de feuille de style, vous ajouterez des couleurs de fond.</p> -<h3 id="Information_:_les_couleurs" name="Information_:_les_couleurs">Information : les couleurs</h3> -<p>Dans ce tutoriel, jusqu'à présent, vous avez utilisé un nombre limité de couleurs nommées. CSS 2 définit 17 couleurs nommées en tout. Certains des noms peuvent ne pas êtres ce à quoi vous vous attendez :</p> -<table style="border: 0px; margin-left: 2em; text-align: right;"> - <tbody> - <tr> - <td> </td> - <td>black</td> - <td style="width: 2em; height: 2em; background-color: black;"> </td> - <td>gray</td> - <td style="width: 2em; height: 2em; background-color: gray;"> </td> - <td>silver</td> - <td style="width: 2em; height: 2em; background-color: silver;"> </td> - <td>white</td> - <td style="width: 2em; height: 2em; background-color: white; border: 1px dotted gray;"> </td> - </tr> - <tr> - <td>primaires</td> - <td>red</td> - <td style="width: 2em; height: 2em; background-color: red;"> </td> - <td>lime</td> - <td style="width: 2em; height: 2em; background-color: lime;"> </td> - <td>blue</td> - <td style="width: 2em; height: 2em; background-color: blue;"> </td> - </tr> - <tr> - <td>secondaires</td> - <td>yellow</td> - <td style="width: 2em; height: 2em; background-color: yellow;"> </td> - <td>aqua</td> - <td style="width: 2em; height: 2em; background-color: aqua;"> </td> - <td>fuchsia</td> - <td style="width: 2em; height: 2em; background-color: fuchsia;"> </td> - </tr> - <tr> - <td> </td> - <td>maroon</td> - <td style="width: 2em; height: 2em; background-color: maroon;"> </td> - <td>orange</td> - <td style="width: 2em; height: 2em; background-color: orange;"> </td> - <td>olive</td> - <td style="width: 2em; height: 2em; background-color: olive;"> </td> - <td>purple</td> - <td style="width: 2em; height: 2em; background-color: purple;"> </td> - <td>green</td> - <td style="width: 2em; height: 2em; background-color: green;"> </td> - <td>navy</td> - <td style="width: 2em; height: 2em; background-color: navy;"> </td> - <td>teal</td> - <td style="width: 2em; height: 2em; background-color: teal;"> </td> - </tr> - </tbody> -</table> -<p> </p> -<table style="border: 1px solid #36b; padding: 1em; background-color: #f4f4f4;"> - <caption> - Plus de détails</caption> - <tbody> - <tr> - <td>Votre navigateur peut supporter de nombreux autres noms de couleurs, comme : - <table style="border: 0px; margin: .5em 0px .5em 2em; text-align: right; background-color: inherit;"> - <tbody> - <tr> - <td>dodgerblue</td> - <td style="width: 2em; height: 2em; background-color: dodgerblue;"> </td> - <td>peachpuff</td> - <td style="width: 2em; height: 2em; background-color: peachpuff;"> </td> - <td>tan</td> - <td style="width: 2em; height: 2em; background-color: tan;"> </td> - <td>firebrick</td> - <td style="width: 2em; height: 2em; background-color: firebrick;"> </td> - <td>aquamarine</td> - <td style="width: 2em; height: 2em; background-color: aquamarine;"> </td> - </tr> - </tbody> - </table> - <p>Pour plus de détails et la liste complète, consultez : <a class="external" href="http://www.w3.org/TR/2003/CR-css3-color-20030514/#svg-color">SVG color keywords</a> dans le module CSS 3 Color. Faites attention à ne pas utiliser de noms de couleurs que le navigateur de vos lecteurs peut ne pas comprendre.</p> - </td> - </tr> - </tbody> -</table> -<p>Pour une palette plus étendue, vous pouvez spécifier les composantes rouges, vertes et bleues de la couleur désirée en utilisant un signe dièse (carré) suivi de trois chiffres - <i> - hexadécimaux</i> - dans l'intervalle 0 – 9, a – f. Les lettres a – f représentent les valeurs 10 – 15:</p> -<table style="border: 0px; margin-left: 2em;"> - <tbody> - <tr> - <td>noir</td> - <td style="width: 2em; height: 2em; background-color: #000;"> </td> - <td><code>#000</code></td> - </tr> - <tr> - <td>rouge pur</td> - <td style="width: 2em; height: 2em; background-color: #f00;"> </td> - <td><code>#f00</code></td> - </tr> - <tr> - <td>vert pur</td> - <td style="width: 2em; height: 2em; background-color: #0f0;"> </td> - <td><code>#0f0</code></td> - </tr> - <tr> - <td>bleu pur</td> - <td style="width: 2em; height: 2em; background-color: #00f;"> </td> - <td><code>#00f</code></td> - </tr> - <tr> - <td>blanc</td> - <td style="width: 2em; height: 2em; background-color: #fff; border: 1px dotted gray;"> </td> - <td><code>#fff</code></td> - </tr> - </tbody> -</table> -<p>Pour la palette complète, spécifiez deux chiffres hexadécimaux pour chaque composante :</p> -<table style="border: 0px; margin-left: 2em;"> - <tbody> - <tr> - <td>noir</td> - <td style="width: 2em; height: 2em; background-color: #000;"> </td> - <td><code>#000000</code></td> - </tr> - <tr> - <td>rouge pur</td> - <td style="width: 2em; height: 2em; background-color: #f00;"> </td> - <td><code>#ff0000</code></td> - </tr> - <tr> - <td>vert pur</td> - <td style="width: 2em; height: 2em; background-color: #0f0;"> </td> - <td><code>#00ff00</code></td> - </tr> - <tr> - <td>bleu pur</td> - <td style="width: 2em; height: 2em; background-color: #00f;"> </td> - <td><code>#0000ff</code></td> - </tr> - <tr> - <td>blanc</td> - <td style="width: 2em; height: 2em; background-color: #fff; border: 1px dotted gray;"> </td> - <td><code>#ffffff</code></td> - </tr> - </tbody> -</table> -<p>Il est généralement possible d'obtenir ces codes hexadécimaux à six chiffres dans les logiciels de dessin ou d'autres outils.</p> -<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4;"> - <caption> - Exemples</caption> - <tbody> - <tr> - <td>Avec un peu de pratique, vous pouvez ajuster les couleurs à trois chiffres à la main dans la plupart des cas : - <table style="border: 0px; margin-left: 2em; background-color: #fffff4;"> - <tbody> - <tr> - <td>Commencez avec du rouge pur :</td> - <td style="width: 2em; height: 2em; background-color: #f00;"> </td> - <td><code>#f00</code></td> - </tr> - <tr> - <td>Pour le rendre plus pâle, ajoutez un peu de vert et de bleu :</td> - <td style="width: 2em; height: 2em; background-color: #f77;"> </td> - <td><code>#f77</code></td> - </tr> - <tr> - <td>Pour qu'il soit plus orange, ajoutez un peu de vert supplémentaire :</td> - <td style="width: 2em; height: 2em; background-color: #fa7;"> </td> - <td><code>#fa7</code></td> - </tr> - <tr> - <td>Pour le rendre plus sombre, réduisez chacune des composantes :</td> - <td style="width: 2em; height: 2em; background-color: #c74;"> </td> - <td><code>#c74</code></td> - </tr> - <tr> - <td>Pour réduire la saturation, égalisez un peu les composantes :</td> - <td style="width: 2em; height: 2em; background-color: #c98;"> </td> - <td><code>#c98</code></td> - </tr> - <tr> - <td>Si vous les rendez exactement égales, vous obtenez du gris :</td> - <td style="width: 2em; height: 2em; background-color: #ccc;"> </td> - <td><code>#ccc</code></td> - </tr> - </tbody> - </table> - </td> - </tr> - <tr> - <td>Pour un ton pastel comme du bleu pâle : - <table style="border: 0px; margin-left: 2em; background-color: #fffff4;"> - <tbody> - <tr> - <td>Commencez avec du blanc pur :</td> - <td style="width: 2em; height: 2em; background-color: #fff; border: 1px dotted gray;"> </td> - <td><code>#fff</code></td> - </tr> - <tr> - <td>Réduisez légèrement les autres composantes :</td> - <td style="width: 2em; height: 2em; background-color: #eef; border: 1px dotted gray;"> </td> - <td><code>#eef</code></td> - </tr> - </tbody> - </table> - </td> - </tr> - </tbody> -</table> -<p> </p> -<table style="border: 1px solid #36b; padding: 1em; background-color: #f4f4f4;"> - <caption> - Plus de détails</caption> - <tbody> - <tr> - <td>Vous pouvez également spécifier une couleur à l'aide de valeurs RGB décimales dans l'intervalle 0 – 255, ou des pourcentages. - <p>Par exemple, ceci est marron (rouge sombre) :</p> - <div style="width: 24em;"> - <pre> -rgb(128, 0, 0) -</pre> - </div> - <p><br> - Pour plus de détails sur la manière de spécifier des couleurs, consultez <a class="external" href="http://www.w3.org/TR/CSS21/syndata.html#color-units">Colors</a> dans la spécification CSS.</p> - <p>Pour des informations sur l'utilisation des couleurs système comme celle des menus ou des bordures 3D, consultez <a class="external" href="http://www.w3.org/TR/CSS21/ui.html#system-colors">CSS2 System Colors</a> dans la spécification CSS.</p> - </td> - </tr> - </tbody> -</table> -<p> </p> -<h4 id="Propri.C3.A9t.C3.A9s_de_couleur" name="Propri.C3.A9t.C3.A9s_de_couleur">Propriétés de couleur</h4> -<p>Vous avez déjà utilisé la propriété <code>color</code> pour le texte.</p> -<p>Vous pouvez également utiliser <code>background-color</code> pour changer la couleur de fond de certains éléments.</p> -<p>Les fonds peuvent êtres définis à <code>transparent</code> pour enlever explicitement toute couleur, permettant de voir le fond de l'élément parent.</p> -<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4;"> - <caption> - Exemple</caption> - <tbody> - <tr> - <td>Les boîtes <b>Exemple</b> dans ce tutoriel utilisent cette couleur de fond jaune pâle : - <div style="width: 24em;"> - <pre> -background-color: #fffff4; -</pre> - </div> - <p>Les boîtes <b>Plus de détails</b> utilisent ce gris pâle :</p> - <div style="width: 24em;"> - <pre> -background-color: #f4f4f4; -</pre> - </div> - </td> - </tr> - </tbody> -</table> -<h3 id="Action_:_utilisation_des_codes_de_couleur" name="Action_:_utilisation_des_codes_de_couleur">Action : utilisation des codes de couleur</h3> -<p>Éditez votre fichier CSS. Effectuez le changement montré ici en gras pour donner aux lettres initiales un fond bleu pâle. (La mise en page et les commentaires dans votre fichier seront probablement différents du fichier montré ici. Conservez la mise en page et les commentaires de la manière qui vous convient.)</p> -<div style="width: 32em;"> - <pre class="eval">/*** Tutoriel CSS : page des couleurs ***/ - -/* police de la page */ -body {font: 16px "Comic Sans MS", cursive;} - -/* paragraphes */ -p {color: blue;} -#premier {font-style: italic;} - -/* lettres initiales */ -strong { - color: red; - <strong>background-color: #ddf;</strong> - font: 200% serif; - } - -.carotte {color: red;} -.epinard {color: green;} -</pre> -</div> -<p>Actualisez dans votre navigateur pour voir le résultat :</p> -<table> - <tbody> - <tr> - <td style="font: italic 16px 'Comic Sams MS', cursive; color: blue;"><strong style="color: red; background-color: #ddf; font: 200% serif;">C</strong>ascading <strong style="color: green; background-color: #ddf; font: 200% serif;">S</strong>tyle <strong style="color: green; background-color: #ddf; font: 200% serif;">S</strong>heets</td> - </tr> - <tr> - <td style="font: 16px 'Comic Sams MS', cursive; color: blue;"><strong style="color: red; background-color: #ddf; font: 200% serif;">C</strong>ascading <strong style="color: red; background-color: #ddf; font: 200% serif;">S</strong>tyle <strong style="color: red; background-color: #ddf; font: 200% serif;">S</strong>heets</td> - </tr> - </tbody> -</table> -<p> </p> -<table style="border: 1px solid #36b; padding: 1em; background-color: #ffe; width: 100%;"> - <caption> - Challenge</caption> - <tbody> - <tr> - <td>Dans votre fichier CSS, changez tous les noms de couleur en codes hexadécimaux à trois chiffres sans affecter le résultat. - <p>(Ceci ne peut pas être fait exactement, mais vous pouvez arriver tout près. Pour que ce soit exact, vous aurez besoin des codes à six chiffres et de regarder dans la spécification CSS ou utiliser un outil graphique pour obtenir les valeurs précises.)</p> - </td> - </tr> - </tbody> -</table> -<p> </p> -<h4 id="Pour_continuer" name="Pour_continuer">Pour continuer</h4> -<p>Votre document d'exemple et votre feuille de style séparent strictement le contenu du style.</p> -<p>La page suivante explique comment vous pouvez faire des exceptions à cette séparation stricte : <b><a href="/fr/docs/CSS/Premiers_pas/Contenu">Contenu</a></b>.</p> diff --git a/files/fr/css/premiers_pas/des_css_lisibles/index.html b/files/fr/css/premiers_pas/des_css_lisibles/index.html deleted file mode 100644 index 57da469f28..0000000000 --- a/files/fr/css/premiers_pas/des_css_lisibles/index.html +++ /dev/null @@ -1,155 +0,0 @@ ---- -title: Des CSS lisibles -slug: CSS/Premiers_pas/Des_CSS_lisibles -tags: - - CSS - - 'CSS:Premiers_pas' -translation_of: Learn/CSS/Introduction_to_CSS/Syntax#Beyond_syntax_make_CSS_readable -translation_of_original: Web/Guide/CSS/Getting_started/Readable_CSS ---- -<p> </p> -<p>Cette page aborde le style et la grammaire du langage CSS lui-même.</p> -<p>Vous modifierez l'aspect de votre fichier CSS pour le rendre plus lisible.</p> -<h3 id="Information_:_des_CSS__lisibles" name="Information_:_des_CSS__lisibles">Information : des CSS lisibles</h3> -<p>Vous pouvez ajouter des blancs et des commentaires à vos feuilles de style pour les rendre plus lisibles. Vous pouvez également grouper des sélecteurs ensemble, lorsque les même règles s'appliquent à des éléments sélectionnés de manière différente.</p> -<h4 id="Insertion_de_blancs" name="Insertion_de_blancs">Insertion de blancs</h4> -<p>Les feuilles de style peuvent être aérées à l'aide d'espaces, de tabulations et de retours à la ligne. Elles deviendront ainsi plus lisibles.</p> -<p>Votre fichier CSS d'exemple a actuellement une règle par ligne, et à peu près le minimum possible d'espaces blancs. Dans une feuille de style complexe, ce type de mise en page devient rapidement difficile à lire, et rend la feuille difficile à maintenir.</p> -<p>La mise en page à utiliser est généralement une question de préférence personnelle, mais si vos feuilles de style font partie de projets partagés, ceux-ci peuvent avoir leurs propres conventions.</p> -<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;"> - <caption> - Exemples</caption> - <tbody> - <tr> - <td>Certaines personnes aiment la mise en page compacte que nous avons utilisée jusqu'à présent, ne coupant une ligne que lorsqu'elle devient très longue : - <pre> -.carotte {color: orange; text-decoration: underline; font-style: italic;} -</pre> - <p>D'autres préfèrent un couple propriété-valeur par ligne :</p> - <div style="width: 45em;"> - <pre class="eval"> -.carotte -{ -color: orange; -text-decoration: underline; -font-style: italic; -} -</pre> - </div> - <p>Certains utilisent une indentation — deux espaces, quatre espaces, ou encore une tabulation :</p> - <div style="width: 45em;"> - <pre class="eval"> -.carotte { - color: orange; - text-decoration: underline; - font-style: italic; -} -</pre> - </div> - <p>D'autres apprécient que tout soit aligné verticalement (mais ce type de mise en page est difficile à maintenir) :</p> - <div style="width: 45em;"> - <pre class="eval"> -.carotte - { - color : orange; - text-decoration : underline; - font-style : italic; - } -</pre> - </div> - <p>Par ailleurs, si certains utilisent des tabulations, d'autres utiliseront uniquement des espaces.</p> - </td> - </tr> - </tbody> -</table> -<h4 id="Commentaires" name="Commentaires">Commentaires</h4> -<p>Les commentaires en CSS commencent avec <code>/*</code> et se terminent par <code>*/</code>.</p> -<p>Vous pouvez utiliser les commentaires pour ajouter vos remarques dans la feuille de style, mais aussi pour <em>mettre en commentaire</em> temporairement certaines parties à des fins de tests.</p> -<p>Pour mettre en commentaire une partie de feuille de style, placez les marques de commentaire de part et d'autre de celle-ci afin que le navigateur l'ignore. Veillez à commencer et à terminer le commentaire à des endroits appropriés, le reste de la feuille de style doit conserver une syntaxe correcte.</p> -<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;"> - <caption> - Exemple</caption> - <tbody> - <tr> - <td> - <div style="width: 45em;"> - <pre class="eval"> -/* style pour la lettre C initiale dans le premier paragraphe */ -.carotte { - color: orange; - text-decoration: underline; - font-style: italic; - } -</pre> - </div> - </td> - </tr> - </tbody> -</table> -<h4 id="S.C3.A9lecteurs_group.C3.A9s" name="S.C3.A9lecteurs_group.C3.A9s">Sélecteurs groupés</h4> -<p>Lorsque beaucoup d'éléments ont le même style, vous pouvez spécifier un groupe de sélecteurs en les séparant par des virgules. La déclaration s'applique à chacun des éléments sélectionnés.</p> -<p>Ailleurs dans votre feuille de style, vous pouvez spécifier à nouveau les mêmes sélecteurs individuellement, pour leur appliquer des règles de style uniques.</p> -<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;"> - <caption> - Exemple</caption> - <tbody> - <tr> - <td>Cette règle rend les éléments <small>H1</small>, <small>H2</small> et <small>H3</small> de la même couleur. - <p>Il est pratique de spécifier la couleur en un seul endroit, au cas où celle-ci doit être changée par la suite.</p> - <div style="width: 30em;"> - <pre class="eval"> -/* couleur pour les titres */ -h1, h2, h3 {color: navy;} -</pre> - </div> - </td> - </tr> - </tbody> -</table> -<h3 id="Action_:_ajout_de_commentaires_et_am.C3.A9lioration_de_la_mise_en_page" name="Action_:_ajout_de_commentaires_et_am.C3.A9lioration_de_la_mise_en_page">Action : ajout de commentaires et amélioration de la mise en page</h3> -<p>Éditez votre fichier CSS, et assurez-vous qu'il comporte les règles suivantes (dans n'importe quel ordre) :</p> -<div style="width: 30em;"> - <pre class="eval">strong {color: red;} -.carotte {color: orange;} -.epinard {color: green;} -#premier {font-style: italic;} -p {color: blue;} -</pre> -</div> -<p>Rendez-le plus lisible en le réarrangeant d'une manière que vous trouvez logique, et en ajoutant des blancs et des commentaires où vous les trouvez appropriés.</p> -<p>Enregistrez le fichier et actualisez l'affichage de votre navigateur pour vérifier que vos changements n'ont pas affecté le fonctionnement de la feuille de style :</p> -<table style="border: 2px outset #36b; padding: 1em;"> - <tbody> - <tr> - <td style="font-style: italic; color: blue;"><strong style="color: orange;">C</strong>ascading <strong style="color: green;">S</strong>tyle <strong style="color: green;">S</strong>heets</td> - </tr> - <tr> - <td style="color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td> - </tr> - </tbody> -</table> -<p> </p> -<table style="border: 1px solid #36b; padding: 1em; background-color: #ffe;"> - <caption> - Challenge</caption> - <tbody> - <tr> - <td>Mettez en commentaire une partie de votre feuille de style, sans rien changer d'autre, afin de rendre la toute première lettre de votre document rouge : - <table style="border: 2px outset #36b; padding: 1em; background-color: white;"> - <tbody> - <tr> - <td style="font-style: italic; color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: green;">S</strong>tyle <strong style="color: green;">S</strong>heets</td> - </tr> - <tr> - <td style="color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td> - </tr> - </tbody> - </table> - <p>(Il existe plusieurs manières de faire.)</p> - </td> - </tr> - </tbody> -</table> -<p> </p> -<h4 id="Pour_continuer" name="Pour_continuer">Pour continuer</h4> -<p>Votre feuille de style d'exemple mettait du texte en italique et souligné. La page suivante détaillera d'autres manières de spécifier l'apparence du texte dans votre document : <strong><a href="/fr/docs/CSS/Premiers_pas/Styles_de_texte" title="fr/CSS/Premiers_pas/Styles_de_texte">Styles de texte</a></strong></p> diff --git a/files/fr/css/premiers_pas/fonctionnement_de_css/index.html b/files/fr/css/premiers_pas/fonctionnement_de_css/index.html deleted file mode 100644 index aa08f6ffea..0000000000 --- a/files/fr/css/premiers_pas/fonctionnement_de_css/index.html +++ /dev/null @@ -1,122 +0,0 @@ ---- -title: Fonctionnement de CSS -slug: CSS/Premiers_pas/Fonctionnement_de_CSS -tags: - - CSS - - 'CSS:Premiers_pas' -translation_of: Learn/CSS/First_steps/How_CSS_works -translation_of_original: Web/Guide/CSS/Getting_started/How_CSS_works ---- -<p> </p> - -<p>Cette page explique comment CSS fonctionne dans votre navigateur. Vous analyserez votre document de démonstration, révélant les détails de son style.</p> - -<h3 id="Information_:_fonctionnement_de_CSS" name="Information_:_fonctionnement_de_CSS">Information : fonctionnement de CSS</h3> - -<p>Lorsque Mozilla affiche un document, il doit combiner le contenu du document avec ses informations de style. Ainsi, il traite le document en deux étapes :</p> - -<ul> - <li>Au premier stade, Mozilla convertit le langage de balisage et le CSS dans un<em>DOM</em> (modèle objet de document). Le DOM représente le document dans la mémoire de l'ordinateur. Il combine le contenu du document et son style.</li> -</ul> - -<ul> - <li>Au second stade, Mozilla affiche le DOM.</li> -</ul> - -<p>Un langage de balisage utilise des balises pour définir la structure du document. Un élément peut en contenir d'autres, entre sa balise de début et sa balise de fin.</p> - -<p>Un DOM a une structure sous forme d'arbre. Chaque balise et morceau de texte figurant dans le langage de balisage devient un<em>nœud</em> dans la structure arborescente. Les nœuds DOM n'en contiennent pas d'autres, au lieu de cela ils peuvent être<em>parents</em> de nœuds<em>enfants</em> .</p> - -<p>Les nœuds correspondant à des balises sont aussi appelés<em>éléments</em> .</p> - -<table style="background-color: #fffff4; border: 1px solid #36b; margin-bottom: 1em; padding: 1em;"> - <caption>Exemple</caption> - <tbody> - <tr> - <td>Dans votre document exemple, la balise <code><P></code> et sa balise de fermeture <code></P></code> forment un conteneur : - <div style="width: 24em;"> - <pre class="eval"> -<P> - <STRONG>C</STRONG>ascading - <STRONG>S</STRONG>tyle - <STRONG>S</STRONG>heets -</P> -</pre> - </div> - - <p>Dans le DOM, le nœud P correspondant est un parent. Ses enfants sont les nœuds <small>STRONG</small> et les nœuds de texte. Les nœuds <small>STRONG</small> sont eux-mêmes parents, avec des nœuds de texte comme enfants :</p> - - <div style="width: 24em; color: #47c; white-space: pre; padding: 0 0 0 2em;"> - <p><span style="color: black;">P</span> ├─<span style="color: black;">STRONG</span> │ │ │ └─"<span style="color: black;">C</span>" │ ├─"<span style="color: black;">ascading</span>" │ ├─<span style="color: black;">STRONG</span> │ │ │ └─"<span style="color: black;">S</span>" │ ├─"<span style="color: black;">tyle</span>" │ ├─<span style="color: black;">STRONG</span> │ │ │ └─"<span style="color: black;">S</span>" │ └─"<span style="color: black;">heets</span>"</p> - </div> - </td> - </tr> - </tbody> -</table> - -<p>La compréhension du DOM aide à créer, déboguer et maintenir votre CSS, car le DOM est l'endroit où CSS et le document se rencontrent.</p> - -<h3 id="Action_:_Analyse_d.27un_DOM" name="Action_:_Analyse_d.27un_DOM">Action : Analyse d'un DOM</h3> - -<p>Pour analyser un DOM, il est nécessaire d'utiliser un logiciel spécial. Ici, nous utiliserons l'<a href="/fr/docs/Inspecteur_DOM">Inspecteur DOM</a> (DOMi) de Mozilla pour analyser un DOM.</p> - -<p>Utilisez votre navigateur Mozilla pour ouvrir votre document exemple.</p> - -<p>Depuis la barre de menu de votre navigateur, choisissez Outils – Inspecteur DOM, ou éventuellement Outils – Développement Web – Inspecteur DOM.</p> - -<table style="background-color: #f4f4f4; border: 1px solid #36b; padding: 1em;"> - <caption>Plus de détails</caption> - <tbody> - <tr> - <td>Si votre navigateur Mozilla n'a pas de DOMi, vous pouvez réinstaller votre navigateur en vérifiant que vous installez le composant Outils de développement. Revenez ensuite à ce tutoriel. - <p>Si vous ne désirez pas installer le DOMi, vous pouvez passer cette section et vous rendre directement à la page suivante. Cette section peut être passée sans problème pour comprendre le reste du tutoriel.</p> - </td> - </tr> - </tbody> -</table> - -<p><br> - Dans le DOMi, dépliez les nœuds de votre document en cliquant sur leurs flèches.</p> - -<p><strong>Note : </strong> Les espaces dans votre fichier HTML font que le DOMi affichera certains nœuds de texte vides, que vous pouvez ignorer.</p> - -<p>Le résultat peut ressembler à ceci, selon les nœuds que vous avez dépliés :</p> - -<table style="border: 2px outset #36b; padding: 0 0 0 2em;"> - <tbody> - <tr> - <td> - <div style="width: 30em; background-color: transparent; margin: 0px; border: 0px; padding: 0px; color: gray; white-space: pre;"> - <p>│ <span style="font-size: 133%;">▼</span>╴<span style="color: black;">P</span> │ │ │ <span style="font-size: 133%;">▼</span>╴<span style="color: black;">STRONG</span> │ │ └<span style="color: darkblue;">#text</span> │ ├╴<span style="color: darkblue;">#text</span> │ <span style="font-size: 133%;">▶</span>╴<span style="color: black;">STRONG</span> │ │</p> - </div> - </td> - </tr> - </tbody> -</table> - -<p>Lorsque vous sélectionnez un nœud, vous pouvez utiliser le panneau de droite du DOMi pour en savoir plus sur celui-ci. Par exemple, lorsque vous sélectionnez un nœud de texte, DOMi affichera son texte dans le panneau de droite.</p> - -<p>Lorsque vous sélectionnez un nœud d'élément, DOMi l'analyse et fournit une grande quantité d'informations dans le panneau de droite. Les informations de style sont juste une petite partie de ce qui peut y être affiché.</p> - -<p> </p> - -<table style="background-color: #ffe; border: 1px solid #36b; padding: 1em;"> - <caption>Challenge</caption> - <tbody> - <tr> - <td>Dans le DOMi, cliquez sur un nœud <small>STRONG</small>. - <p>Utilisez le panneau de droite pour découvrir à quel endroit la couleur du nœud est mise en rouge, et à quel endroit son apparence est rendue plus grasse que le texte normal.</p> - </td> - </tr> - </tbody> -</table> - -<p> </p> - -<h4 id="Pour_continuer" name="Pour_continuer">Pour continuer</h4> - -<p>Si vous avez des difficultés à comprendre cette page, ou si vous avez des commentaires, contribuez à sa <a>page de discussion</a>.</p> - -<p>Si vous avez relevé le challenge, vous avez vu que les informations de style venant de plusieurs endroits interagissent pour créer le style final d'un élément.</p> - -<p>La page suivante explique plus en détails ces interactions : <strong><a href="/fr/docs/CSS/Premiers_pas/Cascade_et_h%c3%a9ritage">Cascade et héritage</a></strong>.</p> diff --git a/files/fr/css/premiers_pas/graphiques_svg/index.html b/files/fr/css/premiers_pas/graphiques_svg/index.html deleted file mode 100644 index a3c323972f..0000000000 --- a/files/fr/css/premiers_pas/graphiques_svg/index.html +++ /dev/null @@ -1,198 +0,0 @@ ---- -title: Graphiques SVG -slug: CSS/Premiers_pas/Graphiques_SVG -tags: - - CSS - - 'CSS:Premiers_pas' -translation_of: Web/SVG/Tutorial/SVG_and_CSS ---- -<p> </p> -<p>Cette page illustre le langage spécialisé dans la création d'éléments graphiques : SVG.</p> -<p>Vous créerez une démonstration simple visible dans votre navigateur Mozilla avec SVG activé.</p> -<h3 id="Information_:_SVG" name="Information_:_SVG">Information : SVG</h3> -<p> - <i> - SVG</i> - (Scalable Vector Graphics) est un langage basé sur XML permettant de créer des éléments graphiques.</p> -<p>Il peut être utilisé pour des images statiques, ainsi que pour des animations et des interfaces utilisateur.</p> -<p>Comme d'autres langages basés sur XML, SVG permet d'utiliser des feuilles de style CSS afin de séparer le style d'un graphique de son contenu.</p> -<p>De plus, les feuilles de style utilisées avec d'autres langages de balisages peuvent spécifier l'URL d'un graphique SVG lorsqu'une image est requise. Par exemple, une feuille de style utilisée avec un document HTML peut spécifier l'URL d'un graphique SVG dans la valeur d'une propriété <code>background</code>.</p> -<table style="border: 1px solid #36b; padding: 1em; background-color: #f4f4f4; margin-bottom: 1em; width: 100%;"> - <caption> - Plus de détails</caption> - <tbody> - <tr> - <td>Au moment de la rédaction de ce document (courant 2005), seules certains compilations récentes des navigateurs Mozilla ont leur gestion native de SVG activée. - <p>Vous pouvez ajouter un support SVG à d'autres versions en installant un plugin comme celui fourni par <a class="external" href="http://www.adobe.com/svg/viewer/install/main.html">Adobe</a>.</p> - <p>Pour plus d'informations à propos de SVG dans Mozilla, consultez la page <a href="fr/SVG">SVG</a> de ce wiki.</p> - </td> - </tr> - </tbody> -</table> -<h3 id="Action_:_une_d.C3.A9monstration_de_SVG" name="Action_:_une_d.C3.A9monstration_de_SVG">Action : une démonstration de SVG</h3> -<p>Créez un nouveau document SVG en tant que fichier texte simple, <code>doc8.svg</code>. Copiez et collez-y le contenu ci-dessous en vous assurant de le faire défiler afin d'en obtenir la totalité :</p> -<div style="width: 48em; height: 12em; overflow: auto;"> - <pre><?xml version="1.0" standalone="no"?> - -<?xml-stylesheet type="text/css" href="style8.css"?> - -<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" - "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> - -<svg width="600px" height="600px" viewBox="-300 -300 600 600" - xmlns="http://www.w3.org/2000/svg" version="1.1" - xmlns:xlink="http://www.w3.org/1999/xlink"> - -<title>SVG demonstration</title> -<desc>Premiers pas en CSS avec Mozilla - Démonstration de SVG</desc> - -<defs> - <g id="segment" class="segment"> - <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z"/> - <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10"/> - </g> - <g id="quadrant"> - <use xlink:href="#segment"/> - <use xlink:href="#segment" transform="rotate(18)"/> - <use xlink:href="#segment" transform="rotate(36)"/> - <use xlink:href="#segment" transform="rotate(54)"/> - <use xlink:href="#segment" transform="rotate(72)"/> - </g> - <g id="petals"> - <use xlink:href="#quadrant"/> - <use xlink:href="#quadrant" transform="rotate(90)"/> - <use xlink:href="#quadrant" transform="rotate(180)"/> - <use xlink:href="#quadrant" transform="rotate(270)"/> - </g> - <radialGradient id="fade" cx="0" cy="0" r="200" - gradientUnits="userSpaceOnUse"> - <stop id="fade-stop-1" offset="33%"/> - <stop id="fade-stop-2" offset="95%"/> - </radialGradient> - </defs> - -<text id="heading" x="-280" y="-270"> - SVG demonstration</text> -<text id="caption" x="-280" y="-250"> - Placez le pointeur de la souris au dessus de la fleur.</text> - -<g id="flower"> - <circle id="overlay" cx="0" cy="0" r="200" - stroke="none" fill="url(#fade)"/> - <use id="outer-petals" xlink:href="#petals"/> - <use id="inner-petals" xlink:href="#petals" - transform="rotate(9) scale(0.33)"/> - </g> - -</svg> -</pre> -</div> -<p>Créez un nouveau fichier CSS, <code>style8.css</code>. Copiez et collez-y le contenu ci-dessous, en vous assurant de le faire défiler pour en obtenir la totalité :</p> -<div style="width: 48em; height: 12em; overflow: auto;"> - <pre>/*** Démonstration de SVG ***/ - -/* page */ -svg { - background-color: beige; - } - -#heading { - font-size: 24px; - font-weight: bold; - } - -#caption { - font-size: 12px; - } - -/* flower */ -#flower:hover { - cursor: crosshair; - } - -/* gradient */ -#fade-stop-1 { - stop-color: blue; - } - -#fade-stop-2 { - stop-color: white; - } - -/* outer petals */ -#outer-petals { - opacity: .75; - } - -#outer-petals .segment-fill { - fill: azure; - stroke: lightsteelblue; - stroke-width: 1; - } - -#outer-petals .segment-edge { - fill: none; - stroke: deepskyblue; - stroke-width: 3; - } - -#outer-petals .segment:hover > .segment-fill { - fill: plum; - stroke: none; - } - -#outer-petals .segment:hover > .segment-edge { - stroke: slateblue; - } - -/* inner petals */ -#inner-petals .segment-fill { - fill: yellow; - stroke: yellowgreen; - stroke-width: 1; - } - -#inner-petals .segment-edge { - fill: none; - stroke: yellowgreen; - stroke-width: 9; - } - -#inner-petals .segment:hover > .segment-fill { - fill: darkseagreen; - stroke: none; - } - -#inner-petals .segment:hover > .segment-edge { - stroke: green; - } -</pre> -</div> -<p>Ouvrez le document dans votre navigateur avec SVG activé. Placez le pointeur de la souris au dessus de l'image.</p> -<p>Ce wiki ne permet pas d'utiliser SVG dans ses pages, il n'est donc pas possible d'afficher la démonstration ici. L'image ressemble à ceci :</p> -<table style="border: 2px outset #36b;"> - <tbody> - <tr> - <td><img alt="Démonstration de SVG"></td> - </tr> - </tbody> -</table> -<p>Remarques à propos de cette démonstration :</p> -<ul> - <li>Le document SVG est lié à la feuille de style de la manière habituelle.</li> - <li>SVG possède ses propres propriétés CSS et valeurs. Certaines d'entre-elles sont similaires au propriétés CSS pour HTML.</li> -</ul> -<p> </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 pour que les pétales intérieurs deviennent tous roses lorsque le pointeur de la souris survole n'importe lequel d'entre-eux, sans changer la manière dont les pétales extérieurs fonctionnent.</td> - </tr> - </tbody> -</table> -<p> </p> -<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>Dans cette démonstration, votre navigateur avec SVG activé sait déjà comment afficher les éléments SVG. La feuille de style modifie uniquement l'affichage dans une certaine mesure. C'est également le cas pour les documents HTML et XUL. Mais vous pouvez utiliser CSS pour des documents XML généralistes, où il n'y a aucune manière prédéfinie d'afficher les éléments. La page suivante en fait la démonstration : <b><a href="/fr/docs/CSS/Premiers_pas/Donn%c3%a9es_XML">Données XML</a></b>.</p> diff --git a/files/fr/css/premiers_pas/index.html b/files/fr/css/premiers_pas/index.html deleted file mode 100644 index 5a802a6899..0000000000 --- a/files/fr/css/premiers_pas/index.html +++ /dev/null @@ -1,60 +0,0 @@ ---- -title: Premiers pas -slug: CSS/Premiers_pas -tags: - - CSS - - 'CSS:Premiers_pas' -translation_of: Learn/CSS/First_steps -translation_of_original: Web/Guide/CSS/Getting_started ---- -<h3 id="Introduction" name="Introduction">Introduction</h3> - -<p>Ce tutoriel est une introduction basique aux <a href="/fr/docs/CSS" title="/fr/docs/CSS">feuilles de styles en cascades (CSS)</a>.</p> - -<p>Il vous guidera à travers les fonctions de base des CSS grâce à des exemples pratiques que vous pourrez tester par vous-même sur votre ordinateur. Il est divisé en deux parties :</p> - -<ul> - <li>La partie I présente les propriétés standard des CSS qui fonctionnent dans les navigateurs basés sur Mozilla et aussi dans la plupart des autres navigateurs modernes.</li> -</ul> - -<ul> - <li>La partie II contient quelques exemples des propriétés spéciales qui fonctionnent sous Mozilla mais pas forcément sur les autres navigateurs.</li> -</ul> - -<p>Ce tutoriel est basé sur les <a class="external" href="http://www.w3.org/TR/CSS21/">spécifications CSS 2.1</a>.</p> - -<h4 id=".C3.80_qui_est_destin.C3.A9_ce_tutoriel_.3F" name=".C3.80_qui_est_destin.C3.A9_ce_tutoriel_.3F">À qui est destiné ce tutoriel ?</h4> - -<p>Ce tutoriel est surtout destiné à ceux qui débutent en CSS, mais vous pouvez aussi vous en servir si vous avez déjà quelques notions.</p> - -<p>Si vous êtes un débutant, lisez d'abord la partie I pour comprendre les CSS et apprendre comment les utiliser. Puis lisez la partie II pour comprendre la « portée » des CSS dans Mozilla.</p> - -<p>Si vous avez déjà quelques notions, vous pouvez sauter les parties de ce tutoriel que vous connaissez déjà, et lire seulement celles qui vous intéressent.</p> - -<p>Si vous maîtrisez déjà les CSS hormis les propriétés particulières à Mozilla, passez directement à la partie II.</p> - -<h4 id="Avant_de_commencer" name="Avant_de_commencer">Avant de commencer</h4> - -<p>Pour que ce tutoriel soit vraiment bénéfique, vous avez besoin d'un éditeur de fichier texte et un navigateur Mozilla (Firefox ou la suite Mozilla). Vous devez aussi savoir un minimum comment les utiliser.</p> - -<p>Si vous ne souhaitez pas éditer de fichier, vous pouvez simplement lire le tutoriel et regarder les images, mais votre apprentissage sera moins performant.</p> - -<p>Quelques passages de ce tutoriel peuvent exiger l'utilisation d'un autre logiciel de la fondation Mozilla. Ces passages sont optionnels. Si vous ne souhaitez pas télécharger d'autres logiciels, sautez ces passages.</p> - -<h3 id="Tutoriel_partie_I" name="Tutoriel_partie_I">Tutoriel partie I</h3> - -<p>Un guide de base, étape par étape pour CSS.</p> - -<nav class="fancyTOC"><a class="button" href="/fr/docs/CSS/Premiers_pas/Pr%c3%a9sentation_des_CSS" rel="next">Présentation des CSS</a> <a class="button" href="/fr/docs/CSS/Premiers_pas/Pourquoi_utiliser_CSS">Pourquoi utiliser CSS</a> <a class="button" href="/fr/docs/CSS/Premiers_pas/Fonctionnement_de_CSS">Fonctionnement de CSS</a> <a class="button" href="/fr/docs/CSS/Premiers_pas/Cascade_et_h%c3%a9ritage">Cascade et héritage</a> <a class="button" href="/fr/docs/CSS/Premiers_pas/Les_s%c3%a9lecteurs">Les sélecteurs</a> <a class="button" href="/fr/docs/CSS/Premiers_pas/Des_CSS_lisibles">Des CSS lisibles</a> <a class="button" href="/fr/docs/CSS/Premiers_pas/Styles_de_texte">Styles de texte</a> <a class="button" href="/fr/docs/CSS/Premiers_pas/Couleurs">Couleurs</a> <a class="button" href="/fr/docs/CSS/Premiers_pas/Contenu">Contenu</a> <a class="button" href="/fr/docs/CSS/Premiers_pas/Listes">Listes</a> <a class="button" href="/fr/docs/CSS/Premiers_pas/Bo%c3%aetes">Boîtes</a> <a class="button" href="/fr/docs/CSS/Premiers_pas/Mise_en_page">Mise en page</a> <a class="button" href="/fr/docs/CSS/Premiers_pas/Tableaux">Tableaux</a> <a class="button" href="/fr/docs/CSS/Premiers_pas/M%c3%a9dias">Médias</a></nav> - -<h3 id="Tutoriel_partie_II" name="Tutoriel_partie_II">Tutoriel partie II</h3> - -<p>Exemples montrant la portée des CSS dans Mozilla.</p> - -<ol> - <li><strong><a href="/fr/docs/CSS/Premiers_pas/JavaScript">JavaScript</a></strong></li> - <li><strong><a href="/fr/docs/CSS/Premiers_pas/Liaisons_XBL">Liaisons XBL</a></strong></li> - <li><strong><a href="/fr/docs/CSS/Premiers_pas/Interfaces_utilisateur_XUL">Interfaces utilisateur XUL</a></strong></li> - <li><strong><a href="/fr/docs/CSS/Premiers_pas/Graphiques_SVG">Graphiques SVG</a></strong></li> - <li><strong><a href="/fr/docs/CSS/Premiers_pas/Donn%c3%a9es_XML">Données XML</a></strong></li> -</ol> diff --git a/files/fr/css/premiers_pas/javascript/index.html b/files/fr/css/premiers_pas/javascript/index.html deleted file mode 100644 index 6e9414972d..0000000000 --- a/files/fr/css/premiers_pas/javascript/index.html +++ /dev/null @@ -1,147 +0,0 @@ ---- -title: JavaScript -slug: CSS/Premiers_pas/JavaScript -tags: - - CSS - - 'CSS:Premiers_pas' -translation_of: Learn/JavaScript/Client-side_web_APIs/Manipulating_documents -translation_of_original: Web/Guide/CSS/Getting_started/JavaScript ---- -<p> </p> -<p>Vous entrez dans la partie II du tutoriel. Cette partie contient des exemples montrant toute la portée de CSS dans Mozilla.</p> -<p>Chaque page de la partie II illustre la manière dont CSS interagit avec une autre technologie donnée. Ces pages ne sont pas prévues pour vous apprendre à utiliser ces autres technologies. Pour cela, vous devrez consulter d'autres tutoriels pour les comprendre en détail.</p> -<p>Au lieu de cela, ces pages sont conçues pour illustrer les nombreux usages de CSS. Pour les comprendre, vous devriez avoir une certaine connaissance de CSS, mais il n'est pas nécessaire de maîtriser aucune des autres technologies évoquées.</p> -<h3 id="Information_:_JavaScript" name="Information_:_JavaScript">Information : JavaScript</h3> -<p>JavaScript est un - <i> - langage de programmation</i> - . Lorsque vous utilisez une application Mozilla (par exemple votre navigateur), une grande partie du code exécuté par votre ordinateur est écrit en JavaScript.</p> -<p>JavaScript peut interagir avec les feuilles de style, ce qui permet d'écrire des programmes modifiant le style d'un document dynamiquement.</p> -<p>Il existe trois manières de le faire :</p> -<ul> - <li>En travaillant avec la liste de feuilles de style du document — par exemple en ajoutant, retirant ou modifiant une feuille de style.</li> - <li>En travaillant avec les règles d'une feuille de style — par exemple en ajoutant, retirant ou modifiant une règle.</li> - <li>En travaillant avec un élément individuel du DOM — en modifiant son style indépendamment des feuilles de style du document.</li> -</ul> -<table style="border: 1px solid #36b; padding: 1em; background-color: #f4f4f4; margin-bottom: 1em; width: 100%;"> - <caption> - Plus de détails</caption> - <tbody> - <tr> - <td>Pour plus d'informations à propos de JavaScript dans Mozilla, consultez la page <a href="fr/JavaScript">JavaScript</a> de ce wiki.</td> - </tr> - </tbody> -</table> -<h3 id="Action_:_une_d.C3.A9monstration_en_JavaScript" name="Action_:_une_d.C3.A9monstration_en_JavaScript">Action : une démonstration en JavaScript</h3> -<p>Créez un nouveau document HTML, <code>doc5.html</code>. Copiez et collez-y le contenu ci-dessous, en vous assurant de faire défiler pour en obtenir l'entièreté :</p> -<div style="width: 48em; height: 12em; overflow: auto;"> - <pre><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> -<HTML> - -<HEAD> -<TITLE>Premiers pas en CSS avec Mozilla - Démonstration en JavaScript</TITLE> -<LINK rel="stylesheet" type="text/css" href="style5.css"></strong> -<SCRIPT type="text/javascript" src="script5.js"></SCRIPT> -</HEAD> - -<BODY> -<H1>Exemple en JavaScript</H1> - -<DIV id="square"></DIV> - -<BUTTON type="button" onclick="doDemo(this);">Cliquez ici</BUTTON> - -</BODY> -</HTML> -</pre> -</div> -<p>Créez un nouveau fichier CSS, <code>style5.css</code>. Copiez et collez-y le contenu ci-dessous :</p> -<div style="width: 48em;"> - <pre>/*** Démonstration en JavaScript ***/ -#square { - width: 20em; - height: 20em; - border: 2px inset gray; - margin-bottom: 1em; - } - -button { - padding: .5em 2em; - } -</pre> -</div> -<p>Créez un nouveau fichier texte, <code>script5.js</code>. Copiez et collez-y le contenu ci-dessous :</p> -<div style="width: 48em;"> - <pre>// JavaScript demonstration -function doDemo (button) { - var square = document.getElementById("square") - square.style.backgroundColor = "#fa4" - button.setAttribute("disabled", "true") - setTimeout(clearDemo, 2000, button) - } - -function clearDemo (button) { - var square = document.getElementById("square") - square.style.backgroundColor = "transparent" - button.removeAttribute("disabled") - } -</pre> -</div> -<p>Ouvrez le document dans votre navigateur et appuyez sur le bouton.</p> -<p>Ce wiki ne permet pas d'utiliser JavaScript dans ses pages, il n'est donc pas possible de montrer la démonstration ici. Cela ressemble à ceci, avant et après que vous appuyiez sur le bouton :</p> -<table> - <tbody> - <tr> - <td style="padding-right: 2em;"> - <table style="border: 2px outset #36b; padding: 0 1em .5em .5em;"> - <tbody> - <tr> - <td> - <p><b>Démonstration en JavaScript</b></p> - <div style="width: 5em; height: 5em; border: 2px inset gray; background-color: white;"> - <div style="width: 2em; height: 1em; border: 1px outset black; background-color: #ccc; margin-top: 4px;"> - </div> - </div> - </td> - </tr> - </tbody> - </table> - </td> - <td> - <table style="border: 2px outset #36b; padding: 0 1em .5em .5em;"> - <tbody> - <tr> - <td> - <p><b>Démonstration en JavaScript</b></p> - <div style="width: 5em; height: 5em; border: 2px inset gray; background-color: #fa4;"> - <div style="width: 2em; height: 1em; border: 1px inset black; background-color: #ccc; margin-top: 4px;"> - </div> - </div> - </td> - </tr> - </tbody> - </table> - </td> - </tr> - </tbody> -</table> -<p>Remarques à propos de cette démonstration :</p> -<ul> - <li>Le document HTML est lié à la feuille de style de la manière habituelle et est également lié au script.</li> - <li>Le script traite des éléments individuels du DOM. Il modifie le style du carré directement. Il modifie le style du bouton indirectement en changeant un de ses attributs.</li> - <li>En JavaScript, <code>document.getElementById("square")</code> fonctionne de manière similaire au sélecteur CSS <code>#square</code>.</li> - <li>En JavaScript, <code>backgroundColor</code> correspond à la propriété CSS <code>background-color</code>.</li> - <li>Votre navigateur possède une règle de style interne pour <code>button{{ mediawiki.external('disabled=\"true\"') }}</code> qui modifie l'apparence du bouton lorsqu'il est désactivé.</li> -</ul> -<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: .5em;"> - <caption> - Challenge</caption> - <tbody> - <tr> - <td>Modifiez le script pour que le carré se déplace vers la droite de 20 em lorsque sa couleur change et revienne à sa place lors de l'opération inverse.</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>Dans cette démonstration, le document HTML est lié au script même si seul l'élément button utilise le script. Mozilla étend CSS afin qu'il puisse lier du code JavaScript (ainsi que du contenu et d'autres feuilles de style) aux éléments sélectionnés. La page suivante en fournit la démonstration : <b><a href="/fr/docs/CSS/Premiers_pas/Liaisons_XBL">Liaisons XBL</a></b></p> diff --git a/files/fr/css/premiers_pas/les_sélecteurs/index.html b/files/fr/css/premiers_pas/les_sélecteurs/index.html deleted file mode 100644 index 9371d826b3..0000000000 --- a/files/fr/css/premiers_pas/les_sélecteurs/index.html +++ /dev/null @@ -1,207 +0,0 @@ ---- -title: Les sélecteurs -slug: CSS/Premiers_pas/Les_sélecteurs -tags: - - CSS - - 'CSS:Premiers_pas' -translation_of: Learn/CSS/Building_blocks/Selectors -translation_of_original: Web/Guide/CSS/Getting_started/Selectors ---- -<p> </p> - -<p>Cette page explique comment appliquer des styles de manière sélective, et les priorités des différents types de sélecteurs.</p> - -<p>Vous ajouterez quelques attributs aux balises de votre document exemple, et vous utiliserez ces attributs dans votre feuille de style.</p> - -<h3 id="Information_:_les_s.C3.A9lecteurs" name="Information_:_les_s.C3.A9lecteurs">Information : les sélecteurs</h3> - -<p>CSS a sa propre terminologie pour décrire le langage CSS. Précédemment dans ce tutoriel, vous avez créé une ligne dans votre feuille de style comme ceci :</p> - -<div style="width: 30em;"> -<pre>strong {color: red;} -</pre> -</div> - -<p>Dans la terminologie CSS, toute cette ligne est une <em>règle</em>. Cette règle commence avec <code>strong</code>, qui est un <em>sélecteur</em>. Celui-ci sélectionne les éléments dans le DOM sur lesquels la règle va s'appliquer.</p> - -<table style="background-color: #f4f4f4; border: 1px solid #3366bb; padding: 1em;"> - <caption>Plus de détails</caption> - <tbody> - <tr> - <td>La partie à l'intérieur des crochets courbes est la <em>déclaration</em>. - <p>Le mot-clé <code>color</code> est une <em>propriété</em>, et <code>red</code> est une <em>valeur</em>.</p> - - <p>Le point virgule après la valeur de propriété sépare celle-ci d'autres paires de propriétés/valeurs pour le même sélecteur.</p> - - <p>Ce tutoriel se réfère à un sélecteur comme <code>strong</code> comme à un sélecteur de <em>balise</em>. La spécification CSS s'y réfère comme à un sélecteur de <em>type</em>.</p> - </td> - </tr> - </tbody> -</table> - -<p><br> - Cette page du tutoriel donne plus de détails sur les sélecteurs utilisables dans les règles CSS. Outre les noms de balise, il est possible d'utiliser des valeurs d'attribut dans les sélecteurs. Cela permet au règles d'être plus spécifiques.</p> - -<p>Deux attributs ont un statut spécial pour CSS. Ce sont les attributs <code>class</code> et <code>id</code>.</p> - -<p>Utilisez l'attribut <code>class</code> dans une balise pour lui assigner une classe nommée. Vous pouvez choisir le nom qui vous convient pour cette classe.</p> - -<p>Dans votre feuille de style, entrez un point avant le nom de la classe lorsque vous l'utilisez dans un sélecteur.</p> - -<p>Utilisez l'attribut <code>id</code> dans une balise pour lui assigner un identifiant unique. Vous pouvez choisir le nom qui vous convient pour l'identifiant. Celui-ci doit cependant être unique au sein du document.</p> - -<p>Dans votre feuille de style, entrez un signe dièse (carré) avant l'identifiant lorsque vous l'utilisez dans un sélecteur.</p> - -<table style="background-color: #ffffee; border: 1px solid #3366bb; padding: 1em;"> - <caption>Exemples</caption> - <tbody> - <tr> - <td>Cette balise HTML a à la fois un attribut <code>class</code> et un attribut <code>id</code> : - <div style="width: 30em;"> - <pre> -<P class="clef" id="principale"> -</pre> - </div> - - <p>L'identifiant, <code>principale</code>, doit être unique dans le document, mais d'autres balises dans le document peuvent avoir le même nom de classe, <code>clef</code>.</p> - - <p>Dans une feuille de style CSS, cette règle rend tous les éléments de la classe <code>clef</code> verts. (Ils peuvent ne pas tous être des éléments <small>P</small> .)</p> - - <div style="width: 30em;"> - <pre> -.clef {color: green;} -</pre> - </div> - - <p>Cette règle rend l'élément avec l'identifiant <code>principale</code> gras :</p> - - <div style="width: 30em;"> - <pre> -#principale {font-weight: bolder;} -</pre> - </div> - </td> - </tr> - </tbody> -</table> - -<p>Si plus d'une règle s'applique à un élément et spécifie la même propriété, CSS donne la priorité à la règle ayant le sélecteur le plus spécifique. Un sélecteur id est plus spécifique qu'un sélecteur de classe, qui lui-même est plus spécifique qu'un sélecteur de balise.</p> - -<table style="background-color: #f4f4f4; border: 1px solid #3366bb; padding: 1em;"> - <caption>Plus de détails</caption> - <tbody> - <tr> - <td>Vous pouvez également combiner le sélecteurs, afin de créer un sélecteur plus spécifique. - <p>Par exemple, le sélecteur <code>.clef</code> sélectionne tous les éléments qui ont le nom de classe <code>clef</code>. Le sélecteur <code>p.clef</code> sélectionne seulement les éléments P qui ont le nom de classe <code>clef</code>.</p> - - <p>Vous n'êtes pas limité aux deux attributs spéciaux <code>class</code> et <code>id</code>. Vous pouvez spécifier d'autres attributs en utilisant des crochets droits. Par exemple, le sélecteur <code>{{ mediawiki.external('type=button') }}</code> sélectionne tous les éléments qui ont un attribut <code>type</code> avec la valeur <code>button</code>.</p> - - <p>Une prochaine page de ce tutoriel, (<a href="/fr/CSS/Premiers_pas/Tableaux" title="fr/CSS/Premiers_pas/Tableaux">Tableaux</a>) a des informations sur les sélecteurs complexes basés sur les relations.</p> - - <p>Pour une information complète sur les sélecteurs, consultez <a class="external" href="http://www.w3.org/TR/CSS21/selector.html">Selectors</a> dans la spécification CSS.</p> - </td> - </tr> - </tbody> -</table> - -<p><br> - Si la feuille de style a des règles conflictuelles et qui sont également spécifiques, alors CSS donne la priorité à la règle qui est définie plus tard dans la feuille de style.</p> - -<p>Lorsque vous avez un problème de conflit de règles, essayez de le résoudre en rendant une des règles plus spécifique, afin qu'elle aie la priorité. Si vous ne pouvez pas faire cela, essayez de déplacer l'une des règles plus près de la fin de la feuille de style pour lui donner la priorité.</p> - -<h3 id="Action_:_utilisation_des_s.C3.A9lecteurs_class_et_id" name="Action_:_utilisation_des_s.C3.A9lecteurs_class_et_id">Action : utilisation des sélecteurs class et id</h3> - -<p>Éditez votre fichier HTML, et dupliquez le paragraphe par copier-coller. Ajoutez ensuite des attributs id et class à la première copie, et un autre id à la seconde copie comme montré ci-dessous. Sinon, copiez et collez à nouveau l'entièreté du fichier :</p> - -<div style="width: 48em; color: gray;"> -<pre class="eval"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> -<HTML> - <HEAD> - <TITLE>Document exemple</TITLE> - <LINK rel="stylesheet" type="text/css" href="style1.css"> - </HEAD> - <BODY> - <P <strong style="color: black;">id="premier"</strong>> - <STRONG <strong style="color: black;">class="carotte"</strong>>C</STRONG>ascading - <STRONG <strong style="color: black;">class="epinard"</strong>>S</STRONG>tyle - <STRONG <strong style="color: black;">class="epinard"</strong>>S</STRONG>heets - </P> - <strong style="color: black;"><P id="second"> - <STRONG>C</STRONG>ascading - <STRONG>S</STRONG>tyle - <STRONG>S</STRONG>heets - </P></strong> - </BODY> -</HTML> -</pre> -</div> - -<p>Éditez à présent votre fichier CSS. Remplacez l'entièreté de son contenu par :</p> - -<div style="width: 40em;"> -<pre>strong {color: red;} -.carotte {color: orange;} -.epinard {color: green;} -#premier {font-style: italic;} -</pre> -</div> - -<p>Actualisez dans votre navigateur et voyez le résultat :</p> - -<table style="border: 2px outset #3366bb; padding: 1em;"> - <tbody> - <tr> - <td style="font-style: italic;"><strong style="color: orange;">C</strong>ascading <strong style="color: green;">S</strong>tyle <strong style="color: green;">S</strong>heets</td> - </tr> - <tr> - <td><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td> - </tr> - </tbody> -</table> - -<p>Vous pouvez essayer d'ordonner différemment les lignes dans votre fichier CSS pour constater que leur ordre n'a aucune importance.</p> - -<p>Les sélecteurs de classe <code>.carotte</code> et <code>.epinard</code> ont priorité sur le sélecteur de balise <code>strong</code>.</p> - -<p>Le sélecteur d'id <code>#premier</code> a priorité sur les sélecteurs de classe et de balise.</p> - -<table style="background-color: #fffff4; border: 1px solid #3366bb; padding: 1em;"> - <caption>Challenges</caption> - <tbody> - <tr> - <td>Sans modifier votre fichier HTML, ajoutez une seule règle à votre fichier CSS qui garde la même couleur pour toutes les lettres initiales que précédemment, mais rend le reste du texte du second paragraphe bleu : - <table style="background-color: white; border: 2px outset #3366bb; padding: 1em;"> - <tbody> - <tr> - <td style="font-style: italic;"><strong style="color: orange;">C</strong>ascading <strong style="color: green;">S</strong>tyle <strong style="color: green;">S</strong>heets</td> - </tr> - <tr> - <td style="color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td> - </tr> - </tbody> - </table> - - <p>À présent, changez la règle que vous venez d'ajouter (sans rien changer d'autre), pour rendre le premier paragraphe bleu également :</p> - - <table style="background-color: white; border: 2px outset #3366bb; padding: 1em;"> - <tbody> - <tr> - <td style="font-style: italic; color: blue;"><strong style="color: orange;">C</strong>ascading <strong style="color: green;">S</strong>tyle <strong style="color: green;">S</strong>heets</td> - </tr> - <tr> - <td style="color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td> - </tr> - </tbody> - </table> - </td> - </tr> - </tbody> -</table> - -<p> </p> - -<h4 id="Pour_continuer" name="Pour_continuer">Pour continuer</h4> - -<p>Si vous avez eu des difficultés à comprendre cette page, ou avez d'autres commentaires à son sujet, n'hésitez pas à contribuer à sa <a href="/Talk:fr/CSS/Premiers_pas/Les_sélecteurs" title="Talk:fr/CSS/Premiers_pas/Les_sélecteurs">page de discussion</a>.</p> - -<p>Votre feuille de style d'exemple commence à avoir l'air dense et compliquée. La page suivante décrit des façons de rendre CSS plus facile à lire : <strong><a href="/fr/docs/CSS/Premiers_pas/Des_CSS_lisibles" title="fr/CSS/Premiers_pas/Des_CSS_lisibles">Des CSS lisibles</a></strong></p> diff --git a/files/fr/css/premiers_pas/listes/index.html b/files/fr/css/premiers_pas/listes/index.html deleted file mode 100644 index fd091907fe..0000000000 --- a/files/fr/css/premiers_pas/listes/index.html +++ /dev/null @@ -1,305 +0,0 @@ ---- -title: Listes -slug: CSS/Premiers_pas/Listes -tags: - - CSS - - 'CSS:Premiers_pas' -translation_of: Learn/CSS/Styling_text/Styling_lists -translation_of_original: Web/Guide/CSS/Getting_started/Lists ---- -<p> </p> -<p>Cette page explique comment utiliser CSS pour spécifier l'apparence des listes.</p> -<p>Vous créerez un nouveau document d'exemple contenant des listes, et une nouvelle feuille de style habillant celles-ci.</p> -<h3 id="Information_:_les_listes" name="Information_:_les_listes">Information : les listes</h3> -<p>Si vous avez relevé le challenge sur la page précédente (<b><a href="fr/CSS/Premiers_pas/Contenu">Contenu</a></b>), vous avez vu comment on ajoutait du contenu devant un élément pour l'afficher comme un élément de liste.</p> -<p>Mais CSS fournit des propriétés spécialement conçues pour les listes. Il est généralement plus aisé d'utiliser ces propriétés lorsque c'est possible.</p> -<p>Pour spécifier le style d'une liste, utilisez la propriété <code>list-style</code> pour changer le type de marque.</p> -<p>Le sélecteur dans votre règle CSS peut soit sélectionner les éléments de la liste (par exemple example, <code>LI</code>), ou il peut sélectionner l'élément de liste parent (par exemple, <code>UL</code>) afin que les éléments héritent du style.</p> -<h4 id="Listes_non_ordonn.C3.A9es" name="Listes_non_ordonn.C3.A9es">Listes non ordonnées</h4> -<p>Dans une liste - <i> - non ordonnée</i> - , chaque élément de la liste est marqué de la même façon.</p> -<p>CSS propose trois types de marques. Voici comment votre navigateur les affiche :</p> -<ul style="padding-left: 2em;"> - <li style=""><code>disc</code> (rond plein)</li> - <li style=""><code>circle</code> (cercle)</li> - <li style=""><code>square</code> (carré)</li> -</ul> -<p>Vous pouvez également spécifier l'URL d'une image.</p> -<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;"> - <caption> - Exemple</caption> - <tbody> - <tr> - <td>Ces règles spécifient différentes marques pour différentes classes d'éléments de liste : - <div style="width: 30em;"> - <pre class="eval"> -li.ouvert {list-style: circle;} -li.ferme {list-style: disc;} -</pre> - </div> - <p>Lorsque ces classes sont utilisées dans une liste, elle différencient les éléments ouverts et ceux qui sont fermés :</p> - <div style="width: 30em;"> - <pre class="eval"> -<UL> - <LI class="ouvert">Lorem ipsum</LI> - <LI class="ferme">Dolor sit</LI> - <LI class="ferme">Amet consectetuer</LI> - <LI class="ouvert">Magna aliquam</LI> - <LI class="ferme">Autem veleum</LI> -</UL> -</pre> - </div> - <p>Le résultat peut ressembler à ceci :</p> - <table style="border: 2px outset #36b; padding: 1em; background-color: white;"> - <tbody> - <tr> - <td> - <ul style="padding-right: 6em;"> - <li style="">Lorem ipsum</li> - <li style="">Dolor sit</li> - <li style="">Amet consectetuer</li> - <li style="">Magna aliquam</li> - <li style="">Autem veleum</li> - </ul> - </td> - </tr> - </tbody> - </table> - </td> - </tr> - </tbody> -</table> -<h4 id="Listes_ordonn.C3.A9es" name="Listes_ordonn.C3.A9es">Listes ordonnées</h4> -<p>Dans une liste - <i> - ordonnée</i> - , chaque élément de la liste est marqué différemment afin de montrer sa position dans la séquence.</p> -<p>Utilisez la propriété <code>list-style</code> pour spécifier le type de marque :</p> -<ul style="padding-left: 2em;"> - <li style=""><code>decimal</code> (chiffres décimaux)</li> - <li style=""><code>lower-roman</code> (chiffres romains minuscules)</li> - <li style=""><code>upper-roman</code> (chiffres romains majuscules)</li> - <li style=""><code>lower-latin</code> (lettres minuscules)</li> - <li style=""><code>upper-latin</code> (lettres majuscules)</li> -</ul> -<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;"> - <caption> - Exemple</caption> - <tbody> - <tr> - <td>Cette règle spécifie que les éléments <small>OL</small> de la classe <code>info</code> sont identifiés par des lettres majuscules. - <div style="width: 30em;"> - <pre class="eval"> -ol.info {list-style: upper-latin;} -</pre> - </div> - <p>Les éléments <small>LI</small> de la liste héritent de ce style :</p> - <table style="border: 2px outset #36b; padding: 1em; background-color: white;"> - <tbody> - <tr> - <td> - <ol style="padding-right: 6em;"> - <li style="list-style-type: upper-latin;">Lorem ipsum</li> - <li style="list-style-type: upper-latin;">Dolor sit</li> - <li style="list-style-type: upper-latin;">Amet consectetuer</li> - <li style="list-style-type: upper-latin;">Magna aliquam</li> - <li style="list-style-type: upper-latin;">Autem veleum</li> - </ol> - </td> - </tr> - </tbody> - </table> - </td> - </tr> - </tbody> -</table> -<table style="border: 1px solid #36b; padding: 1em; background-color: #f4f4f4; margin-bottom: 1em;"> - <caption> - Plus de détails</caption> - <tbody> - <tr> - <td>La propriété <code>list-style</code> est un raccourci. Dans des feuilles de style complexes, il peut être préférable d'utiliser des propriétés séparées pour régler les différentes valeurs. Pour des détails sur ces propriétés séparées, consultez <a class="external" href="http://www.w3.org/TR/CSS21/generate.html#q10">Lists</a> dans la spécification CSS. - <p>Si vous utilisez un langage de balisage comme HTML qui fournit des balises conventionnelles pour les listes ordonnées (<small>OL</small>) et non ordonnées (<small>UL</small>), il est préférable d'utiliser les balises de la manière prévue. Cependant, il est possible d'utiliser CSS pour que des listes <small>UL</small> s'affichent ordonnées et que des listes <small>OL</small> s'affichent non ordonnées si vous le désirez.</p> - <p>Les navigateurs n'implémentent pas tous de la même façon les styles de liste. Ne vous attendez pas à obtenir un résultat identique pour une même feuille de style dans tous les navigateurs.</p> - </td> - </tr> - </tbody> -</table> -<h4 id="Compteurs" name="Compteurs">Compteurs</h4> -<div style="border: 1px solid red; padding: 6px; margin: 0 0 .5em -6px; width: 100%;"> - <p><strong>Note : </strong> Certains navigateurs ne gèrent pas les compteurs.</p> -</div> -<p>Vous pouvez utiliser les compteurs pour numéroter toutes sortes d'éléments, pas seulement des éléments de liste. Par exemple, dans certains documents, vous pouvez avoir besoin de numéroter les titres ou les paragraphes.</p> -<p>Pour spécifier la numérotation, vous avez besoin d'un - <i> - compteur</i> - (counter) auquel vous devrez donner un nom.</p> -<p>Dans un élément placé avant l'endroit où le comptage doit commencer, remettez le compteur à zéro à l'aide de la propriété <code>counter-reset</code> et le nom de votre compteur. Le parent des éléments à compter est un bon endroit pour faire cela, mais vous pouvez utiliser n'importe quel élément qui précède votre liste.</p> -<p>Dans chaque élément où le compteur doit augmenter, utilisez la propriété <code>counter-increment</code> et le nom de votre compteur.</p> -<p>Pour afficher votre compteur, ajoutez <code>:before</code> ou <code>:after</code> au sélecteur et utilisez la propriété <code>content</code> (comme vous avez fait à la page précédente, <b><a href="fr/CSS/Premiers_pas/Contenu">Contenu</a></b>).</p> -<p>Dans la valeur de la propriété <code>content</code>, spécifiez <code>counter()</code> avec le nom de votre compteur. Optionellement, spécifiez aussi un type. Ceux-ci sont les mêmes que dans la section <b>Listes ordonnées</b> ci-dessus.</p> -<p>Normalement, l'élément qui affiche le compteur l'incrémente également.</p> -<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;"> - <caption> - Exemple</caption> - <tbody> - <tr> - <td>Cette règle initialise un compteur pour chaque élément <small>H3</small> de la classe <code>numerote</code> : - <div style="width: 30em;"> - <pre class="eval"> -h3.numerote {counter-reset: mynum;} -</pre> - </div> - <p>Cette règle affiche et incrémente le compteur pour chaque élément <small>P</small> de la classe <code>numerote</code> :</p> - <div style="width: 30em;"> - <pre class="eval"> -p.numerote:before { - content: counter(mynum) " : "; - counter-increment: mynum; - font-weight: bold;} -</pre> - </div> - <p>Le résultat ressemble à ceci :</p> - <table style="border: 2px outset #36b; padding: .5em 6em .5em 1em; background-color: white;"> - <tbody> - <tr> - <td><b>Titre</b><br> - <p><b>1 : </b>Lorem ipsum</p> - <p><b>2 : </b>Dolor sit</p> - <p><b>3 : </b>Amet consectetuer</p> - <p><b>4 : </b>Magna aliquam</p> - <p><b>5 : </b>Autem veleum</p> - </td> - </tr> - </tbody> - </table> - </td> - </tr> - </tbody> -</table> -<table style="border: 1px solid #36b; padding: 1em; background-color: #f4f4f4; margin-bottom: 1em;"> - <caption> - Plus de détails</caption> - <tbody> - <tr> - <td>Vous ne pouvez pas utiliser les compteurs s'il n'est pas certain que tous les lecteurs de votre document ont un navigateur qui permet de les afficher. - <p>Si cela s'avère possible, un de leurs avantages est que vous pouvez styler les compteurs d'une façon différente des éléments de liste. Dans l'exemple ci-dessus, les compteurs sont en gras mais les éléments de liste ne le sont pas.</p> - <p>Vous pouvez également utiliser les compteurs de façon plus complexe — par exemple, pour numéroter des, titres, sous-titres et paragraphes dans des documents formels. Pour plus de détails, consultez <a class="external" href="http://www.w3.org/TR/CSS21/generate.html#counters">Automatic counters and numbering</a> dans la spécification CSS.</p> - </td> - </tr> - </tbody> -</table> -<h3 id="Action_:_listes_styl.C3.A9es" name="Action_:_listes_styl.C3.A9es">Action : listes stylées</h3> -<p>Créez un nouveau document HTML, <code>doc2.html</code>. Copiez et collez le contenu ci-dessous, en faisant défiler pour vous assurer de l'obtenir en entier :</p> -<div style="width: 48em; height: 12em; overflow: auto;"> - <pre class="eval"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> -<HTML> -<HEAD> -<TITLE>Document exemple 2</TITLE> -<LINK rel="stylesheet" type="text/css" href="style2.css"> -</HEAD> -<BODY> - -<H3 id="oceans">Les océans</H3> -<UL> -<LI>Arctique</LI> -<LI>Atlantique</LI> -<LI>Pacifique</LI> -<LI>Indien</LI> -<LI>Antarctique</LI> -</UL> - -<H3 class="numerote">Paragraphes numérotés</H3> -<P class="numerote">Lorem ipsum</P> -<P class="numerote">Dolor sit</P> -<P class="numerote">Amet consectetuer</P> -<P class="numerote">Magna aliquam</P> -<P class="numerote">Autem veleum</P> - -</BODY> -</HTML> -</pre> -</div> -<p>Créez une nouvelle feuille de style, <code>style2.css</code>. Copiez et collez le contenu ci-dessous :</p> -<div style="width: 48em;"> - <pre class="eval">/* paragraphes numérotés */ -h3.numerote {counter-reset: mynum;} - -p.numerote:before { - content: counter(mynum) " : "; - counter-increment: mynum; - font-weight: bold;} -</pre> -</div> -<p>Si la mise en page et les commentaires ne sont pas à votre goût, modifiez-les.</p> -<p>Ouvrez le document dans votre navigateur. Si votre navigateur gère les compteurs, vous verrez quelque chose comme ci-dessous. Sinon, vous ne verrez pas les nombres (et probablement même pas les deux points) :</p> -<table style="border: 2px outset #36b; padding: 0 6em 1em 1em; background-color: white;"> - <tbody> - <tr> - <td> - <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em;">Les océans</p> - <ul style=""> - <li style="">Arctique</li> - <li style="">Atlantique</li> - <li style="">Pacifique</li> - <li style="">Indien</li> - <li style="">Antarctique</li> - </ul> - <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em;">Paragraphes numérotés</p> - <p><b>1 : </b>Lorem ipsum</p> - <p><b>2 : </b>Dolor sit</p> - <p><b>3 : </b>Amet consectetuer</p> - <p><b>4 : </b>Magna aliquam</p> - <p><b>5 : </b>Autem veleum</p> - </td> - </tr> - </tbody> -</table> -<p> </p> -<table style="border: 1px solid #36b; padding: 1em; background-color: #ffe; width: 60%;"> - <caption> - Challenges</caption> - <tbody> - <tr> - <td>Ajoutez une règle à votre feuille de style pour numéroter les océans en chiffres romains de i à v : - <table style="border: 2px outset #36b; padding: 0 6em 1em 1em; background-color: white;"> - <tbody> - <tr> - <td> - <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em;">Les océans</p> - <ul style=""> - <li style="">Arctique</li> - <li style="">Atlantique</li> - <li style="">Pacifique</li> - <li style="">Indien</li> - <li style="">Antarctique</li> - </ul> - </td> - </tr> - </tbody> - </table> - <p><br> - Si votre navigateur gère les compteurs, modifiez votre feuille de style pour identifier les titres avec des lettres majuscules entre parenthèses comme ceci :</p> - <table style="border: 2px outset #36b; padding: 0 6em 1em 1em; background-color: white;"> - <tbody> - <tr> - <td> - <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em;">(A) Les océans</p> - <p><b>. . .</b></p> - <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em;">(B) Paragraphes numérotés</p> - <p><b>. . .</b></p> - </td> - </tr> - </tbody> - </table> - </td> - </tr> - </tbody> -</table> -<p> </p> -<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>Lorsque votre navigateur affiche votre document, il crée de l'espace autour des éléments lorsqu'il les dispose sur la page.</p> -<p>La page suivante explique comment utiliser CSS pour travailler sur les formes sous-jacentes aux éléments : <b><a href="/fr/docs/CSS/Premiers_pas/Bo%c3%aetes">Boîtes</a></b>.</p> diff --git a/files/fr/css/premiers_pas/mise_en_page/index.html b/files/fr/css/premiers_pas/mise_en_page/index.html deleted file mode 100644 index f8d9872975..0000000000 --- a/files/fr/css/premiers_pas/mise_en_page/index.html +++ /dev/null @@ -1,373 +0,0 @@ ---- -title: Mise en page -slug: CSS/Premiers_pas/Mise_en_page -tags: - - CSS - - 'CSS:Premiers_pas' -translation_of: Learn/CSS/CSS_layout -translation_of_original: Web/Guide/CSS/Getting_started/Layout ---- -<p> </p> -<p>Cette page présente plusieurs manières d'ajuster la mise en page de votre document.</p> -<p>Vous modifierez la mise en page de votre document exemple...</p> -<h3 id="Information_:_mise_en_page" name="Information_:_mise_en_page">Information : mise en page</h3> -<p>Vous pouvez utiliser CSS pour spécifier de nombreux effets visuels changeant la mise en page de votre document. Certaines de ces techniques sont très avancées et dépassent de loin le niveau de tutoriel basique.</p> -<p>Lorsque vous réalisez une mise en page qui doit apparaître d'une manière similaire dans de nombreux navigateurs, votre feuille de style interagit avec le style par défaut du navigateur et le moteur de rendu de manières qui peuvent s'avérer complexes. Ce sujet n'est pas non plus couvert par ce tutoriel.</p> -<p>Cette page décrit certaines techniques simples que vous pouvez essayer.</p> -<h4 id="Structure_du_document" name="Structure_du_document">Structure du document</h4> -<p>Si vous voulez contrôler la mise en page de votre document, il peut être nécessaire de changer sa structure.</p> -<p>Le langage de balisage de votre document peut disposer de balises générales créant une certaine structure. Par exemple, dans HTML vous pouvez utiliser la balise <code>DIV</code> pour créer une telle structure.</p> -<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;"> - <caption> - Exemple</caption> - <tbody> - <tr> - <td>Dans votre document d'exemple, les paragraphes numérotés sous le second titre n'ont aucun conteneur propre. - <p>Votre feuille de style ne peut pas dessiner une bordure autour de ces paragraphes, puisqu'il n'y a pas d'élément qui peut être spécifié dans le sélecteur.</p> - <p>Pour régler ce problème structurel, vous pouvez ajouter une balise <code>DIV</code> autour des paragraphes. Cette balise sera rendue unique en étant identifiée par un attribut <code>id</code> :</p> - <div style="width: 40em; color: gray;"> - <pre class="eval"> -<H3 class="numerote">Paragraphes numérotés</H3> -<strong style="color: black;"><DIV id="numerote"></strong> -<P class="numerote">Lorem ipsum</P> -<P class="numerote">Dolor sit</P> -<P class="numerote">Amet consectetuer</P> -<P class="numerote">Magna aliquam</P> -<P class="numerote">Autem veleum</P> -<strong style="color: black;"></DIV></strong> -</pre> - </div> - <p>À présent, votre feuille de style peut utiliser une règle pour ajouter des bordures autour des deux listes.</p> - <div style="width: 30em;"> - <pre class="eval"> -ul, #numerote { - border: 1em solid #69b; - padding-right:1em; - } -</pre> - </div> - <p>Le résultat devrait ressembler à ceci :</p> - <table style="border: 2px outset #36b; padding: 1em; width: 30em; background-color: white;"> - <tbody> - <tr> - <td> - <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(A) Les océans</p> - <div style="border: 12px solid #69b; margin-bottom: 16px; padding: 1em;"> - <ul style=""> - <li>Arctique</li> - <li>Atlantique</li> - <li>Pacifique</li> - <li>Indien</li> - <li>Antarctique</li> - </ul> - </div> - <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(B) Paragraphes numérotés</p> - <div style="border: 12px solid #69b; margin-bottom: 8px; padding: 0px 12em 0px .5em;"> - <p><b>1 : </b>Lorem ipsum</p> - <p><b>2 : </b>Dolor sit</p> - <p><b>3 : </b>Amet consectetuer</p> - <p><b>4 : </b>Magna aliquam</p> - <p><b>5 : </b>Autem veleum</p> - </div> - </td> - </tr> - </tbody> - </table> - </td> - </tr> - </tbody> -</table> -<h4 id="Unit.C3.A9s_de_mesure" name="Unit.C3.A9s_de_mesure">Unités de mesure</h4> -<p>Jusqu'à présent, dans ce tutoriel, nous avont spécifié les tailles en pixels (<code>px</code>). Ceux-ci sont appropriés pour certains usages sur un dispositif d'affichage comme un écran d'ordinateur, mais dès que l'utilisateur change la taille de police, votre mise en page peut être affectée négativement.</p> -<p>Dans de nombreux cas il est préférable de spécifier les tailles en pourcentages ou en ems (<code>em</code>). Un em est défini comme la taille de police actuelle (théoriquement la largeur d'une lettre m). Lorsque l'utilisateur change la taille de police, votre mise en page s'ajustera donc automatiquement.</p> -<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;"> - <caption> - Exemple</caption> - <tbody> - <tr> - <td>La bordure à gauche de ce texte a son épaisseur spécifiée en pixels. La bordure de droite a son épaisseur spécifiée en ems. - <p>Dans votre navigateur, changez la taille de police pour observer la façon dont la bordure de droite s'ajuste, mais pas celle de gauche :</p> - <table style="border: 2px outset #36b; padding: 1em; background-color: white;"> - <tbody> - <tr> - <td> - <div style=""> - Veuillez me redimensionner</div> - </td> - </tr> - </tbody> - </table> - </td> - </tr> - </tbody> -</table> -<table style="border: 1px solid #36b; padding: 1em; background-color: #f4f4f4; margin-bottom: 1em;"> - <caption> - Plus de détails</caption> - <tbody> - <tr> - <td>Pour d'autres périphériques, d'autres unités de longueur seront plus appropriées. - <p>Plus d'informations à ce sujet sont disponibles dans une prochaine page de ce tutoriel.</p> - <p>Pour plus de détails sur les valeurs et les unités que vous pouvez utiliser, consultez <a class="external" href="http://www.w3.org/TR/CSS21/syndata.html#values">Values</a> dans la spécification CSS.</p> - </td> - </tr> - </tbody> -</table> -<h4 id="Alignement_du_texte" name="Alignement_du_texte">Alignement du texte</h4> -<p>Deux propriétés spécifient la manière dont le contenu d'un élement est aligné. Vous pouvez les utiliser pour des ajustements simples de la mise en page :</p> -<ul> - <li><code>text-align</code></li> -</ul> -<dl> - <dd> - Aligne le contenu. Utiilisez une de ces valeurs : <code>left</code> (à gauche), <code>right</code> (à droite), <code>center</code> (centré), <code>justify</code> (justifié)</dd> -</dl> -<ul> - <li><code>text-indent</code></li> -</ul> -<dl> - <dd> - Donne une certaine retrait (indentation) au contenu, de la largeur spécifiée.</dd> -</dl> -<p>Ces propriétés s'appliquent à tout contenu semblable à du texte dans l'élément, pas uniquement au texte proprement dit. N'oubliez pas qu'elles sont héritées par les enfants de l'élément, ce qui peut vous obliger à les désactiver explicitement dans les éléments enfants pour éviter certains résultats surprenants.</p> -<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;"> - <caption> - Exemple</caption> - <tbody> - <tr> - <td>Pour centrer les titres : - <div style="width: 30em;"> - <pre class="eval"> -h3 { - border-top: 1px solid gray; - text-align: center; - } -</pre> - </div> - <p>Ce qui donne :</p> - <table style="border: 2px outset #36b; padding: 1em; width: 30em; background-color: white;"> - <tbody> - <tr> - <td> - <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray; text-align: center;">(A) Les océans</p> - </td> - </tr> - </tbody> - </table> - <p>Dans un document HTML, le contenu que vous voyez sous un titre n'est pas structurellement contenu par ce titre. Par conséquent, lorsque vous alignez un titre de cette manière, les balises situées en dessous n'héritent pas du style.</p> - </td> - </tr> - </tbody> -</table> -<h4 id="Les_.C3.A9l.C3.A9ments_flottants" name="Les_.C3.A9l.C3.A9ments_flottants">Les éléments flottants</h4> -<p>La propriété <code>float</code> force un élément à se placer à gauche ou à droite. C'est une manière simple de contrôler sa position et sa taille.</p> -<p>Le reste du contenu du document s'écoule normalement autour de l'élément flottant. Vous pouvez contrôler ceci à l'aide de la propriété <code>clear</code> sur d'autres éléments pour les désolidariser des éléments flottants et les ramener en dessous.</p> -<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;"> - <caption> - Exemple</caption> - <tbody> - <tr> - <td>Dans votre document d'exemple, les listes s'étalent sur toute la largeur de la fenêtre. Vous pouvez les en empêcher en les faisant flotter à gauche. - <p>Pour que les titres restent en place, vous devez également spécifier qu'ils resteront à l'écart des éléments flottants à leur gauche :</p> - <div style="width: 30em;"> - <pre class="eval"> -ul, #numerote {float: left;} -h3 {clear: left;} -</pre> - </div> - <p>Le résultat devrait ressembler à ceci :</p> - <table style="border: 2px outset #36b; padding: 1em; width: 30em; background-color: white;"> - <tbody> - <tr> - <td> - <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(A) Les océans</p> - <div style="float: left; border: 12px solid #69b; margin-bottom: 16px; padding-left: 1em;"> - <ul style=""> - <li style="">Arctique</li> - <li style="">Atlantique</li> - <li style="">Pacifique</li> - <li style="">Indien</li> - <li style="">Antarctique</li> - </ul> - </div> - <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(B) Paragraphes numérotés</p> - <div style="float: left; border: 12px solid #69b; margin-bottom: 8px; padding-left: .5em;"> - <p><b>1 : </b>Lorem ipsum</p> - <p><b>2 : </b>Dolor sit</p> - <p><b>3 : </b>Amet consectetuer</p> - <p><b>4 : </b>Magna aliquam</p> - <p><b>5 : </b>Autem veleum</p> - </div> - </td> - </tr> - </tbody> - </table> - <p>(Une petite marge intérieure est nécessaire à droite des boîtes, là où la bordure est trop proche du texte.)</p> - </td> - </tr> - </tbody> -</table> -<h4 id="Positionnement" name="Positionnement">Positionnement</h4> -<p>Vous pouvez spécifier la position d'un élément de quatre manières différentes à l'aide de la propriété <code>position</code> et de l'une des valeurs suivantes.</p> -<p>L'utilisation de ces propriétés peut être très avancée. Il est cependant possible de les utiliser de manière simple — c'est pourquoi elles sont mentionnées dans ce tutoriel basique. Mais leur utilisation dans des mises en page complexes peut s'avérer difficile.</p> -<ul> - <li><code>relative</code></li> -</ul> -<dl> - <dd> - La position de l'élément est déplacée relativement à sa position normale.</dd> - <dd> - Utilisez ceci pour déplacer un élément d'une certaine distance spécifiée. Dans certains cas, vous pouvez aussi utiliser les marges de l'élément pour obtenir le même effet.</dd> -</dl> -<ul> - <li><code>fixed</code></li> -</ul> -<dl> - <dd> - La position de l'élément est fixée.</dd> - <dd> - Spécifie la position de l'élément relativement à la fenêtre du document. Même si le reste du document défile, l'élément reste en place.</dd> -</dl> -<ul> - <li><code>absolute</code></li> -</ul> -<dl> - <dd> - La position de l'élément est fixée relativement à un élément parent.</dd> - <dd> - Cela fonctionnera uniquement lorsque l'élément parent est lui-même positionné avec <code>relative</code>, <code>fixed</code> ou <code>absolute</code>.</dd> -</dl> -<dl> - <dd> - Vous pouvez rendre n'importe quel élément parent utilisable pour ceci en lui spécifiant une <code>position: relative;</code> sans par ailleurs lui spécifier aucun déplacement.</dd> -</dl> -<ul> - <li><code>static</code></li> -</ul> -<dl> - <dd> - La valeur par défaut. Utilisez cette valeur pour désactiver explicitement les autres sortes de positionnement.</dd> -</dl> -<p>En complément de ces valeurs de la propriété <code>position</code> (à l'exception de <code>static</code>), spécifiez une ou plusieurs de ces propriétés : <code>top</code> (haut), <code>right</code> (droite), <code>bottom</code> (bas), <code>left</code> (gauche), <code>width</code> (largeur), <code>height</code> (hauteur) pour identifier où l'élément doit se positionner, et éventuellement sa taille.</p> -<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;"> - <caption> - Exemple</caption> - <tbody> - <tr> - <td>Pour positionner deux éléments l'un au dessus de l'autre, créez un élément parent conteneur avec les deux éléments à l'intérieur de celui-ci : - <div style="width: 30em;"> - <pre class="eval"> -<DIV id="parent-div"> -<P id="forward">/</P> -<P id="back">\</P> -</DIV> -</pre> - </div> - <p>Dans votre feuille de style, rendez la position de l'élément parent <code>relative</code>. Il n'est pas nécessaire de spécifier un déplacement. Rendez ensuite la position des enfants <code>absolute</code> :</p> - <div style="width: 30em;"> - <pre> -#parent-div { - position: relative; - font: bold 200% sans-serif; - } - -#forward, #back { - position: absolute; - margin:0px; - top: 0px; - left: 0px; - } - -#forward { - color: blue; - } - -#back { - color: red; - } -</pre> - </div> - <p>Le résultat ressemble à ceci, avec la barre oblique inversée par dessus l'autre barre oblique :</p> - <div style="position: relative; left: .33em; font: bold 300% sans-serif;"> - <p style="position: absolute; margin: 0px; top: 0px; left: 0px; color: blue;">/</p> - <p style="position: absolute; margin: 0px; top: 0px; left: 0px; color: red;">\</p> - </div> - <table style="border: 2px outset #36b; padding: 1em; width: 30em; height: 5em; background-color: white;"> - <tbody> - <tr> - <td> </td> - </tr> - </tbody> - </table> - <p> </p> - </td> - </tr> - </tbody> -</table> -<table style="border: 1px solid #36b; padding: 1em; background-color: #f4f4f4; margin-bottom: 1em;"> - <caption> - Plus de détails</caption> - <tbody> - <tr> - <td>L'ensemble des informations sur le positionnement prend deux chapitres entiers et assez complexes dans la spécification CSS : <a class="external" href="http://www.w3.org/TR/CSS21/visuren.html">Visual formatting model</a> et <a class="external" href="http://www.w3.org/TR/CSS21/visudet.html">Visual formatting model details</a>. - <p>Si vous réalisez des feuilles de style devant fonctionner dans de nombreux navigateurs, vous devrez aussi prendre en compte les différences dans la manière dont ceux-ci interprètent le standard, voire les erreurs présentes dans certaines versions particulières de certains d'entre-eux.</p> - </td> - </tr> - </tbody> -</table> -<h3 id="Action_:_sp.C3.A9cification_d.27une_mise_en_page" name="Action_:_sp.C3.A9cification_d.27une_mise_en_page">Action : spécification d'une mise en page</h3> -<p>Modifiez vos exemples de document et de feuille de style à l'aide des exemples ci-dessus dans les sections <b>Structure du document</b> et <b>Éléments flottants</b>.</p> -<p>Dans l'exemple des éléments flottants, ajoutez une marge intérieure (padding) pour séparer le texte de la bordure de droite de 0.5 em.</p> -<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;"> - <caption> - Challenge</caption> - <tbody> - <tr> - <td>Modifiez votre document en ajoutant cette balise près de la fin, juste avant <code></BODY></code> - <pre> -<IMG id="fixed-pin" src="punaise-jaune.png" alt="Punaise jaune"> -</pre> - <p>Si vous n'avez pas téléchargé l'image plus tôt dans ce tutoriel, téléchargez-la maintenant :</p> - <table style="border: 2px solid #ccc;"> - <tbody> - <tr> - <td><img alt="Image:punaise-jaune.png"></td> - </tr> - </tbody> - </table> - <p>Essayez de deviner où l'image apparaîtra dans votre document. Actualisez dans votre navigateur pour voir si vous aviez raison.</p> - <p>Ajoutez une règle à votre feuile de style qui fixe l'image en haut à droite de votre document.</p> - <p>Actualisez dans votre navigateur et réduisez la taille de la fenêtre. Vérifiez que l'image reste en haut à droite même lorsque vous faites défiler votre document :</p> - <div style="position: relative; width: 29.5em; height: 18em;"> - <div style="overflow: auto; border: 2px outset #36b; padding: 1em; width: 29em; height: 16em; background-color: white;"> - <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(A) Les océans</p> - <div style="float: left; border: 12px solid #69b; margin-bottom: 16px; padding: 0px .5em 0px 1em;"> - <ul style=""> - <li style="">Arctique</li> - <li style="">Atlantique</li> - <li style="">Pacifique</li> - <li style="">Indien</li> - <li style="">Antarctique</li> - </ul> - </div> - <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(B) Paragraphes numérotés</p> - <div style="float: left; border: 12px solid #69b; padding: 0 .5em 0 .5em;"> - <p><b>1 : </b>Lorem ipsum</p> - <p><b>2 : </b>Dolor sit</p> - <p><b>3 : </b>Amet consectetuer</p> - <p><b>4 : </b>Magna aliquam</p> - <p><b>5 : </b>Autem veleum</p> - </div> - <p style=""> </p> - <div style="position: absolute; top: 2px; right: 0px;"> - <img alt="Punaise jaune"></div> - </div> - </div> - </td> - </tr> - </tbody> -</table> -<p> </p> -<h4 id="Pour_continuer" name="Pour_continuer">Pour continuer</h4> -<p>Si vous avez eu des difficultés à comprendre cette page, ou avez d'autres commentaires à son sujet, n'hésitez pas à contribuer à sa <a>page de discussion</a>.</p> -<p>Vous avez presque couvert tous les sujets de ce tutoriel CSS basique. La page suivante décrit des sélecteurs plus avancés pour les règles CSS, et certaines manières spécifiques de styler des tableaux : <b><a href="/fr/docs/CSS/Premiers_pas/Tableaux">Tableaux</a></b>.</p> diff --git a/files/fr/css/premiers_pas/médias/index.html b/files/fr/css/premiers_pas/médias/index.html deleted file mode 100644 index 3926d7e225..0000000000 --- a/files/fr/css/premiers_pas/médias/index.html +++ /dev/null @@ -1,396 +0,0 @@ ---- -title: Médias -slug: CSS/Premiers_pas/Médias -tags: - - CSS - - 'CSS:Premiers_pas' -translation_of: Web/Progressive_web_apps/Responsive/Media_types ---- -<p> </p> -<p>La plupart des pages de ce tutoriel sont centrées sur les propriétés CSS et les valeurs que vous pouvez utiliser pour spécifier la façon dont sera affiché un document.</p> -<p>Cette page revient sur le but et la structure des feuilles de style CSS.</p> -<h3 id="Information_:_les_m.C3.A9dias" name="Information_:_les_m.C3.A9dias">Information : les médias</h3> -<p>Le but de CSS est de spécifier la manière dont les documents sont présentés à l'utilisateur. La présentation peut prendre plusieurs formes.</p> -<p>Par exemple, vous êtes probablement en train de lire cette page sur un dispositif d'affichage comme un écran d'ordinateur. Mais vous pouvez aussi avoir envie de le projeter sur un grand écran pour un public plus important, ou encore l'imprimer sur papier. Ces différents médias peuvent avoir des caractéristiques différentes. CSS permet donc de présenter un document différemment sur un média différent.</p> -<p>Pour spécifier des règles spécifiques à un type de média, utilisez <code>@media</code> suivi du type de média, suivi de crochets courbes entourant les règles.</p> -<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; width: 100%;"> - <caption> - Exemple</caption> - <tbody> - <tr> - <td>Un document sur un site Web dispose d'une zone de navigation permettant à l'utilisateur de se déplacer dans le site. - <p>Dans le langage de balisage, l'élément parent de la zone de navigation a l'attribut id <code>nav-area</code>.</p> - <p>Lorsque le document est imprimé, la zone de navigation n'a aucun intérêt, elle est donc retirée complètement par la feuille de style :</p> - <div style="width: 30em;"> - <pre class="eval"> -@media print { - #nav-area {display: none;} - } -</pre> - </div> - </td> - </tr> - </tbody> -</table> -<p>Voici certains des types de média courants :</p> -<table style="margin-left: 2em;"> - <tbody> - <tr> - <td><code>screen</code></td> - <td>Écran d'ordinateur en couleurs</td> - </tr> - <tr> - <td><code>print</code></td> - <td>Média paginé</td> - </tr> - <tr> - <td style="padding-right: 1em;"><code>projection</code></td> - <td>Projection sur un écran</td> - </tr> - <tr> - <td><code>all</code></td> - <td>Tous les médias (la valeur par défaut)</td> - </tr> - </tbody> -</table> -<p> </p> -<table style="border: 1px solid #36b; padding: 1em; background-color: #f4f4f4; width: 100%;"> - <caption> - Plus de détails</caption> - <tbody> - <tr> - <td>Il existe d'autres manières de spécifier le type de média d'une série de règles. - <p>Le langage de balisage du document peut permettre de spécifier le type de média au moment où la feuille de style est liée au document. Par exemple, en HTML, vous pouvez optionnellement spécifier le type de média à l'aide de l'attribut <code>media</code> de la balise <code>LINK</code>.</p> - <p>En CSS, vous pouvez utiliser <code>@import</code> au début d'une feuille de style pour en importer une autre depuis une URL, éventuellement en spécifiant le type de média.</p> - <p>En utilisant ces techniques, vous pouvez séparer les règles de style pour différents médias dans différents fichiers. Cela peut s'avérer une manière utile de structurer vos feuilles de style.</p> - <p>Pour tous les détails sur les types de média, consultez <a class="external" href="http://www.w3.org/TR/CSS21/media.html">Media</a> dans la spécification CSS.</p> - <p>Plus d'exemples utilisant la propriété <code>display</code> sont présentés sur une prochaine page de ce tutoriel : <a href="/fr/CSS/Premiers_pas/Données_XML" title="fr/CSS/Premiers_pas/Données_XML">Données XML</a>.</p> - </td> - </tr> - </tbody> -</table> -<p> </p> -<h4 id="Impression" name="Impression">Impression</h4> -<p>CSS possède certaines instructions spécifiques pour l'impression et les médias paginés en général.</p> -<p>Une règle <code>@page</code> permet de spécifier les marges de la page. Pour l'impression recto-verso, vous pouvez spécifier des marges différentes pour les pages de gauche, <code>@page:left</code>, et les pages de droite, <code>@page:right</code>.</p> -<p>Pour les médias imprimés, il vaut mieux utiliser des unités de longueur appropriées, comme les centimètres (<code>cm</code>) et millimètres (<code>mm</code>), les pouces (<code>in</code>) ou les points (1 <code>pt</code> = 1/72 pouces). Il est également toujours approprié d'utiliser <code>em</code> pour s'accorder à la taille de police, et les pourcentages (<code>%</code>).</p> -<p>Vous pouvez contrôler la façon dont le contenu du document se comporte aux abords des limites de pages à l'aide des propriétés <code>page-break-before</code> (saut de page avant), <code>page-break-after</code> (saut de page après) et <code>page-break-inside</code> (saut de page à l'intérieur).</p> -<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; width: 100%;"> - <caption> - Exemples</caption> - <tbody> - <tr> - <td>Cette règle définit les marges de la page à deux centimètres de chaque côté : - <div style="width: 30em;"> - <pre class="eval"> -@page {margin: 2cm;} -</pre> - </div> - <p>Cette règle s'assure que chaque élément <small>H1</small> commencera une nouvelle page :</p> - <div style="width: 30em;"> - <pre class="eval"> -h1 {page-break-before: always;} -</pre> - </div> - </td> - </tr> - </tbody> -</table> -<p> </p> -<table style="border: 1px solid #36b; padding: 1em; background-color: #f4f4f4; width: 100%;"> - <caption> - Plus de détails</caption> - <tbody> - <tr> - <td>Pour tous les détails sur la gestion des médias paginés par CSS, consultez <a class="external" href="http://www.w3.org/TR/CSS21/page.html">Paged media</a> dans la spécification CSS. - <p>Comme les autres fonctionnalités de CSS, l'impression dépend de votre navigateur et de ses réglages. Par exemple, votre navigateur Mozilla fournit des marges, en-têtes et pieds de page par défaut pour l'impression. Lorsque d'autres utilisateurs imprimeront votre document, vous ne pouvez probablement pas prédire le navigateur et les paramètres qu'ils utiliseront, c'est pourquoi vous ne pouvez probablement pas contrôler complètement le résultat.</p> - </td> - </tr> - </tbody> -</table> -<p> </p> -<h4 id="Interfaces_utilisateur" name="Interfaces_utilisateur">Interfaces utilisateur</h4> -<p>CSS possède certaines propriétés spéciales pour les périphériques disposant d'une interface utilisateur comme les écrans d'ordinateur. Celles-ci font que l'apparence du document change dynamiquement et interagit avec les actions de l'utilisateur sur l'interface.</p> -<p>Il n'y a pas de type de média spécial pour ce type de périphériques.</p> -<p>Voici les cinq sélecteurs spéciaux :</p> -<table style="margin-left: 2em;"> - <tbody> - <tr> - <td style="width: 10em;"><strong>Selecteur</strong></td> - <td><strong>Sélectionne</strong></td> - </tr> - <tr> - <td><code>E:hover</code></td> - <td>Tout élément E survolé par le pointeur</td> - </tr> - <tr> - <td><code>E:focus</code></td> - <td>Tout élément E ayant le focus du clavier</td> - </tr> - <tr> - <td><code>E:active</code></td> - <td>Tout élément E impliqué dans l'action courante de l'utilisateur</td> - </tr> - <tr> - <td><code>E:link</code></td> - <td>Tout élément E qui est un lien hypertexte vers une URL que l'utilisateur <em>n'a pas</em> visitée récemment</td> - </tr> - <tr> - <td><code>E:visited</code></td> - <td>Tout élément E qui est un lien hypertexte vers une URL que l'utilisateur <em>a</em> visitée récemment</td> - </tr> - </tbody> -</table> -<p>La propriété <code>cursor</code> spécifie la forme du pointeur : certains des pointeurs courants sont montrés ci-dessous. Placez votre pointeur de souris au dessu des éléments de cette liste pour voir comment apparaissent les différentes formes dans votre navigateur :</p> -<table style="margin-left: 2em;"> - <tbody> - <tr> - <td style="width: 10em;"><strong>Valeur</strong></td> - <td><strong>Indique</strong></td> - </tr> - <tr style="cursor: pointer;"> - <td><code>pointer</code></td> - <td>Indique un lien</td> - </tr> - <tr style="cursor: wait;"> - <td><code>wait</code></td> - <td>Indique que le programme n'accepte aucune interaction pour le moment</td> - </tr> - <tr style="cursor: progress;"> - <td><code>progress</code></td> - <td>Indique que le programme fonctionne, mais peut toujours accepter une autre commande</td> - </tr> - <tr style="cursor: default;"> - <td><code>default</code></td> - <td>Le curseur par défaut (habituellement une flèche)</td> - </tr> - </tbody> -</table> -<p><br> - Une propriété <code>outline</code> crée un encadrement souvent utilisé pour indiquer où se trouve le focus clavier. Ses valeurs sont similaires à celles de la propriété <code>border</code>, sauf que les différents côtés ne peuvent pas être spécifiés individuellement.</p> -<p>Certaines autres fonctionnalités des interfaces utilisateur sont implémentées à l'aide d'attributs, de la façon classique. Par exemple, un élément qui est désactivé ou en lecture seule a (respectivement) l'attribut <code>disabled</code> ou <code>readonly</code>. Les sélecteurs peuvent spécifier ces attributs comme n'importe quel autre attribut, à l'aide des crochets droits : <code>{{ mediawiki.external('disabled') }}</code> ou <code>{{ mediawiki.external('readonly') }}</code>.</p> -<p> </p> -<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; width: 100%;"> - <caption> - Exemple</caption> - <tbody> - <tr> - <td>Ces règles spécifient des styles pour un bouton qui change dynamiquement lorsque l'utilisateur interagit avec lui : - <div style="width: 30em;"> - <pre> -.bouton-vert { - background-color:#cec; - color:#black; - border:2px outset #cec; - } - -.bouton-vert[disabled] { - background-color:#cdc; - color:#777; - } - -.bouton-vert:active { - border-style: inset; - } -</pre> - </div> - <p>Ce wiki ne permet pas d'utiliser des boutons sur la page, mais voici quelques images pour illustrer l'idée :</p> - <table style="border: 2px outset #36b; padding: 1em; background-color: #fff;"> - <tbody> - <tr> - <td> - <table> - <tbody> - <tr> - <td><span style="width: 8em; height: 2em; background-color: #cdc; color: #777; padding: .5em 1em; cursor: default; margin-right: 1em; border: 2px outset #cec;">Cliquez ici</span></td> - <td><span style="width: 8em; height: 2em; background-color: #cec; padding: .5em 1em; cursor: move; margin-right: 1em; border: 2px outset #cec;">Cliquez ici</span></td> - <td><span style="width: 8em; height: 2em; background-color: #cec; padding: .5em 1em; cursor: move; margin-right: 1em; border: 2px inset #cec;">Cliquez ici</span></td> - </tr> - <tr style="line-height: 25%;"> - <td> </td> - </tr> - <tr style="font-style: italic;"> - <td>disabled</td> - <td>normal</td> - <td>active</td> - </tr> - </tbody> - </table> - </td> - </tr> - </tbody> - </table> - <p>Un bouton tout à fait fonctionnel a aussi un contour noir tout autour lorsqu'il est le bouton par défaut, et un encadrement pointillé sur sa surface lorsqu'il a le focus clavier. Il peut également changer grâce à un effet visuel lorsque le pointeur de la souris le survole.</p> - </td> - </tr> - </tbody> -</table> -<table style="border: 1px solid #36b; padding: 1em; background-color: #f4f4f4; margin-bottom: 1em; width: 100%;"> - <caption> - Plus de détails</caption> - <tbody> - <tr> - <td>Pour plus d'informations à propos des interfaces utilisateur en CSS, consultez <a class="external" href="http://www.w3.org/TR/CSS21/ui.html">User interface</a> dans la spécification CSS. - <p>Un exemple avec le langage de balisage de Mozilla pour les interfaces utilisateur, XUL, est fourni dans la partie II de ce tutoriel.</p> - </td> - </tr> - </tbody> -</table> -<h3 id="Action_:_impression_d.27un_document" name="Action_:_impression_d.27un_document">Action : impression d'un document</h3> -<p>Créez un nouveau document HTML, <code>doc4.html</code>. Copiez et collez-y le contenu ci-dessous, en vous assurant de faire défiler jusqu'en bas pour en obtenir l'entièreté :</p> -<div style="width: 48em; height: 12em; overflow: auto;"> - <pre><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> -<HTML> - -<HEAD> -<TITLE>Exemple à imprimer</TITLE> -<LINK rel="stylesheet" type="text/css" href="style4.css"></strong> -</HEAD> - -<BODY> -<H1>Section A</H1> -<P>Ceci est la première section...</P> - -<H1>Section B</H1> -<P>Ceci est la seconde section...</P> - -<DIV id="en-tete-impression"> -Titre pour les médias paginés -</DIV> - -<DIV id="pied-de-page-impression"> -Page : -</DIV> - -</BODY> -</HTML> -</pre> -</div> -<p>Créez une nouvelle feuille de style, <code>style4.css</code>. Copiez et collez-y le contenu ci-dessous, en vous assurant de faire défiler jusqu'en bas pour en obtenir l'entièreté :</p> -<div style="width: 48em; height: 12em; overflow: auto;"> - <pre>/*** Exemple d'impression ***/ - -/* Réglages par défaut pour l'écran */ -#en-tete-impression, -#pied-de-page-impression { - display: none; - } - -/* Uniquement pour l'impression */ -@media print { - -h1 { - page-break-before: always; - padding-top: 2em; - } - -h1:first-child { - page-break-before: avoid; - counter-reset: page; - } - -#en-tete-impression { - display: block; - position: fixed; - top: 0pt; - left:0pt; - right: 0pt; - - font-size: 200%; - text-align: center; - } - -#pied-de-page-impression { - display: block; - position: fixed; - bottom: 0pt; - right: 0pt; - - font-size: 200%; - } - -#pied-de-page-impression:after { - content: counter(page); - counter-increment: page; - } - -} /* fin des paramètres pour l'impression */ -</pre> -</div> -<p>Lorsque vous consultez ce document dans votre navigateur, il utilise le style par défaut de celui-ci.</p> -<p>Lorsque vous l'imprimez (ou demandez un aperçu avant impression) la feuille de style place chaque section sur une page séparée, et ajoute un en-tête et un pied de page à chacune d'elles. Si votre navigateur gère les compteurs, il ajoute le numéro de page dans le pied de page.</p> -<table> - <tbody> - <tr> - <td> - <table style="border: 2px outset #36b; padding: 1em;"> - <tbody> - <tr> - <td> - <table style="width: 15em; margin-right: 2em;"> - <tbody> - <tr> - <td> - <div style="font-size: 150%; text-align: center; margin-bottom: .5em;"> - Titre</div> - <div style="font-size: 150%; font-weight: bold;"> - Section A</div> - <div style="font-size: 75%;"> - Ceci est la première section...</div> - <div style="font-size: 150%; text-align: right; margin-top: 12em;"> - Page : 1</div> - </td> - </tr> - </tbody> - </table> - </td> - </tr> - </tbody> - </table> - </td> - <td> - <table style="border: 2px outset #36b; padding: 1em;"> - <tbody> - <tr> - <td> - <table style="width: 15em; margin-right: 2em;"> - <tbody> - <tr> - <td> - <div style="font-size: 150%; text-align: center; margin-bottom: .5em;"> - Titre</div> - <div style="font-size: 150%; font-weight: bold;"> - Section B</div> - <div style="font-size: 75%;"> - Ceci est la seconde section...</div> - <div style="font-size: 150%; text-align: right; margin-top: 12em;"> - Page : 2</div> - </td> - </tr> - </tbody> - </table> - </td> - </tr> - </tbody> - </table> - </td> - </tr> - </tbody> -</table> -<p> </p> -<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; width: 100%;"> - <caption> - Challenge</caption> - <tbody> - <tr> - <td>Déplacez les règles spécifiques à l'impression dans un fichier CSS séparé. - <p>Utilisez les liens plus haut sur cette page pour lire la spécification CSS. Trouvez-y des détails sur la façon d'importer cette nouvelle feuille CSS spécifique à l'impression dans votre feuille de style.</p> - <p>Faites en sorte que les titres deviennent bleus lorsque le pointeur de la souris passe au dessus d'eux.</p> - </td> - </tr> - </tbody> -</table> -<p> </p> -<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 href="/Talk:fr/CSS/Premiers_pas/Médias" title="Talk:fr/CSS/Premiers_pas/Médias">page de discussion</a>.</p> -<p>Jusqu'à présent, toutes les règles de style dans ce tutoriel ont été spécifiées dans des fichiers. Les règles et leurs valeurs sont fixées. La page suivante explique comment ces règles peuvent être changées dynamiquement à l'aide d'un langage de programmation : <strong><a href="/fr/docs/CSS/Premiers_pas/JavaScript" title="fr/CSS/Premiers_pas/JavaScript">JavaScript</a></strong>.</p> diff --git a/files/fr/css/premiers_pas/pourquoi_utiliser_css/index.html b/files/fr/css/premiers_pas/pourquoi_utiliser_css/index.html deleted file mode 100644 index 682482eefb..0000000000 --- a/files/fr/css/premiers_pas/pourquoi_utiliser_css/index.html +++ /dev/null @@ -1,98 +0,0 @@ ---- -title: Pourquoi utiliser CSS -slug: CSS/Premiers_pas/Pourquoi_utiliser_CSS -tags: - - CSS - - 'CSS:Premiers_pas' -translation_of: Learn/CSS/First_steps/How_CSS_works -translation_of_original: Web/Guide/CSS/Getting_started/Why_use_CSS ---- -<p> </p> -<p>Cette page explique pourquoi les documents utilisent CSS. Vous utiliserez CSS pour ajouter une feuille de style à votre document de démonstration.</p> -<h3 id="Information_:_utilit.C3.A9_de_CSS" name="Information_:_utilit.C3.A9_de_CSS">Information : utilité de CSS</h3> -<p>CSS vous aide à garder l'information contenue dans votre document séparée des détails de sa présentation. Ces détails de présentation d'un document sont appelés son - <i> - style</i> - . La séparation du style et du contenu permet :</p> -<ul> - <li>D'éviter des duplications</li> - <li>Une maintenance plus facile</li> - <li>D'utiliser le même contenu avec différents styles pour différents usages</li> -</ul> -<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;"> - <caption> - Exemple</caption> - <tbody> - <tr> - <td>Votre site Web peut avoir des milliers de pages qui ont un aspect similaire. Avec CSS, vous conservez les informations de style dans des fichiers communs partagés par toutes les pages. - <p>Lorsqu'un visiteur affiche une page, son navigateur charge les informations de style en même temps que le contenu de la page.</p> - <p>Lorsqu'il imprime une page, vous fournissez des informations de style différentes qui rendent la page imprimée facile à lire.</p> - </td> - </tr> - </tbody> -</table> -<p>En général, avec, CSS, vous utilisez le langage de balisage pour décrire les informations contenues dans le document, et non son style. CSS est utilisé pour spécifier son style et non son contenu. (Plus loin dans ce tutoriel, vous verrez qu'il peut y avoir certaines exceptions à cet arrangement.)</p> -<table style="border: 1px solid #36b; padding: 1em; background-color: #f4f4f4; margin-bottom: 1em;"> - <caption> - Plus de détails</caption> - <tbody> - <tr> - <td>Un langage de balisage comme HTML fournit également certaines manières de préciser un style. - <p>Par exemple, en HTML, il est possible d'utiliser une balise <code><B></code> pour rendre du texte gras, ou de spécifier la couleur de fond d'une page dans sa balise <code><BODY></code>.</p> - <p>Lorsqu'on utilise CSS, on évite généralement d'utiliser ces possibilités du langage de balisage afin que toutes les informations de style du document se retrouvent à la même place.</p> - </td> - </tr> - </tbody> -</table> -<h3 id="Action_:_cr.C3.A9ation_d.27une_feuille_de_style" name="Action_:_cr.C3.A9ation_d.27une_feuille_de_style">Action : création d'une feuille de style</h3> -<p>Créez un autre fichier texte dans le même dossier que précédemment. Ce fichier sera votre feuille de style. Appelez-le : <code>style1.css</code></p> -<p>Dans votre fichier CSS, copiez et collez cette simple ligne, puis enregistrez le fichier :</p> -<div style="width: 40em;"> - <pre class="eval">strong {color: red;} -</pre> -</div> -<h4 id="Lier_votre_document_.C3.A0_votre_feuille_de_style" name="Lier_votre_document_.C3.A0_votre_feuille_de_style">Lier votre document à votre feuille de style</h4> -<p>Pour lier votre document à votre feuille de style, éditez votre fichier HTML. Ajoutez la ligne montrée ici en gras :</p> -<div style="width: 50em; color: gray;"> - <pre class="eval"><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" -"<span class="nowiki">http://www.w3.org/TR/html4/strict.dtd</span>"> -<html> - <head> - <meta http-equiv="Content-Type" content="text/html; - charset=iso-8859-1"> - <title>Sample document</title> - <strong style="color: black;"><link rel="stylesheet" type="text/css" href="style1.css"></strong> - </head> - <body> - <p> - <strong>C</strong>ascading - <strong>S</strong>tyle - <strong>S</strong>heets - </p> - </body> -</html> -</pre> -</div> -<p>Enregistrez le fichier et actualisez l'affichage de votre navigateur. La feuille de style rend les lettres initiales rouges, comme ceci :</p> -<table style="border: 2px outset #36b; padding: 1em;"> - <tbody> - <tr> - <td><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td> - </tr> - </tbody> -</table> -<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4;"> - <caption> - Challenge</caption> - <tbody> - <tr> - <td>En plus du rouge (red), CSS permet d'utiliser d'autres noms de couleurs. - <p>Sans regarder dans une référence, trouvez cinq autres noms de couleurs qui fonctionnent dans votre feuille de style.</p> - </td> - </tr> - </tbody> -</table> -<h4 id="Pour_continuer" name="Pour_continuer">Pour continuer</h4> -<p>Si vous avez des difficultés à comprendre cette page, ou si vous avez des commentaires, contribuez à sa <a>page de discussion</a>.</p> -<p>Maintenant que vous avez un document lié à une feuille de style séparée, vous pouvez en apprendre plus sur la manière dont votre navigateur les combine lors de l'affichage du document : <b><a href="/fr/docs/CSS/Premiers_pas/Fonctionnement_de_CSS">Fonctionnement de CSS</a></b>.</p> -<p> </p> diff --git a/files/fr/css/premiers_pas/présentation_des_css/index.html b/files/fr/css/premiers_pas/présentation_des_css/index.html deleted file mode 100644 index 1782164624..0000000000 --- a/files/fr/css/premiers_pas/présentation_des_css/index.html +++ /dev/null @@ -1,126 +0,0 @@ ---- -title: Présentation des CSS -slug: CSS/Premiers_pas/Présentation_des_CSS -tags: - - CSS - - 'CSS:Premiers_pas' -translation_of: Learn/CSS/First_steps/How_CSS_works -translation_of_original: Web/Guide/CSS/Getting_started/What_is_CSS ---- -<p> -{{previousPage("/fr/docs/CSS/Premiers_pas", "Premiers pas")}} -Cette page explique ce que sont les CSS. Vous y créerez un document simple avec lequel vous travaillerez au fil des pages suivantes.</p> -<h3 id="Information_:_CSS.2C_ce_dont_il_s.27agit" name="Information_:_CSS.2C_ce_dont_il_s.27agit">Information : CSS, ce dont il s'agit</h3> -<p>CSS est un langage permettant de spécifier comment les documents sont présentés à l'utilisateur.</p> -<p>Un - <i> - document</i> - est une collection d'informations structurées à l'aide d'un - <i> - langage de balisage</i> - (markup language).</p> -<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;"> - <caption> - Exemples</caption> - <tbody> - <tr> - <td> - <ul> - <li>Une page Web comme celle-ci est un document.<br> - Les informations que vous voyez dans une page Web sont généralement structurées à l'aide du langage HTML (HyperText Markup Language).</li> - </ul> - <ul> - <li>Un dialogue dans une application Mozilla est un document.<br> - Les contrôles de l'interface utilisateur visibles dans un dialogue de Mozilla sont structurés à l'aide du langage de balisage XUL (XML User-interface Language).</li> - </ul> - </td> - </tr> - </tbody> -</table> -<p>Dans ce tutoriel, des boîtes nommées <b>Détails supplémentaires</b> comme celle ci-dessous contiennent des informations optionnelles. Si vous êtes pressé(e) d'avancer dans le tutoriel, vous pouvez passer ces boîtes, pour éventuellement revenir les lire plus tard. Sinon, lisez-les au fil de votre parcours, et suivez les liens pour en savoir plus.</p> -<table style="border: 1px solid #36b; padding: 1em; background-color: #f4f4f4; margin-bottom: 1em;"> - <caption> - Détails supplémentaires</caption> - <tbody> - <tr> - <td> - <p>Un document n'est pas la même chose qu'un fichier. Il peut ou non être stocké dans un fichier.</p> - <p>Par exemple, le document que vous êtes en train de lire n'est pas stocké dans un fichier. Lorsque votre navigateur Web demande cette page, le serveur interroge une base de données et génère le document, assemblant les différentes parties depuis de nombreux fichiers. Cependant, dans ce tutoriel, vous travaillerez avec des documents stockés dans des fichiers.</p> - <p>Pour plus d'informations à propos des documents et des langages de balisage, consultez les autres parties de ce site, par exemple :</p> - <table style="background-color: inherit; margin-left: 2em;"> - <tbody> - <tr> - <td><a href="fr/HTML">HTML</a></td> - <td>pour les pages Web</td> - </tr> - <tr> - <td><a href="fr/XML">XML</a></td> - <td>pour les documents structurés en général</td> - </tr> - <tr> - <td><a href="fr/SVG">SVG</a></td> - <td>pour les documents graphiques</td> - </tr> - <tr> - <td><a href="fr/XUL">XUL</a></td> - <td>pour les interfaces utilisateur dans Mozilla</td> - </tr> - </tbody> - </table> - <p>Dans la partie II de ce tutoriel, vous verrez des exemples de ces langages de balisage.</p> - </td> - </tr> - </tbody> -</table> -<p> - <i> - Présenter</i> - un document à l'utilisateur signifie le convertir dans une forme utilisable par un être humain. Mozilla est conçu pour présenter des documents visuellement, par exemple sur un écran d'ordinateur, un projecteur ou une imprimante.</p> -<table style="border: 1px solid #36b; padding: 1em; background-color: #f4f4f4; margin-bottom: 1em;"> - <caption> - Détails supplémentaires</caption> - <tbody> - <tr> - <td>CSS ne sert pas uniquement aux navigateurs, ni pour des présentations visuelles. Dans la terminologie formelle CSS, le programme présentant un document à l'utilisateur est appelé - <i> - agent utilisateur</i> - (user agent ou UA). Un navigateur est simplement une sorte d'UA. Cependant, dans la partie I de ce tutoriel, vous travaillerez uniquement avec CSS dans un navigateur. - <p>Pour les définitions formelles de la terminologie liée à CSS, voir <a class="external" href="http://www.w3.org/TR/CSS21/conform.html#q1">Définitions</a> dans la spécification CSS.</p> - </td> - </tr> - </tbody> -</table> -<h3 id="Action_:_cr.C3.A9ation_d.27un_document" name="Action_:_cr.C3.A9ation_d.27un_document">Action : création d'un document</h3> -<p>Utilisez votre ordinateur pour créer un nouveau dossier et un nouveau fichier texte à l'intérieur de celui-ci. Ce fichier contiendra votre document.</p> -<p>Copiez et collez le HTML affiché ci-dessous. Enregistrez le fichier sous le nom <code>doc1.html</code></p> -<pre class="eval"><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" -"<a class="external" href="http://www.w3.org/TR/html4/strict.dtd" rel="freelink">http://www.w3.org/TR/html4/strict.dtd</a>"> -<html> - <head> - <title>Document de démonstration</title> - <meta http-equiv="Content-Type" content="text/html; - charset=iso-8859-1"> - </head> - <body> - <p> - <strong>C</strong>ascading - <strong>S</strong>tyle - <strong>S</strong>heets - </p> - </body> -</html> -</pre> -<p>Dans votre navigateur, ouvrez un nouvel onglet ou une nouvelle fenêtre, et ouvrez-y le fichier.</p> -<p>Vous devriez voir le texte avec les lettres initales en gras, comme ceci :</p> -<table style="border: 2px outset #36b; padding: 1em;"> - <tbody> - <tr> - <td><strong>C</strong>ascading <strong>S</strong>tyle <strong>S</strong>heets</td> - </tr> - </tbody> -</table> -<p>Ce que vous voyez dans votre navigateur peut ne pas apparaître exactement comme cela, suivant les paramètres de votre navigateur et de ce wiki. S'il y a certaines différences dans la police, l'espacement et les couleurs, elles ne sont pas importantes.</p> -<h3 id="Pour_continuer" name="Pour_continuer">Pour continuer</h3> -<p> -{{nextPage("/fr/docs/CSS/Premiers_pas/Pourquoi_utiliser_CSS", "Pourquoi utiliser CSS")}} -Votre document n'utilise pas encore CSS. Sur la page suivante, vous utiliserez CSS pour spécifier son propre style : <a href="/fr/docs/CSS/Premiers_pas/Pourquoi_utiliser_CSS">Pourquoi utiliser CSS</a>.</p> diff --git a/files/fr/css/premiers_pas/styles_de_texte/index.html b/files/fr/css/premiers_pas/styles_de_texte/index.html deleted file mode 100644 index 61bccf32f1..0000000000 --- a/files/fr/css/premiers_pas/styles_de_texte/index.html +++ /dev/null @@ -1,63 +0,0 @@ ---- -title: Styles de texte -slug: CSS/Premiers_pas/Styles_de_texte -tags: - - CSS - - 'CSS:Premiers_pas' -translation_of: Learn/CSS/Styling_text/Fundamentals -translation_of_original: Web/Guide/CSS/Getting_started/Text_styles ---- -<p> </p> -<p>Cette page vous donne plus d'exemples de styles de texte.</p> -<p>Vous modifierez votre feuille de style pour utiliser différentes polices.</p> -<h3 id="Information_:_les_styles_de_texte" name="Information_:_les_styles_de_texte">Information : les styles de texte</h3> -<p>CSS dispose de plusieurs propriétés pour les styles de texte.</p> -<p>Il existe une propriété raccourcie pratique, <code>font</code>, que vous pouvez utiliser pour spécifier plusieurs choses à la fois — par exemple :</p> -<ul> <li>Les styles gras, italique et petites majuscules (petites capitales)</li> <li>La taille du texte</li> <li>La hauteur de ligne</li> <li>La police utilisée</li> -</ul> -<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;"> <caption>Exemple </caption> <tbody> <tr> <td> <div style="width: 40em;"> <pre class="eval"> -p {font: italic 75%/125% "Comic Sans MS", cursive;} -</pre> </div> <p>Cette règle change plusieurs propriétés de la police, et rend tous les paragraphes en italique.</p> <p>La taille du texte est définie aux trois quarts de la taille dans l'élément parent de chaque paragraphe, et la hauteur de ligne à 125% (un petit peu plus espacé qu'habituellement).</p> <p>La police choisie est Comic Sans MS, mais si celle-ci n'est pas disponible le navigateur utilisera sa police cursive (écriture à la main) par défaut.</p> <p>La règle a un effet de bord qui est de désactiver le gras et les petites majuscules (en les définissant à <code>normal</code>).</p> </td> </tr> </tbody> -</table> -<h4 id="Polices" name="Polices">Polices</h4> -<p>Il n'est pas possible de prédire les polices que les lecteurs de votre document auront. C'est pourquoi, lorsque vous spécifiez une police, il est utile de donner une liste d'alternatives, dans l'ordre de préférence.</p> -<p>À la fin de la liste, indiquez l'un des types de polices génériques par défaut : <code>serif</code>, <code>sans-serif</code>, <code>cursive</code>, <code>fantasy</code> ou <code>monospace</code>. (Celles-ci correspondent souvent à des paramètres définis dans les options de votre navigateur.)</p> -<p>Si la police ne permet pas d'afficher certaines parties du document, le navigateur peut lui substituer une autre police. Par exemple, le document peut contenir des caractères spéciaux qui ne sont pas définis dans la police. Si le navigateur arrive à trouver une autre police qui dispose de ces caractères, il utilisera celle-ci.</p> -<p>Pour spécifier une police particulière, utilisez la propriété <code>font-face</code>.</p> -<h4 id="Taille_de_police" name="Taille_de_police">Taille de police</h4> -<p>Les lecteurs utilisant des navigateurs Mozilla peuvent choisir la taille de police par défaut dans les options et changer la taille du texte pendant la lecture d'une page, il est donc recommandé d'utiliser des tailles de police relatives où c'est possible.</p> -<p>Vous pouvez utiliser certaines valeurs prédéfinies pour la taille, comme <code>small</code>, <code>medium</code> et <code>large</code>. Vous pouvez également utiliser des valeurs relatives à la taille de police de l'élément parent, comme ceci : <code>smaller</code>, <code>larger</code>, <code>150%</code> ou <code>1.5</code>.</p> -<p>Si nécessaire, vous pouvez spécifier une taille précise, comme : <code>12px</code> (12 pixels) pour un dispositif d'affichage ou <code>12pt</code> (12 points) pour une imprimante. Cette taille est théoriquement la largeur d'une lettre m, mais la manière dont la taille visible est liée à la taille spécifiée dépend d'une police à l'autre.</p> -<p>Pour spécifier une taille de police particulière, utilisez la propriété <code>font-size</code>.</p> -<h4 id="Hauteur_de_ligne" name="Hauteur_de_ligne">Hauteur de ligne</h4> -<p>La hauteur de ligne spécifie l'espacement entre les lignes. Si votre document dispose de longs paragraphes s'étalant sur de nombreuses lignes, un espacement plus grand que d'habitude peut le rendre plus facile à lire, particulièrement si la taille de police est petite.</p> -<p>Pour spécifier une hauteur de ligne particulière, utilisez la propriété <code>line-height</code>.</p> -<h4 id="D.C3.A9coration" name="D.C3.A9coration">Décoration</h4> -<p>La propriété séparée <code>text-decoration</code> permet de spécifier d'autres styles, comme <code>underline</code> (souligné), ou <code>line-through</code> (barré). Vous pouvez la définir à <code>normal</code> pour enlever explicitement toute décoration.</p> -<h4 id="Autres_propri.C3.A9t.C3.A9s" name="Autres_propri.C3.A9t.C3.A9s">Autres propriétés</h4> -<p>Pour spécifier l'italique, utilisez <code>font-style: italic;</code><br> -Pour spécifier le gras, utilisez <code>font-weight: bold;</code><br> -Pour spécifier de petites majuscules, utilisez <code>font-variant: small-caps;</code></p> -<p>Pour désactiver individuellement chacune de ces propriétés, vous pouvez spécifier la valeur <code>normal</code> ou <code>inherit</code>.</p> -<table style="border: 1px solid #36b; padding: 1em; background-color: #f4f4f4; margin-bottom: 1em;"> <caption>Plus de détails </caption> <tbody> <tr> <td>Vous pouvez spécifier des styles de texte de bien d'autres manières. <p>Par exemple, certaines des propriétés mentionnées ici disposent d'autres valeurs possibles.</p> <p>Dans une feuille de style complexe, évitez d'utiliser la propriété raccourcie <code>font</code>, à cause de ses effets de bord (mise à zéro des autres propriétés).</p> <p>Pour plus de détails sur l'ensemble des propriétés liées aux polices, consultez <a class="external" href="http://www.w3.org/TR/CSS21/fonts.html">Fonts</a> dans la spécification CSS. Pour plus de détails sur la décoration du texte, consultez-y la section <a class="external" href="http://www.w3.org/TR/CSS21/text.html">Text</a>.</p> </td> </tr> </tbody> -</table> -<h3 id="Action_:_sp.C3.A9cification_de_polices" name="Action_:_sp.C3.A9cification_de_polices">Action : spécification de polices</h3> -<p>Pour un document simple, vous pouvez définir la police sur l'élément <small>BODY</small>, et tout le reste du document en héritera.</p> -<p>Éditez votre fichier CSS. Ajoutez cette règle pour changer la police globale. Le haut du fichier CSS est un endroit logique pour ce faire, mais la règle a le même effet où qu'elle soit placée :</p> -<div style="width: 40em;"> -<pre class="eval">body {font: 16px "Comic Sans MS", cursive;} -</pre> -</div> -<p>Ajoutez un commentaire expliquant la règle, et des espaces pour respecter la mise en page choisie.</p> -<p>Actualisez dans votre navigateur pour en voir l'effet. Si votre système dispose de Comic Sans MS, ou d'une autre police cursive qui ne supporte pas l'italique, votre navigateur choisira une police différente pour le texte en italique à la première ligne :</p> -<table style="border: 2px outset #36b; padding: 1em;"> <tbody> <tr> <td style="font: italic 16px 'Comic Sams MS', cursive; color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: green;">S</strong>tyle <strong style="color: green;">S</strong>heets</td> </tr> <tr> <td style="font: 16px 'Comic Sams MS', cursive; color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td> </tr> </tbody> -</table> -<p>Depuis la barre de menus, choisissez Affichage – Taille du texte – Plus grande. Bien que vous ayez spécifié précisément 16 pixels dans le style, un utilisateur lisant le document peut en changer la taille.</p> -<p> </p> -<table style="border: 1px solid #36b; padding: 1em; background-color: #ffe;"> <caption>Challenge </caption> <tbody> <tr> <td>Sans rien changer d'autre, rendez les six lettres initiales deux fois plus grandes que la taille normale dans la police serif par défaut du navigateur : <table> <tbody> <tr> <td style="font: italic 16px 'Comic Sams MS', cursive; color: blue;"><strong style="color: red; font: 200% serif;">C</strong>ascading <strong style="color: green; font: 200% serif;">S</strong>tyle <strong style="color: green; font: 200% serif;">S</strong>heets</td> </tr> <tr> <td style="font: 16px 'Comic Sams MS', cursive; color: blue;"><strong style="color: red; font: 200% serif;">C</strong>ascading <strong style="color: red; font: 200% serif;">S</strong>tyle <strong style="color: red; font: 200% serif;">S</strong>heets</td> </tr> </tbody> </table> </td> </tr> </tbody> -</table> -<p> </p> -<h4 id="Pour_continuer" name="Pour_continuer">Pour continuer</h4> -<p>Votre document d'exemple utilise déjà plusieurs noms de couleurs. La page suivante liste les noms des couleurs standard et explique comment en spécifier d'autres : <strong><a href="/fr/CSS/Premiers_pas/Couleurs" title="fr/CSS/Premiers_pas/Couleurs">Couleurs</a></strong></p> - -<p>{{ languages( { "en": "en/CSS/Getting_Started/Text_styles", "it": "it/Conoscere_i_CSS/Stili_del_testo", "ja": "ja/CSS/Getting_Started/Text_styles", "pl": "pl/CSS/Na_pocz\u0105tek/Style_tekstowe", "pt": "pt/CSS/Como_come\u00e7ar/Estilos_de_texto" } ) }}</p> diff --git a/files/fr/css/premiers_pas/tableaux/index.html b/files/fr/css/premiers_pas/tableaux/index.html deleted file mode 100644 index 9fcc9dbd2d..0000000000 --- a/files/fr/css/premiers_pas/tableaux/index.html +++ /dev/null @@ -1,602 +0,0 @@ ---- -title: Tableaux -slug: CSS/Premiers_pas/Tableaux -tags: - - CSS - - 'CSS:Premiers_pas' -translation_of: Learn/CSS/Building_blocks/Styling_tables -translation_of_original: Web/Guide/CSS/Getting_started/Tables ---- -<p> </p> -<p>Cette page présente des sélecteurs plus avancés, et certaines manières spécifiques de styler les tableaux.</p> -<p>Vous créerez un nouveau document contenant un tableau, et une feuille de style pour celui-ci.</p> -<h3 id="Information_:_d.27autres_s.C3.A9lecteurs" name="Information_:_d.27autres_s.C3.A9lecteurs">Information : d'autres sélecteurs</h3> -<p>CSS propose plusieurs manières de sélectionner des éléments sur base de leur relation avec d'autres éléments. Vous pouvez utiliser celles-ci pour créer des sélecteurs plus spécifiques.</p> -<p>Voici un résumé des sélecteurs basés sur les relations :</p> -<table style="margin-left: 2em;"> - <tbody> - <tr> - <td style="width: 10em;"><strong>Sélecteur</strong></td> - <td><strong>Sélectionne</strong></td> - </tr> - <tr> - <td><code>A E</code></td> - <td>Tout élément E qui est un <em>descendant</em> d'un élément A (c'est-à-dire un enfant, ou l'enfant d'un enfant, <em>etc</em>.)</td> - </tr> - <tr> - <td><code>A > E</code></td> - <td>Tout élément E qui est un enfant direct d'un élément A</td> - </tr> - <tr> - <td><code>E:first-child</code></td> - <td>Tout élément E qui est le premier enfant de son parent</td> - </tr> - <tr> - <td><code>B + E</code></td> - <td>Tout élément E qui est le <em>frère</em> d'un élément B (c'est-à-dire l'enfant suivant du même parent)</td> - </tr> - </tbody> -</table> -<p>Vous pouvez combiner ceux-ci pour exprimer des relations complexes.</p> -<p>Vous pouvez également utiliser le symbole <code>*</code> (astérisque) pour désigner « n'importe quel élément. »</p> -<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;"> - <caption> - Exemple</caption> - <tbody> - <tr> - <td>Un tableau HTML a un attribut <code>id</code>, mais ses lignes et cellules n'ont pas d'identifiants individuels : - <div style="width: 30em;"> - <pre class="eval"> -<TABLE id="data-table-1"> -... -<TR> -<TD>Préfixe</TD> -<TD>0001</TD> -<TD>par défaut</TD> -</TR> -... -</pre> - </div> - <p>Ces règles rendent la première cellule de chaque ligne en gras, et la seconde cellule de chaque ligne en largeur fixe. Elles affectent un tableau spécifique dans le document :</p> - <div style="width: 45em;"> - <p><code>#data-table-1 td:first-child {font-weight: bolder;}</code> <code>#data-table-1 td:first-child + td {font-family: monospace;}</code></p> - </div> - <p>Le résultat ressemble à ceci :</p> - <table style="border: 2px outset #36b; padding: 1em; background-color: white;"> - <tbody> - <tr> - <td> - <table style="width: 18em; margin-right: 2em;"> - <tbody> - <tr> - <td><strong>Préfixe</strong></td> - <td><code>0001</code></td> - <td>par défaut</td> - </tr> - </tbody> - </table> - </td> - </tr> - </tbody> - </table> - </td> - </tr> - </tbody> -</table> -<table style="border: 1px solid #36b; padding: 1em; background-color: #f4f4f4; margin-bottom: 1em;"> - <caption> - Plus de détails</caption> - <tbody> - <tr> - <td>Comme d'habitude, si vous rendez un sélecteur plus spécifique, vous augmentez sa priorité. - <p>Si vous utilisez ces techniques, vous évitez le besoin de spécifier des attributs <code>class</code> ou <code>id</code> sur une énorme quantité de balises dans votre document. Au lieu de cela, c'est CSS qui fait tout le travail.</p> - <p>Dans de grosses mises en pages où la vitesse est importante, vous pouvez rendre vos feuilles de style plus performantes en évitant les règles complexes qui dépendent des relations entre éléments.</p> - <p>Pour plus de détails sur les sélecteurs, consultez <a class="external" href="http://www.w3.org/TR/CSS21/selector.html">Selectors</a> dans la spécification CSS.</p> - </td> - </tr> - </tbody> -</table> -<h3 id="Information_:_les_tableaux" name="Information_:_les_tableaux">Information : les tableaux</h3> -<p>Un tableau est un arrangement d'informations dans une grille rectangulaire. Certains tableaux peuvent être complexes, et pour des tableaux complexes les résultats peuvent être différents selon le navigateur.</p> -<p>Lorsque vous concevez votre document, utilisez un tableau pour exprimer les relations entre les pièces d'information. Dans ce cas, cela n'a pas d'importance si différents navigateurs présentent les informations de manière légèrement différente, puisque leur signification reste claire.</p> -<p>N'utilisez pas les tableaux de manière inhabituelle pour produire des mises en page visuelles particulières. Les techniques présentées sur la page précédente (<a href="/fr/CSS/Premiers_pas/Mise_en_page" title="fr/CSS/Premiers_pas/Mise_en_page">Mise en page</a>) sont plus appropriées pour cela.</p> -<h4 id="Structure_d.27un_tableau" name="Structure_d.27un_tableau">Structure d'un tableau</h4> -<p>Dans un tableau, chaque élément d'information est affiché dans une <em>cellule</em>.</p> -<p>Une rangée horizontale de cellules forme une <em>ligne</em>.</p> -<p>Dans certains tableaux, les lignes peuvent être groupées. Un groupe spécial de lignes au début du tableau est un <em>en-tête</em> (header) de tableau. Un groupe spécial de lignes en fin de tableau est un <em>pied</em> (footer) de tableau. Les lignes principales sont le <em>corps</em> (body) du tableau, et peuvent également former des groupes.</p> -<p>Les cellules alignées verticalement forment une <em>colonne</em>, mais les colonnes ont une utilisation limitée en CSS.</p> -<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; width: 100%;"> - <caption> - Exemple</caption> - <tbody> - <tr> - <td>Le tableau des sélecteurs en début de page contient dix cellules réparties en cinq lignes. - <p>La première ligne est l'en-tête. Les quatre autres lignes sont le corps du tableau. Il n'y a pas de pied de tableau.</p> - <p>Il y a deux colonnes.</p> - </td> - </tr> - </tbody> -</table> -<p><br> - Ce tutoriel couvre uniquement les tableaux simples, où les résultats sont relativement prévisibles. Dans un tableau simple, chaque cellule occupe uniquement une ligne et une colonne. Vous pouvez utiliser CSS pour des tableaux complexes ou les cellules s'étendent au travers de plus d'une ligne ou colonne, mais de telles tables dépassent le sujet de ce tutoriel basique.</p> -<h4 id="Bordures" name="Bordures">Bordures</h4> -<p>Les cellules n'ont pas de marge extérieure (margin).</p> -<p>Les cellules ont des bordures et des marges intérieures (padding). Par défaut, les bordures sont séparées par la valeur de la propriété <code>border-spacing</code> du tableau. Vous pouvez également supprimer tout à fait cet espace en définissant la propriété <code>border-collapse</code> du tableau à <code>collapse</code>.</p> -<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; width: 100%;"> - <caption> - Exemple</caption> - <tbody> - <tr> - <td>Voici trois tableaux. - <p>Le tableau de gauche a un espacement entre les bordures de 0.5 em. Le tableau central a un espacement nul entre ses bordures. Dans le tableau de droite, cet espacement a été supprimé avec <code>collapse</code> :</p> - <table style="border: 2px outset #36b; padding: 1em; background-color: white;"> - <tbody> - <tr> - <td style="padding-right: 2em;"> - <table style=""> - <tbody> - <tr> - <td style="border: 1px solid #c00; text-align: center;">Trèfle</td> - <td style="border: 1px solid #c00; text-align: center;">Cœur</td> - </tr> - <tr> - <td style="border: 1px solid #c00; text-align: center;">Carreau</td> - <td style="border: 1px solid #c00; text-align: center;">Pique</td> - </tr> - </tbody> - </table> - </td> - <td style="padding-right: 2em;"> - <table style=""> - <tbody> - <tr> - <td style="border: 1px solid #c00; text-align: center;">Trèfle</td> - <td style="border: 1px solid #c00; text-align: center;">Cœur</td> - </tr> - <tr> - <td style="border: 1px solid #c00; text-align: center;">Carreau</td> - <td style="border: 1px solid #c00; text-align: center;">Pique</td> - </tr> - </tbody> - </table> - </td> - <td style="padding-right: 6em;"> - <table style="border-collapse: collapse;"> - <tbody> - <tr> - <td style="border: 1px solid #c00; text-align: center;">Trèfle</td> - <td style="border: 1px solid #c00; text-align: center;">Cœur</td> - </tr> - <tr> - <td style="border: 1px solid #c00; text-align: center;">Carreau</td> - <td style="border: 1px solid #c00; text-align: center;">Pique</td> - </tr> - </tbody> - </table> - </td> - </tr> - </tbody> - </table> - </td> - </tr> - </tbody> -</table> -<h4 id="L.C3.A9gendes" name="L.C3.A9gendes">Légendes</h4> -<p>Une <em>légende</em> (caption) est un label qui s'applique à l'entièreté du tableau. Par défaut, elle est affichée en haut du tableau.</p> -<p>Pour la déplacer en bas, définissez sa propriété <code>caption-side</code> à <code>bottom</code> (en bas). La propriété est héritée, vous pouvez donc aussi la définir sur le tableau complet, ou un autre ancêtre de l'élément.</p> -<p>Pour styler le texte de la légende, utilisez n'importe laquelle des propriétés habituelles du texte.</p> -<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; width: 100%;"> - <caption> - Exemple</caption> - <tbody> - <tr> - <td>Ce tableau a une légende placée en dessous : - <div style="width: 30em;"> - <pre class="eval"> -#demo-table > caption { - caption-side: bottom; - font-style: italic; - text-align: right; - } -</pre> - </div> - <table style="border: 2px outset #36b; padding: 1em 6em 1em 1em; background-color: white;"> - <tbody> - <tr> - <td> - <table> - <caption> - Suites</caption> - <tbody> - <tr> - <td> - <table style="border-collapse: collapse;"> - <tbody> - <tr> - <td style="border: 1px solid gray; text-align: center;">Trèfle</td> - <td style="border: 1px solid gray; text-align: center;">Cœur</td> - </tr> - <tr> - <td style="border: 1px solid gray; text-align: center;">Carreau</td> - <td style="border: 1px solid gray; text-align: center;">Pique</td> - </tr> - </tbody> - </table> - </td> - </tr> - </tbody> - </table> - </td> - </tr> - </tbody> - </table> - </td> - </tr> - </tbody> -</table> -<h4 id="Cellules_vides" name="Cellules_vides">Cellules vides</h4> -<p>Il est possible d'afficher des cellules vides (c'est-à-dire leurs bordures et fonds) en spéficiant <code>empty-cells: show;</code> pour l'élément <code>table</code>.</p> -<p>Vous pouvez les masquer en spécifiant <code>empty-cells: hide;</code>. Dans ce cas, si un élément parent a un fond, il sera visible à travers la cellule vide.</p> -<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; width: 100%;"> - <caption> - Exemple</caption> - <tbody> - <tr> - <td>Ces tableaux ont un fond vert pâle. Leurs cellules ont un fond gris pâle et des bords gris foncé. - <p>Dans le tableau de gauche, la cellule vide est affichée. Dans celui de droite, celle-ci est masquée :</p> - <table style="border: 2px outset #36b; padding: 1em; background-color: white;"> - <tbody> - <tr> - <td style="padding-right: 2em;"> - <table style="background-color: #dfd;"> - <tbody> - <tr> - <td style="border: 1px solid #555; background-color: #eee;"> </td> - <td style="border: 1px solid #555; background-color: #eee; text-align: center;">Cœur</td> - </tr> - <tr> - <td style="border: 1px solid #555; background-color: #eee; text-align: center;">Carreau</td> - <td style="border: 1px solid #555; background-color: #eee; text-align: center;">Pique</td> - </tr> - </tbody> - </table> - </td> - <td style="padding-right: 6em;"> - <table style="background-color: #dfd;"> - <tbody> - <tr> - <td> </td> - <td style="border: 1px solid #555; background-color: #eee; text-align: center;">Cœur</td> - </tr> - <tr> - <td style="border: 1px solid #555; background-color: #eee; text-align: center;">Carreau</td> - <td style="border: 1px solid #555; background-color: #eee; text-align: center;">Pique</td> - </tr> - </tbody> - </table> - </td> - </tr> - </tbody> - </table> - </td> - </tr> - </tbody> -</table> -<p> </p> -<table style="border: 1px solid #36b; padding: 1em; background-color: #f4f4f4; margin-bottom: 1em;"> - <caption> - Plus de détails</caption> - <tbody> - <tr> - <td>Pour des informations détaillées concernant les tableaux, consultez <a class="external" href="http://www.w3.org/TR/CSS21/tables.html">Tables</a> dans la spécification CSS. - <p>Les informations qui s'y trouvent vont plus loin que ce tutoriel, mais elles ne couvrent pas les différences entre navigateurs qui peuvent affecter les tableaux complexes.</p> - </td> - </tr> - </tbody> -</table> -<h3 id="Action_:_habillage_d.27un_tableau" name="Action_:_habillage_d.27un_tableau">Action : habillage d'un tableau</h3> -<p>Créez un nouveau document HTML, <code>doc3.html</code>. Copiez et collez-y le contenu ci-dessous, en vous assurant de le faire défiler jusqu'en bas pour en obtenir la totalité :</p> -<div style="width: 48em; height: 12em; overflow: auto;"> - <pre><DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> -<HTML> -<HEAD> -<TITLE>Document exemple 3</TITLE> -<LINK rel="stylesheet" type="text/css" href="style3.css"> -</HEAD> -<BODY> - -<TABLE id="demo-table"> -<CAPTION>Les océans</CAPTION> - -<THEAD> -<TR> -<TH></TH> -<TH>Surface</TH> -<TH>Profondeur moyenne</TH> -</TR> -<TR> -<TH></TH> -<TH>millions de km<SUP>2</SUP></TH> -<TH>m</TH> -</TR> -</THEAD> - -<TBODY> -<TR> -<TH>Arctique</TH> -<TD>13 000</TD> -<TD>1 200</TD> -</TR> -<TR> -<TH>Atlantique</TH> -<TD>87 000</TD> -<TD>3 900</TD> -</TR> -<TR> -<TH>Pacifique</TH> -<TD>180 000</TD> -<TD>4 000</TD> -</TR> -<TR> -<TH>Indien</TH> -<TD>75 000</TD> -<TD>3 900</TD> -</TR> -<TR> -<TH>Antarctique</TH> -<TD>20 000</TD> -<TD>4 500</TD> -</TR> -</TBODY> - -<TFOOT> -<TR> -<TH>Total</TH> -<TD>361 000</TD> -<TD></TD> -</TR> -<TR> -<TH>Moyenne</TH> -<TD>72 000</TD> -<TD>3 800</TD> -</TR> -</TFOOT> - -</TABLE> - -</BODY> -</HTML> -</pre> -</div> -<p>Créez une nouvelle feuille de style, <code>style3.css</code>. Copiez et collez-y le code ci-dessous, en vous assurant de le faire défiler jusqu'en bas pour en obtenir la totalité :</p> -<div style="width: 48em; height: 12em; overflow: auto;"> - <pre>/*** Style pour doc3.html (Tables) ***/ - -#demo-table { - font: 100% sans-serif; - background-color: #efe; - border-collapse: collapse; - empty-cells: show; - border: 1px solid #7a7; - } - -#demo-table > caption { - text-align: left; - font-weight: bold; - font-size: 200%; - border-bottom: .2em solid #4ca; - margin-bottom: .5em; - } - - -/* règles de base partagées */ -#demo-table th, -#demo-table td { - text-align: right; - padding-right: .5em; - } - -#demo-table th { - font-weight: bold; - padding-left: .5em; - } - - -/* en-tête */ -#demo-table > thead > tr:first-child > th { - text-align: center; - color: blue; - } - -#demo-table > thead > tr + tr > th { - font-style: italic; - color: gray; - } - -/* taille des valeurs en exposant */ -#demo-table sup { - font-size: 75%; - } - -/* corps du tableau */ -#demo-table td { - background-color: #cef; - padding:.5em .5em .5em 3em; - } - -#demo-table tbody th:after { - content: " :"; - } - - -/* pied du tableau */ -#demo-table tfoot { - font-weight: bold; - } - -#demo-table tfoot th { - color: blue; - } - -#demo-table tfoot th:after { - content: " :"; - } - -#demo-table > tfoot td { - background-color: #cee; - } - -#demo-table > tfoot > tr:first-child td { - border-top: .2em solid #7a7; - } -</pre> -</div> -<p>Ouvrez le document dans votre navigateur. Il devrait être très semblable à ceci :</p> -<table style="border: 2px outset #36b; padding: 1em 6em 1em 1em; background-color: white;"> - <tbody> - <tr> - <td> - <div> - <p style="font: bold 200% sans-serif; text-align: left; border-bottom: .2em solid #4ca; margin: 0px 0px .5em 0px;">Les océans</p> - <div style="border: 1px solid #7a7; background-color: #efe;"> - <table style="font: 100% sens-serif; background-color: #efe; border-collapse: collapse; text-align: right; padding-right: .5em;"> - <tbody> - <tr style="text-align: center; color: blue;"> - <th> </th> - <th>Surface</th> - <th style="padding-left: .5em; padding-right: .5em;">Profondeur moyenne</th> - </tr> - <tr style="font-style: italic; color: gray;"> - <th> </th> - <th style="padding-left: .5em; padding-right: .5em;">millions de km<sup>2</sup></th> - <th style="padding-left: .5em; padding-right: .5em;">m</th> - </tr> - <tr> - <th style="padding-right: .5em;">Arctique :</th> - <td style="background-color: #cef; padding: .5em .5em .5em 3em;">13 000</td> - <td style="background-color: #cef; padding: .5em .5em .5em 3em;">1 200</td> - </tr> - <tr> - <th style="padding-right: .5em;">Atlantique :</th> - <td style="background-color: #cef; padding: .5em .5em .5em 3em;">87 000</td> - <td style="background-color: #cef; padding: .5em .5em .5em 3em;">3 900</td> - </tr> - <tr> - <th style="padding-right: .5em;">Pacifique :</th> - <td style="background-color: #cef; padding: .5em .5em .5em 3em;">180 000</td> - <td style="background-color: #cef; padding: .5em .5em .5em 3em;">4 000</td> - </tr> - <tr> - <th style="padding-right: .5em;">Indien :</th> - <td style="background-color: #cef; padding: .5em .5em .5em 3em;">75 000</td> - <td style="background-color: #cef; padding: .5em .5em .5em 3em;">3 900</td> - </tr> - <tr> - <th style="padding-left: .5em; padding-right: .5em;">Antarctique :</th> - <td style="background-color: #cef; padding: .5em .5em .5em 3em;">20 000</td> - <td style="background-color: #cef; padding: .5em .5em .5em 3em;">4 500</td> - </tr> - <tr> - <th style="padding-right: .5em; color: blue;">Total :</th> - <td style="background-color: #cee; padding: .5em .5em .5em 3em; border-top: .2em solid #7a7;">361 000</td> - <td style="background-color: #cee; padding: .5em .5em .5em 3em; border-top: .2em solid #7a7;"> </td> - </tr> - <tr> - <th style="padding-right: .5em; color: blue;">Moyenne :</th> - <td style="background-color: #cee; padding: .5em .5em .5em 3em;">72 000</td> - <td style="background-color: #cee; padding: .5em .5em .5em 3em;">3 800</td> - </tr> - </tbody> - </table> - </div> - </div> - </td> - </tr> - </tbody> -</table> -<p>Comparez les règles dans la feuille de style avec le tableau tel qu'il est affiché pour vous assurer que vous comprenez les effets de chaque règle. Si vous en trouvez une où ce n'est pas clair, mettez-la en commentaire et actualisez dans votre navigateur pour voir ce qui se produit.</p> -<p>Voici quelques notes à propos de ce tableau :</p> -<ul> - <li>La légende (caption) se trouve à l'extérieur de la bordure du tableau.</li> - <li>Si une taille minimale de police est définie dans les options, elle peut affecter l'exposant dans km<sup>2</sup>.</li> - <li>Trois cellules sont vides. Deux d'entre-elles laissent le fond du tableau visible. La troisème a un fond et une bordure supérieure.</li> - <li>Les deux points sont ajoutés par la feuille de style.</li> -</ul> -<p> </p> -<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; width: 100%;"> - <caption> - Challenges</caption> - <tbody> - <tr> - <td>Modifiez la feuille de style afin que le tableau ressemble à ceci : - <table style="border: 2px outset #36b; padding: 1em 6em 1em 1em; background-color: white;"> - <tbody> - <tr> - <td> - <div> - <div style="border: 1px solid #7a7; background-color: #efe;"> - <table style="font: 100% sens-serif; background-color: #efe; border-collapse: collapse; text-align: right; padding-right: .5em;"> - <tbody> - <tr style="text-align: center; color: blue;"> - <th> </th> - <th>Surface</th> - <th style="padding-left: .5em; padding-right: .5em;">Profondeur moyenne</th> - </tr> - <tr style="font-style: italic; color: gray;"> - <th> </th> - <th style="padding-left: .5em; padding-right: .5em;">millions de km<sup>2</sup></th> - <th style="padding-left: .5em; padding-right: .5em;">m</th> - </tr> - <tr> - <th style="padding-right: .5em;">Arctique :</th> - <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7;">13 000</td> - <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7; border-right: 0px;">1 200</td> - </tr> - <tr> - <th style="padding-right: .5em;">Atlantique :</th> - <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7;">87 000</td> - <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7; border-right: 0px;">3 900</td> - </tr> - <tr> - <th style="padding-right: .5em;">Pacifique :</th> - <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7;">180 000</td> - <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7; border-right: 0px;">4 000</td> - </tr> - <tr> - <th style="padding-right: .5em;">Indien :</th> - <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7;">75 000</td> - <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7; border-right: 0px;">3 900</td> - </tr> - <tr> - <th style="padding-left: .5em; padding-right: .5em;">Antarctique :</th> - <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7;">20 000</td> - <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7; border-right: 0px;">4 500</td> - </tr> - <tr> - <th style="padding-right: .5em; color: blue;">Total :</th> - <td style="background-color: #cee; padding: .5em .5em .5em 3em; border-top: .2em solid #7a7;">361 000</td> - <td style="background-color: #cee; padding: .5em .5em .5em 3em; border-top: .2em solid #7a7;"> </td> - </tr> - <tr> - <th style="padding-right: .5em; color: blue;">Moyenne :</th> - <td style="background-color: #cee; padding: .5em .5em .5em 3em;">72 000</td> - <td style="background-color: #cee; padding: .5em .5em .5em 3em;">3 800</td> - </tr> - </tbody> - </table> - </div> - <p style="font: italic 100% sans-serif; text-align: right; border-top: .4em solid #4ca; margin: 1em 0px 0px 0px;">Les océans</p> - </div> - </td> - </tr> - </tbody> - </table> - </td> - </tr> - </tbody> -</table> -<p> </p> -<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 href="/Talk:fr/CSS/Premiers_pas/Tableaux" title="Talk:fr/CSS/Premiers_pas/Tableaux">page de discussion</a>.</p> -<p>Ceci est la dernière page de ce tutoriel qui concerne les propriétés CSS et leurs valeurs. Pour un résumé complet des propriétés et valeurs, consultez <a class="external" href="http://www.w3.org/TR/CSS21/propidx.html">Full property table</a> dans la spécification CSS.</p> -<p>La page suivante revient sur le but et la structure des feuilles de style CSS : <strong><a href="/fr/docs/CSS/Premiers_pas/Médias" title="fr/CSS/Premiers_pas/Médias">Médias</a></strong>.</p> |