diff options
Diffstat (limited to 'files/fr/conflicting/learn/css/building_blocks')
6 files changed, 1444 insertions, 0 deletions
diff --git a/files/fr/conflicting/learn/css/building_blocks/cascade_and_inheritance/index.html b/files/fr/conflicting/learn/css/building_blocks/cascade_and_inheritance/index.html new file mode 100644 index 0000000000..d5c4ea0ea9 --- /dev/null +++ b/files/fr/conflicting/learn/css/building_blocks/cascade_and_inheritance/index.html @@ -0,0 +1,110 @@ +--- +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/conflicting/learn/css/building_blocks/index.html b/files/fr/conflicting/learn/css/building_blocks/index.html new file mode 100644 index 0000000000..fd147c876d --- /dev/null +++ b/files/fr/conflicting/learn/css/building_blocks/index.html @@ -0,0 +1,74 @@ +--- +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/conflicting/learn/css/building_blocks/selectors/index.html b/files/fr/conflicting/learn/css/building_blocks/selectors/index.html new file mode 100644 index 0000000000..d3ab8e9794 --- /dev/null +++ b/files/fr/conflicting/learn/css/building_blocks/selectors/index.html @@ -0,0 +1,137 @@ +--- +title: Les propriétés CSS et comment s'en servir +slug: Apprendre/CSS/Les_propriétés_CSS +tags: + - Beginner + - CSS + - CodingScripting + - NeedsActiveLearning +translation_of: Learn/CSS/Building_blocks/Selectors +translation_of_original: Learn/CSS/CSS_properties +--- +<div>{{IncludeSubnav("/fr/Apprendre")}}</div> +<div class="summary"> +<p>{{Glossary("CSS")}} définit l'apparence d'une page web. Il utilise des règles prédéfinies à l'aide de sélecteurs et de propriétés pour appliquer différents styles aux éléments et groupes d'éléments HTML.</p> +</div> + +<table class="learn-box nostripe standard-table"> + <tbody> + <tr> + <th scope="row">Prérequis :</th> + <td>Comprendre les bases de {{Glossary("HTML")}}, <a href="/fr/Apprendre/HTML/Balises_HTML">des éléments HTML</a>, et <a href="/fr/Apprendre/CSS/Utiliser_CSS_dans_une_page_web#La_balise_link">comment lier des documents HTML aux feuilles de style CSS</a>.</td> + </tr> + <tr> + <th scope="row">Objectif :</th> + <td>Connaître différents sélecteurs et propriétés CSS afin d'appliquer une mise en forme simple sur une page web.</td> + </tr> + </tbody> +</table> + +<p>Séparer le contenu de la mise en forme rend le développement web plus rapide et facile. En définissant la structure du document uniquement dans votre fichier HTML, tandis que les informations de mise en forme sont indiquées pour leur part dans un fichier séparé (appelé feuille de style), vous pouvez mettre à jour la mise en forme de nombreux documents en une seule fois (et en profiter pour économiser des ressources ordinateur en même temps).</p> + +<p>La syntaxe CSS fait appel à des mots-clés intuitifs et faciles à utiliser.</p> + +<pre class="brush: css">p { + font-family: "Times New Roman", georgia, sans-serif; + font-size: 24px; +}</pre> + +<p>Dans l'exemple précédent, <code>p</code> est un sélecteur qui applique un style à tous les éléments <code>{{HTMLElement("p")}}</code> en même temps. Les propriétés CSS <code>font-family</code> et <code>font-size</code> sont incluses dans des accolades et les valeurs correspondantes, juste après les deux-points, déterminent le style à appliquer.</p> + +<p>Il existe plus de <a href="/fr/docs/Web/CSS/Reference">250 propriétés</a> pour mettre en forme votre document. Du texte à la mise en page complexe, (presque) tout est possible.</p> + +<h2 id="Pédagogie_active">Pédagogie active</h2> + +<p><em>Il n'y a, pour le moment, pas d'apprentissage actif pour cette section. <a href="/fr/docs/MDN/D%C3%A9buter_sur_MDN">Vous pouvez néanmoins contribuer</a>.</em></p> + +<h2 id="Aller_plus_loin">Aller plus loin</h2> + +<p>Si les propriétés sont plutôt simples à utiliser, il en va parfois autrement des sélecteurs. Ne vous inquiétez pas, ce n'est pas si ardu et les maitriser permet de tirer parti du grand potentiel du CSS. Dans les exemples qui suivent, nous allons faire connaissance avec les sélecteurs les plus courants.</p> + +<p>Pour définir une règle CSS, on utilise des sélecteurs qu'on associe à des propriétés. Ces sélecteurs déterminent quels élements vont recevoir les propriétés précisées dans la règle. Notez que plusieurs règles peuvent s'appliquer à un même élément. La cascade CSS (dont on reparlera plus tard) définit alors quelle règle s'appliquera en cas de conflit. Pour l'instant, retenez simplement que la règle contenant les <a href="/fr/docs/Web/CSS/Spécificité">sélecteurs les plus précis</a> prend le dessus sur les règles avec les sélecteurs plus basiques.</p> + +<h3 id="Le_sélecteur_d'élément">Le sélecteur d'élément</h3> + +<p>Les sélecteurs d'éléments désignent des éléments HTML uniquement par leur nom. De plus, comme tous les sélecteurs CSS, vous pouvez appliquer un ensemble de propriétés communes à plusieurs élements à la fois.</p> + +<p>Pour notre premier exemple, intéressons nous au fragment de code HTML suivant :</p> + +<pre class="brush: html"><h1>Je suis un exemple.</h1> +<p>Dans cet exemple, je suis un paragraphe.</p> +<p>Et je suis un second paragraphe.</p> +</pre> + +<p>Dans la règle CSS qui suit, le sélecteur d'élement <code>p</code> applique les styles définis à tous les éléments <code>{{HTMLElement("p")}}</code> de notre document HTML simultanément, évitant ainsi d'inutiles répétitions. On utilise la propriété {{cssxref("font-family")}} (qui définit la police avec laquelle le texte apparait) et {{cssxref("font-size")}} (qui définit pour sa part la taille du texte).</p> + +<pre class="brush: css">p { + font-family: "Helvetica", Arial, sans-serif; + font-size : 12px; +}</pre> + +<p>La prochaine règle CSS s'applique uniquement à l'élément<code> {{HTMLElement("h1")}}</code>. On fait appel à la propriété {{cssxref("font-size")}} pour que la taille du titre soit deux fois plus grande que celle du texte et à la propriété {{cssxref("font-weight")}} pour qu'il soit également en gras.</p> + +<pre class="brush: css">h1 { + font-size : 24px; + font-weight: bold; +}</pre> + +<p>La règle CSS suivante applique les styles demandés à la fois aux éléments <code>{{HTMLElement("h1")}}</code> et aux éléments <code>{{HTMLElement("p")}}</code>, cela permet potentiellement d'éviter des redondances inutiles dans le code. Cette façon de procéder est appelée « groupe de sélecteurs » ou « chaîne de sélecteurs ». Notez qu'un point virgule est nécessaire pour séparer les sélecteurs. Ici nous utilisons la propriété {{cssxref("color")}} pour appliquer la même couleur au texte des <code>h1</code> et à celui des paragraphes.</p> + +<pre class="brush: css">h1, p { + color: darkmagenta; +}</pre> + +<p>Voici le résultat obtenu avec ce code :</p> + +<p>{{EmbedLiveSample('Le_sélecteur_d\'élément')}}</p> + +<h3 id="Le_sélecteur_id">Le sélecteur <code>id</code></h3> + +<p>L'attribut <code>id</code><strong> </strong>d'un élément HTML donné permet d'identifier de façon unique cet élément. Par conséquent, un sélecteur <code>id</code> est utilisé uniquement lorsqu'un ensemble de règles de style s'applique à un seul élement.</p> + +<p>Pour notre prochain exemple, prenons le fragment de code HTML suivant :</p> + +<pre class="brush: html"><p id="coucou">Coucou monde !</p> </pre> + +<p>La règle CSS suivante s'applique exclusivement à cet élément, identifié et unique. Pour transformer un sélecteur ordinaire en sélecteur <code>id</code>, il suffit de placer un signe dièse (#) devant le nom de l'identifiant (<em>id</em>). Nous faisons appel à trois propriétés : {{cssxref("text-align")}} pour centrer le texte dans le paragraphe, {{cssxref("border")}} pour encadrer le paragraphe d'un cadre fin, et {{cssxref("padding")}} afin d'ajouter une marge intérieure supplémentaire entre le texte et le cadre.</p> + +<pre class="brush: css">#coucou { + text-align: center; + border : 1px solid black; + padding : 8px; +}</pre> + +<p>Voici le résultat final obtenu:</p> + +<p>{{EmbedLiveSample('Le_sélecteur_id')}}</p> + +<h3 id="Le_sélecteur_class">Le sélecteur <code>class</code></h3> + +<p>À l'intérieur du code HTML, l'attribut <code>class</code><strong> </strong>permet de donner des identifiants multiples aux élements HTML. Ces identifiants peuvent ainsi être combinés avec le CSS pour regrouper des élements en fonction de leur nom.</p> + +<p>Pour notre prochain exemple, analysez le fragment de code HTML suivant :</p> + +<pre class="brush: html"><h1 class="coucou">Coucou !</h1> +<p class="coucou salut">Retrouvons-nous !</p> +<p class="salut">Et déplaçons des montagnes.</p> +</pre> + +<p>Nous allons appliquer une règle CSS à tous les éléments contenant la classe <code>coucou</code>. Pour transformer un sélecteur en sélecteur class, placez simplement un point devant le nom de la classe (de la même manière que nous avions mis un signe dièse dans le cas précédent). Nous utilisons ici la propriété {{cssxref("font-style")}} pour mettre le texte en italique.</p> + +<pre class="brush: css">.coucou { + font-style: italic; +}</pre> + +<p>En voici une autre pour tous les éléments avec la classe <code>salut</code>. Ici, nous utilisons la propriété {{cssxref("text-decoration")}} pour barrer le texte d'une ligne.</p> + +<pre class="brush: css">.salut { + text-decoration: line-through; +}</pre> + +<p>Voici le résultat obtenu :</p> + +<p>{{EmbedLiveSample('Le_sélecteur_class')}}</p> + +<h2 id="Prochaines_étapes">Prochaines étapes</h2> + +<p>Nous venons de voir les bases pour commencer en CSS. Vous pouvez maintenant en <a href="/fr/Apprendre/CSS/formatage_texte_CSS">apprendre davantage sur le formatage du texte</a> ou commencer à explorer <a href="/fr/docs/Web/CSS/Tutorials">nos tutoriels CSS</a> dès maintenant.</p> diff --git a/files/fr/conflicting/learn/css/building_blocks/selectors_9bc80fea302c91cd60fb72c4e83c83e9/index.html b/files/fr/conflicting/learn/css/building_blocks/selectors_9bc80fea302c91cd60fb72c4e83c83e9/index.html new file mode 100644 index 0000000000..9371d826b3 --- /dev/null +++ b/files/fr/conflicting/learn/css/building_blocks/selectors_9bc80fea302c91cd60fb72c4e83c83e9/index.html @@ -0,0 +1,207 @@ +--- +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/conflicting/learn/css/building_blocks/styling_tables/index.html b/files/fr/conflicting/learn/css/building_blocks/styling_tables/index.html new file mode 100644 index 0000000000..9fcc9dbd2d --- /dev/null +++ b/files/fr/conflicting/learn/css/building_blocks/styling_tables/index.html @@ -0,0 +1,602 @@ +--- +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> diff --git a/files/fr/conflicting/learn/css/building_blocks/values_and_units/index.html b/files/fr/conflicting/learn/css/building_blocks/values_and_units/index.html new file mode 100644 index 0000000000..24952f7505 --- /dev/null +++ b/files/fr/conflicting/learn/css/building_blocks/values_and_units/index.html @@ -0,0 +1,314 @@ +--- +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> |