diff options
Diffstat (limited to 'files/fr/learn/css/howto')
| -rw-r--r-- | files/fr/learn/css/howto/create_fancy_boxes/index.html | 38 | ||||
| -rw-r--r-- | files/fr/learn/css/howto/generated_content/index.html | 205 | ||||
| -rw-r--r-- | files/fr/learn/css/howto/index.html | 75 |
3 files changed, 103 insertions, 215 deletions
diff --git a/files/fr/learn/css/howto/create_fancy_boxes/index.html b/files/fr/learn/css/howto/create_fancy_boxes/index.html index dd242c62a3..31db5f3ac9 100644 --- a/files/fr/learn/css/howto/create_fancy_boxes/index.html +++ b/files/fr/learn/css/howto/create_fancy_boxes/index.html @@ -1,16 +1,12 @@ --- title: Créer de belles boîtes slug: Learn/CSS/Howto/create_fancy_boxes -tags: - - Apprendre - - CSS - - Débutant translation_of: Learn/CSS/Howto/create_fancy_boxes original_slug: Apprendre/CSS/Comment/Créer_de_belles_boîtes --- -<p class="summary">Les boîtes CSS sont des blocs de base pour la construction des pages web. Créer des boîtes agréables à regarder est un défi complexe et intéressant. C'est un défi intéressant parce qu'on peut implémenter une idée de concept, de design, grâce à du code qui fonctionne. C'est un défi complexe car CSS possède à la fois plein de contraintes et de libertés. Dans cet article, nous allons voir de quoi il en retourne en dessinant quelques belles boîtes.</p> +<p>Les boîtes CSS sont des blocs de base pour la construction des pages web. Créer des boîtes agréables à regarder est un défi complexe et intéressant. C'est un défi intéressant parce qu'on peut implémenter une idée de concept, de design, grâce à du code qui fonctionne. C'est un défi complexe car CSS possède à la fois plein de contraintes et de libertés. Dans cet article, nous allons voir de quoi il en retourne en dessinant quelques belles boîtes.</p> -<p>Avant d'attaquer la partie pratique, nous vous recommandons de lire <a href="/fr/Apprendre/CSS/Les_bases/Le_modèle_de_boîte">l'article qui explique le fonctionnement du modèle de boîte CSS</a>. Bien que ce ne soit pas strictement nécessaire, il peut également être judicieux que de lire <a href="/fr/Apprendre/CSS/Les_bases/La_disposition">les bases de la disposition en CSS</a>.</p> +<p>Avant d'attaquer la partie pratique, nous vous recommandons de lire <a href="/fr/docs/Learn/CSS/Building_blocks/The_box_model">l'article qui explique le fonctionnement du modèle de boîte CSS</a>. Bien que ce ne soit pas strictement nécessaire, il peut également être judicieux que de lire <a href="/fr/docs/conflicting/Learn/CSS/CSS_layout/Introduction">les bases de la disposition en CSS</a>.</p> <p>D'un point de vue technique, créer de belles boîtes devient beaucoup plus simple quand on connaît les propriétés de bordure (<code>border-*</code>) et d'arrière-plan (<code>background-*</code>) et les règles qui permettent de les appliquer sur une boîte donnée. Mais au delà de cet aspect technique, il s'agit aussi de laisser libre cours à votre créativité. Cela ne se fera pas en un jour et certains développeurs web passent beaucoup temps sur ces sujets.</p> @@ -35,9 +31,7 @@ original_slug: Apprendre/CSS/Comment/Créer_de_belles_boîtes <h3 id="Créer_des_cercles">Créer des cercles</h3> -<div class="hidden"> -<pre class="brush: html"><div class="joli">Coucou ! Je veux être joli.</div></pre> -</div> +<pre class="brush: html hidden"><div class="joli">Coucou ! Je veux être joli.</div></pre> <p>Voici un exemple à la fois simple et sympa. La propriété {{cssxref("border-radius")}} est utilisée pour arrondir les angles d'une boîte. Que se passe-t-il lorsque la taille du rayon pour l'arrondi est en fait supérieure ou égale à la taille de la boîte ?</p> @@ -75,18 +69,16 @@ original_slug: Apprendre/CSS/Comment/Créer_de_belles_boîtes <h2 id="Les_arrière-plans">Les arrière-plans</h2> -<p>Lorsqu'on parle de boîtes plutôt jolies, les propriétés primordiales sont <a href="/fr/docs/Web/CSS/CSS_Background_and_Borders">les propriétés <code>background-*</code></a>. Quand on manipule ces propriétés, on peut alors voir la boîte CSS comme une toile blanche qu'on pourrait peindre.</p> +<p>Lorsqu'on parle de boîtes plutôt jolies, les propriétés primordiales sont <a href="/fr/docs/conflicting/Web/CSS/CSS_Backgrounds_and_Borders">les propriétés <code>background-*</code></a>. Quand on manipule ces propriétés, on peut alors voir la boîte CSS comme une toile blanche qu'on pourrait peindre.</p> <p>Avant d'aborder des exemples pratiques, revenons sur deux choses à savoir sur les arrière-plans :</p> <ul> - <li>On peut définir <a href="/en-US/docs/Web/CSS/CSS_Background_and_Borders/Using_CSS_multiple_backgrounds">plusieurs arrière-plans</a> pour une boîte. Ceux-ci s'empileront les uns sur les autres comme des couches.</li> + <li>On peut définir <a href="/fr/docs/Web/CSS/CSS_Background_and_Borders/Using_CSS_multiple_backgrounds">plusieurs arrière-plans</a> pour une boîte. Ceux-ci s'empileront les uns sur les autres comme des couches.</li> <li>Les arrière-plans peuvent être des couleurs unies ou des images. Les couleurs remplissent toute la surface mais les images peuvent être mises à l'échelle et positionnées sur la boîte.</li> </ul> -<div class="hidden"> -<pre class="brush: html"><div class="joli">Coucou ! Je veux être joli.</div></pre> -</div> +<pre class="brush: html hidden"><div class="joli">Coucou ! Je veux être joli.</div></pre> <p>Passons à la manipulation :</p> @@ -123,18 +115,16 @@ original_slug: Apprendre/CSS/Comment/Créer_de_belles_boîtes <p>{{EmbedLiveSample('Les_arrière-plans', '100%', '200')}}</p> <div class="note"> -<p><strong>Note :</strong> Les gradients peuvent être utilisés pour créer une myriade d'effets. Vous pouvez par exemple consulter <a href="http://lea.verou.me/css3patterns/">les excellents motifs CSS de Lea Verou</a>. Attention cependant, en termes de performance, les gradients peuvent avoir un impact non négligeable. Si vous souhaitez explorer les gradients, n'hésitez pas à lire <a href="/fr/docs/Web/CSS/Utilisation_de_dégradés_CSS">notre article dédié</a>.</p> +<p><strong>Note :</strong> Les gradients peuvent être utilisés pour créer une myriade d'effets. Vous pouvez par exemple consulter <a href="https://lea.verou.me/css3patterns/">les excellents motifs CSS de Lea Verou</a>. Attention cependant, en termes de performance, les gradients peuvent avoir un impact non négligeable. Si vous souhaitez explorer les gradients, n'hésitez pas à lire <a href="/fr/docs/Web/CSS/CSS_Images/Using_CSS_gradients">notre article dédié</a>.</p> </div> <h2 id="Les_pseudo-éléments">Les pseudo-éléments</h2> -<p>Lorsqu'on met en forme une boîte, on aurait parfois envie d'avoir plus de boîtes pour composer une mise en forme plus complexe et plus belle. La plupart du temps, cela peut nous amener à polluer le DOM en ajoutant des éléments HTML supplémentaires, uniquement pour la mise en forme. Bien que ce soit parfois nécessaire, c'est considéré comme une mauvaise pratique. Pour éviter cela, on peut utiliser <a href="/en-US/docs/Web/CSS/Pseudo-elements">les pseudo-éléments CSS</a>.</p> +<p>Lorsqu'on met en forme une boîte, on aurait parfois envie d'avoir plus de boîtes pour composer une mise en forme plus complexe et plus belle. La plupart du temps, cela peut nous amener à polluer le DOM en ajoutant des éléments HTML supplémentaires, uniquement pour la mise en forme. Bien que ce soit parfois nécessaire, c'est considéré comme une mauvaise pratique. Pour éviter cela, on peut utiliser <a href="/fr/docs/Web/CSS/Pseudo-elements">les pseudo-éléments CSS</a>.</p> <h3 id="Un_nuage">Un nuage</h3> -<div class="hidden"> -<pre class="brush: html"><div class="joli">Coucou ! Je veux être joli.</div></pre> -</div> +<pre class="brush: html hidden"><div class="joli">Coucou ! Je veux être joli.</div></pre> <p>Voici un exemple qui illustre comment transformer la boîte en nuage :</p> @@ -275,13 +265,11 @@ blockquote i { <p>{{EmbedLiveSample('Une_citation', '100%', '300')}}</p> -<h2 id="L'assemblage">L'assemblage</h2> +<h2 id="Assemblage">Assemblage</h2> <p>En fusionnant tout ces aspects, il est possible de créer des effets somptueux. Au fur et à mesure, cela s'équilibrera entre un défi technique et un défi créatif. Pour conclure, par exemple, on peut créer des illusions d'optique :</p> -<div class="hidden"> -<pre class="brush: html"><div class="joli">Coucou ! Je veux être joli.</div></pre> -</div> +<pre class="brush: html hidden"><div class="joli">Coucou ! Je veux être joli.</div></pre> <p>Nous allons ici créer un effet d'ombre portée. La propriété {{cssxref("box-shadow")}} permet d'obtenir un effet basique mais en manipulant les pseudo-éléments et la propriété {{cssxref("transform")}}, on peut obtenir un résultat plus naturel.</p> @@ -308,8 +296,8 @@ blockquote i { transform: rotate(4deg); }</pre> -<p>{{EmbedLiveSample("L'assemblage", '100%', '100')}}</p> +<p>{{EmbedLiveSample("Assemblage", '100%', '100')}}</p> <h2 id="La_suite">La suite</h2> -<p>Pour de nombreux cas, on utilisera des couleurs et des images d'arrière-plans pour composer de belles boîtes. Nous vous invitons donc <a href="/fr/Apprendre/CSS/Comment/Gérer_les_couleurs_et_les_images">à approfondir la gestion des couleurs et des images</a>. Par ailleurs, rien ne sert de créer de belles boîtes si celles-ci ne font pas partie d'une disposition bien organisée. Aussi, si vous ne l'avez pas encore lu, nous vous conseillons de parcourir <a href="/fr/Apprendre/CSS/Les_bases/La_disposition">les bases de la disposition</a>.</p> +<p>Pour de nombreux cas, on utilisera des couleurs et des images d'arrière-plans pour composer de belles boîtes. Nous vous invitons donc <a href="/fr/docs/Apprendre/CSS/Comment/Gérer_les_couleurs_et_les_images">à approfondir la gestion des couleurs et des images</a>. Par ailleurs, rien ne sert de créer de belles boîtes si celles-ci ne font pas partie d'une disposition bien organisée. Aussi, si vous ne l'avez pas encore lu, nous vous conseillons de parcourir <a href="/fr/docs/conflicting/Learn/CSS/CSS_layout/Introduction">les bases de la disposition</a>.</p> diff --git a/files/fr/learn/css/howto/generated_content/index.html b/files/fr/learn/css/howto/generated_content/index.html index cd56e36305..aa8656013b 100644 --- a/files/fr/learn/css/howto/generated_content/index.html +++ b/files/fr/learn/css/howto/generated_content/index.html @@ -7,154 +7,61 @@ tags: translation_of: Learn/CSS/Howto/Generated_content original_slug: Apprendre/CSS/Comment/Generated_content --- -<p> </p> -<p>Cette page décrit plusieurs manières d'utiliser CSS pour ajouter du contenu à un document affiché.</p> -<p>Vous modifierez votre feuille de style pour ajouter du contenu textuel et une image.</p> -<h3 id="Information_:_contenu" name="Information_:_contenu">Information : contenu</h3> -<p>Un des avantages importants de CSS est qu'il vous aide à séparer le style d'un document de son contenu. Cependant, il existe des situations où il n'est pas insensé de spécifier une partie du contenu au sein de la feuille de style plutôt qu'en tant que partie du document</p> -<p>Le contenu spécifié dans une feuille de style peut consister en du texte ou des images. Ce contenu peut être spécifié dans une feuille de style lorsqu'il est directement lié à la structure du document.</p> -<table style="border: 1px solid #36b; padding: 1em; background-color: #f4f4f4; margin-bottom: 1em;"> - <caption> - Plus de détails</caption> - <tbody> - <tr> - <td>Spécifier du contenu dans une feuille de style peut engendrer des complications. Par exemple, vous pouvez avoir des versions de votre document en différentes langues qui partagent la même feuille de style. Si une partie de la feuille de style doit être traduite, cela signifie que vous devez placer cette partie dans des fichiers séparés et vous arranger pour qu'elles soient liées avec les bonnes versions de langue de votre document. - <p>Ces complications ne surviendront pas si le contenu spécifié consiste en une série de symboles ou d'images compréhensibles dans toutes les langues et cultures.</p> - <p>Le contenu spécifié dans une feuille de style ne fait pas partie du DOM.</p> - </td> - </tr> - </tbody> -</table> -<h4 id="Contenu_textuel" name="Contenu_textuel">Contenu textuel</h4> -<p>CSS peut insérer du texte avant ou après un élément. Pour spécifier cela, créez une règle et ajoutez <code>:before</code> ou <code>:after</code> au sélecteur. Dans la déclaration, spécifiez la propriété <code>content</code> en lui donnant comme valeur le contenu textuel.</p> -<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;"> - <caption> - Exemple</caption> - <tbody> - <tr> - <td>Cette règle ajoute le texte <span style="font-weight: bold; color: navy;">Référence :</span> devant chaque élément de la classe <code>ref</code> : - <div style="width: 30em;"> - <pre class="eval"> -.ref:before { +<p>{{LearnSidebar}}</p> + +<p>Cet article décrit différentes façons d'utiliser CSS afin d'ajouter du contenu à un document affiché. Vous pouvez modifier votre feuille de style afin d'ajouter du contenu textuel ou des images.</p> + +<p>L'un des avantages majeurs de CSS est qu'il permet de séparer la forme du contenu. Toutefois, il existe des situations où il est pertinent d'indiquer du contenu dans la feuille de style et pas dans le document. Il est possible d'indiquer du contenu textuel ou des images dans une feuille de style lorsque ce contenu est fortement couplé à la structure du document.</p> + +<div class="note"> +<p><strong>Note :</strong> Le contenu spécifié dans la feuille de style ne fait pas partie du DOM.</p> +</div> + +<p>Ajouter du contenu dans une feuille de style peut engendrer des complications. Ainsi, si vous avez un document disponible en plusieurs langues et que ces versions partagent une même feuille de style, lorsque vous indiquez du contenu dans la feuille de style qui doit être traduit, vous devrez organiser ces parties de la feuille de style dans différents fichiers et faire le nécessaire pour qu'elles soient rattachées aux différentes versions du document.</p> + +<p>Ce problème ne se pose pas si le contenu indiqué est composé de symboles ou d'images qui peuvent s'appliquer dans toutes les langues et pour toutes les cultures.</p> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="Contenu_textuel">Contenu textuel</h3> + +<p>CSS peut insérer du contenu textuel avant ou après un élément. Pour cela, on créera une règle en ajoutant {{ cssxref("::before") }} ou {{ cssxref("::after") }} au sélecteur. Dans la déclaration, on utilisera la propriété {{ cssxref("content") }} avec comme valeur le texte à utiliser.</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html">Un texte où j'en ai besoin de <span class="ref"> quelque chose</span> +</pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css">.ref::before { font-weight: bold; color: navy; - content: "Référence : "; - } -</pre> - </div> - </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>Le jeu de caractères d'une feuille de style est UTF-8 par défaut, mais il peut être spécifié dans le lien, ou dans la feuille de style elle-même, ou d'une autre manière. Pour plus de détails, consultez <a class="external" href="http://www.w3.org/TR/CSS21/syndata.html#q23">4.4 CSS style sheet representation</a> dans la spécification CSS. - <p>Des caractères individuels peuvent également être spécifiés à l'aide d'un mécanisme utilisant le backslash (barre oblique inversée) comme caractère d'échappement. Par exemple, \265B est le symbole du jeu d'échecs pour la reine noire ♛. Pour plus de détails, consultez <a class="external" href="http://www.w3.org/TR/CSS21/syndata.html#q24">Referring to characters not represented in a character encoding</a>, ainsi que <a class="external" href="http://www.w3.org/TR/CSS21/syndata.html#q6">Characters and case</a> dans la spécification CSS.</p> - </td> - </tr> - </tbody> -</table> -<h4 id="Contenu_sous_forme_d.27images" name="Contenu_sous_forme_d.27images">Contenu sous forme d'images</h4> -<p>Pour ajouter une image avant ou après un élément, vous pouvez spécifier l'URL d'un fichier image dans la valeur de la propriété <code>content</code>.</p> -<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;"> - <caption> - Exemple</caption> - <tbody> - <tr> - <td>Cette règle ajoute un espace et une icône après chaque lien faisant partie de la classe <code>glossaire</code>: - <div style="width: 45em;"> - <pre class="eval"> -a.glossaire:after {content: " " url("../images/glossary-icon.gif");} -</pre> - </div> - </td> - </tr> - </tbody> -</table> -<p><br> - Pour ajouter une image comme fond d'un élément, spécifiez l'URL d'un fichier image dans la valeur de la propriété <code>background</code>. C'est une propriété raccourcie qui spécifie la couleur de fond, l'image, son éventuelle répétition, et certains autres détails.</p> -<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;"> - <caption> - Exemple</caption> - <tbody> - <tr> - <td>Cette règle change le fond d'un élément spécifique, en utilisant une URL pour indiquer un fichier image. - <p>Le sélecteur spécifie l'id de l'élément. La valeur <code>no-repeat</code> fait que l'image apparaîtra une seule fois :</p> - <div style="width: 50em;"> - <pre class="eval"> -#panneau-lateral {background: url("../images/sidebar-ground.png") no-repeat;} -</pre> - </div> - </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 plus d'informations sur les propriétés affectant les fonds, et d'autres options qui peuvent être spécifiées pour les images de fond, consultez <a class="external" href="http://www.w3.org/TR/CSS21/colors.html#q2">The background</a> dans la spécification CSS.</td> - </tr> - </tbody> -</table> -<h3 id="Action_:_ajout_d.27une_image_de_fond" name="Action_:_ajout_d.27une_image_de_fond">Action : ajout d'une image de fond</h3> -<p>Cette image est un carré blanc avec une ligne bleue en bas. Téléchargez le fichier image dans le même répertoire que votre fichier CSS :</p> -<table style="border: 2px solid #ccc;"> - <tbody> - <tr> - <td><img alt="Image:ligne-bleue.png" class="internal" src="/@api/deki/files/1398/=Ligne-bleue.png"></td> - </tr> - </tbody> -</table> -<p>(Par exemple, cliquez avec le bouton de droite pour obtenir un menu contextuel, choisissez Enregistrer l'image sous... et choisissez le répertoire que vous utilisez pour ce tutoriel.)</p> -<p>Éditez votre fichier CSS et ajoutez cette règle à l'élément body, pour donner une image de fond à la page entière.</p> -<div style="width: 40em;"> - <pre class="eval">background: url("ligne-bleue.png"); -</pre> -</div> -<p>La valeur <code>repeat</code> est celle par défaut, elle n'a dont pas besoin d'être spécifiée. L'image se répète horizontalement et verticalement, ce qui donne un aspect ressemblant à un papier ligné :</p> -<div style="position: relative; width: 24em; height: 11em; border: 2px outset #36b; overflow: hidden;"> - <p style="margin: 0px;"><img alt="Image:fond-lignes-bleues.png" class="internal" src="/@api/deki/files/1373/=Fond-lignes-bleues.png"></p> - <div style="position: absolute; top: 0px; left: 0px; border: none; margin: 0px; padding: .5em 0px 0px 1em; font: 16px 'Comic Sams MS', cursive; color: blue; background-color: transparent;"> - <div style="font-style: italic; width: 24em;"> - <p><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</p> - </div> - <div style="font-style: normal; padding-top: 2px; height: 8em;"> - <p><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</p> - </div> - </div> -</div> -<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;"> - <caption> - Challenge</caption> - <tbody> - <tr> - <td>Téléchargez cette image : - <table style="border: 2px solid #ccc;"> - <tbody> - <tr> - <td><img alt="Image:punaise-jaune.png" class="internal" src="/@api/deki/files/1427/=Punaise-jaune.png"></td> - </tr> - </tbody> - </table> - <p>Ajoutez une règle à votre feuille de style de manière à ce que l'image soit affichée au début de chaque ligne :</p> - <div style="position: relative; width: 24em; height: 11em; border: 2px outset #36b; overflow: hidden;"> - <p style="margin: 0px;"><img alt="Image:fond-lignes-bleues.png" class="internal" src="/@api/deki/files/1373/=Fond-lignes-bleues.png"></p> - <div style="position: absolute; top: 0px; left: 0px; border: none; margin: 0px; padding: .5em 0px 0px 1em; font: 16px 'Comic Sams MS', cursive; color: blue; background-color: transparent;"> - <div style="font-style: italic; width: 24em; padding-top: 8px;"> - <img alt="image:punaise-jaune.png" class="internal" src="/@api/deki/files/1427/=Punaise-jaune.png"> <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</div> - <div style="font-style: normal; padding-top: 12px; height: 8em;"> - <img alt="image:punaise-jaune.png" class="internal" src="/@api/deki/files/1427/=Punaise-jaune.png"> <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</div> - </div> - </div> - </td> - </tr> - </tbody> -</table> -<h4 id="Pour_continuer" name="Pour_continuer">Pour continuer</h4> -<p>Une façon courante d'ajouter du contenu via une feuile de style est de marquer les différents éléments d'une liste.</p> -<p>La page suivante décrit la manière de spécifier un style pour les éléments d'une liste : <strong><a href="/fr/docs/CSS/Premiers_pas/Listes" title="fr/CSS/Premiers_pas/Listes">Listes.</a></strong></p> + content: "Réference "; +}</pre> + +<h4 id="Résultat">Résultat</h4> + +<p>{{ EmbedLiveSample('Contenu_textuel', 600, 30) }}</p> + +<p>L'encodage d'une feuille de styles est UTF-8 par défaut mais cela peut être défini dans le lien, dans la feuille de style même ou d'autres façons. Pour plus de détails, voir <a href="https://www.w3.org/TR/CSS21/syndata.html#q23">4.4 Représentation de la feuille de style CSS</a> dans la spécification CSS.</p> + +<p>Des caractères individuels peuvent également être spécifiés avec un échappement avec la barre oblique inversée. Ainsi, "\265B" pourra être utilisé pour générer le symbole de la reine noire aux échecs : ♛. Pour plus de détails, voir <a href="https://www.w3.org/TR/CSS21/syndata.html#q24">Référencer des caractères non représentés par l'encodage</a> et <a href="https://www.w3.org/TR/CSS21/syndata.html#q6">Caractères et casse</a> dans la spécification CSS.</p> + +<h3 id="Contenu_avec_une_image">Contenu_avec_une_image</h3> + +<p>Afin d'ajouter une image avant ou après un élément, vous pouvez indiquer l'URL d'un fichier image dans la valeur de la propriété {{ cssxref("content") }}.</p> + +<p>Cette règle ajoute un espace et une icône après chaque lien qui possède la classe <code>glossary</code> :</p> + +<h4 id="HTML_2">HTML</h4> + +<pre class="brush: html"><a href="developer.mozilla.org" class="glossary">developer.mozilla.org</a></pre> + +<h4 id="CSS_2">CSS</h4> + +<pre class="brush: css">a.glossary::after { + content: " " url("glossary-icon.gif"); +}</pre> + +<p>{{ EmbedLiveSample('Contenu_avec_une_image', 600, 40) }}</p> diff --git a/files/fr/learn/css/howto/index.html b/files/fr/learn/css/howto/index.html index aabbb12aa7..d14cb33a16 100644 --- a/files/fr/learn/css/howto/index.html +++ b/files/fr/learn/css/howto/index.html @@ -8,57 +8,50 @@ tags: translation_of: Learn/CSS/Howto original_slug: Apprendre/CSS/Comment --- -<p> </p> - -<p class="summary">Les liens suivants pointent vers des solutions aux problèmes courants que vous devrez résoudre avec CSS.</p> +<p>Les liens suivants pointent vers des solutions aux problèmes courants que vous devrez résoudre avec CSS.</p> <h2 id="Scénarios_fréquents">Scénarios fréquents</h2> -<div class="column-container"> -<div class="column-half"> -<h3 id="Basess">Basess</h3> +<h3 id="Basess">Bases</h3> <ul> - <li><a href="https://developer.mozilla.org/fr/Apprendre/CSS/Introduction_%C3%A0_CSS/Le_fonctionnement_de_CSS#How_to_apply_your_CSS_to_your_HTML">Comment appliquer CSS au HTML</a></li> - <li><a href="https://developer.mozilla.org/fr/Apprendre/CSS/Introduction_à_CSS/La_syntaxe#Les_blancs">Comment utiliser les espaces en CSS</a></li> - <li><a href="https://developer.mozilla.org/fr/Apprendre/CSS/Introduction_à_CSS/La_syntaxe#Les_commentaires">Comment écrire des commentaires en CSS</a></li> - <li><a href="https://developer.mozilla.org/fr/Apprendre/CSS/Introduction_%C3%A0_CSS/Les_s%C3%A9lecteurs#Les_s%C3%A9lecteurs_simples">Comment sélectionner des éléments par leur nom, leur classe ou leur ID</a></li> - <li><a href="https://developer.mozilla.org/fr/Apprendre/CSS/Introduction_à_CSS/Les_sélecteurs#Les_sélecteurs_d'attribut">Comment sélectionner des éléments par le nom et le contenu de l'attribut</a></li> - <li><a href="https://developer.mozilla.org/fr/Apprendre/CSS/Introduction_%C3%A0_CSS/Les_s%C3%A9lecteurs#Les_pseudo-classes">Comment utiliser les pseudo-classes</a></li> - <li><a href="https://developer.mozilla.org/fr/Apprendre/CSS/Introduction_%C3%A0_CSS/Les_s%C3%A9lecteurs#Les_pseudo-%C3%A9l%C3%A9ments">Comment utiliser les pseudo-éléments</a></li> - <li><a href="https://developer.mozilla.org/fr/Apprendre/CSS/Introduction_%C3%A0_CSS/Les_s%C3%A9lecteurs#Les_combinateurs">Comment appliquer plusieurs sélecteurs à la même règle</a></li> - <li><a href="https://developer.mozilla.org/fr/Apprendre/CSS/Introduction_%C3%A0_CSS/Values_and_units#Couleurs">Comment spécifier les couleurs en CSS</a></li> - <li><a href="https://developer.mozilla.org/fr/docs/Learn/CSS/Introduction_to_CSS/Debugging_CSS#Inspecting_the_DOM_and_CSS">Comment déboguer CSS dans le navigateur</a></li> + <li><a href="/fr/Apprendre/CSS/Introduction_%C3%A0_CSS/Le_fonctionnement_de_CSS#How_to_apply_your_CSS_to_your_HTML">Comment appliquer CSS au HTML</a></li> + <li><a href="/fr/Apprendre/CSS/Introduction_à_CSS/La_syntaxe#Les_blancs">Comment utiliser les espaces en CSS</a></li> + <li><a href="/fr/Apprendre/CSS/Introduction_à_CSS/La_syntaxe#Les_commentaires">Comment écrire des commentaires en CSS</a></li> + <li><a href="/fr/Apprendre/CSS/Introduction_%C3%A0_CSS/Les_s%C3%A9lecteurs#Les_s%C3%A9lecteurs_simples">Comment sélectionner des éléments par leur nom, leur classe ou leur ID</a></li> + <li><a href="/fr/Apprendre/CSS/Introduction_à_CSS/Les_sélecteurs#Les_sélecteurs_d'attribut">Comment sélectionner des éléments par le nom et le contenu de l'attribut</a></li> + <li><a href="/fr/Apprendre/CSS/Introduction_%C3%A0_CSS/Les_s%C3%A9lecteurs#Les_pseudo-classes">Comment utiliser les pseudo-classes</a></li> + <li><a href="/fr/Apprendre/CSS/Introduction_%C3%A0_CSS/Les_s%C3%A9lecteurs#Les_pseudo-%C3%A9l%C3%A9ments">Comment utiliser les pseudo-éléments</a></li> + <li><a href="/fr/Apprendre/CSS/Introduction_%C3%A0_CSS/Les_s%C3%A9lecteurs#Les_combinateurs">Comment appliquer plusieurs sélecteurs à la même règle</a></li> + <li><a href="/fr/Apprendre/CSS/Introduction_%C3%A0_CSS/Values_and_units#Couleurs">Comment spécifier les couleurs en CSS</a></li> + <li><a href="/fr/docs/Learn/CSS/Introduction_to_CSS/Debugging_CSS#Inspecting_the_DOM_and_CSS">Comment déboguer CSS dans le navigateur</a></li> </ul> <h3 id="CSS_et_texte">CSS et texte</h3> <ul> - <li><a href="https://developer.mozilla.org/fr/docs/Learn/CSS/Styling_text/initiation-mise-en-forme-du-texte">Comment donner un style au texte</a></li> - <li><a href="https://developer.mozilla.org/fr/docs/Learn/CSS/Styling_text/Styling_lists">Comment personnaliser une liste d'éléments</a></li> - <li><a href="https://developer.mozilla.org/fr/docs/Learn/CSS/Styling_text/Styling_links">Comment donner un style aux liens</a></li> - <li><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Styling_text/Fundamentals#Ombres_du_texte">Comment ajouter des ombres au texte</a></li> + <li><a href="/fr/docs/Learn/CSS/Styling_text/initiation-mise-en-forme-du-texte">Comment donner un style au texte</a></li> + <li><a href="/fr/docs/Learn/CSS/Styling_text/Styling_lists">Comment personnaliser une liste d'éléments</a></li> + <li><a href="/fr/docs/Learn/CSS/Styling_text/Styling_links">Comment donner un style aux liens</a></li> + <li><a href="/fr/docs/Learn/CSS/Styling_text/Fundamentals#Ombres_du_texte">Comment ajouter des ombres au texte</a></li> </ul> -</div> -<div class="column-half"> + <h3 id="Boîtes_et_mises_en_page">Boîtes et mises en page</h3> <ul> - <li><a href="https://developer.mozilla.org/en-US/Learn/CSS/Introduction_to_CSS/Box_model#Box_properties">Comment tailler les boîtes CSS</a></li> - <li><a href="https://developer.mozilla.org/fr/Apprendre/CSS/Introduction_%C3%A0_CSS/Le_mod%C3%A8le_de_bo%C3%AEte#Les_d%C3%A9passements">Comment contrôler le contenu débordant</a></li> - <li><a href="https://developer.mozilla.org/fr/Apprendre/CSS/Introduction_%C3%A0_CSS/Le_mod%C3%A8le_de_bo%C3%AEte#L%27arri%C3%A8re-plan">Comment contrôler la partie des boîtes CSS dessinées au-dessus de l'arrière-plan</a></li> - <li><a href="https://developer.mozilla.org/fr/Apprendre/CSS/Introduction_%C3%A0_CSS/Le_mod%C3%A8le_de_bo%C3%AEte#Les_types_de_bo%C3%AEte">Comment définir <em>"inline</em>", <em>"block"</em> et <em>"inline-block"</em> ?</a></li> - <li><a href="https://developer.mozilla.org/fr/Apprendre/CSS/Comment/Cr%C3%A9er_de_belles_bo%C3%AEtes">Comment créer des boîtes fantaisies </a> (lire aussi le module <a href="https://developer.mozilla.org/fr/docs/Learn/CSS/Styling_boxes">Styles pour boites</a>, généralités).</li> - <li><a href="https://developer.mozilla.org/fr/Apprendre/CSS/Comment/Cr%C3%A9er_de_belles_bo%C3%AEtes#Les_arri%C3%A8re-plans">Comment utiliser <code>background-clip</code> pour contrôler combien de boîtes sont impactées par l'image de fond-d'écran</a></li> - <li><a href="https://developer.mozilla.org/fr/docs/Learn/CSS/Styling_boxes/Box_model_recap#Changing_the_box_model_completely">Comment changer complètement le modèle de boîte en utilisant <code>box-sizing</code></a></li> - <li><a href="https://developer.mozilla.org/fr/docs/Learn/CSS/Styling_boxes/Backgrounds">Comment contrôler l'arrière-plan</a></li> - <li><a href="https://developer.mozilla.org/fr/docs/Learn/CSS/Styling_boxes/Borders">Comment contrôler les bordures</a></li> - <li><a href="https://developer.mozilla.org/fr/docs/Learn/CSS/Styling_boxes/Styling_tables">Comment donner un style à une table HTML</a></li> - <li><a href="https://developer.mozilla.org/fr/docs/Learn/CSS/Styling_boxes/Advanced_box_effects#Box_shadows">Comment ajouter des ombres aux boîtes</a></li> + <li><a href="/fr/Learn/CSS/Introduction_to_CSS/Box_model#Box_properties">Comment tailler les boîtes CSS</a></li> + <li><a href="/fr/Apprendre/CSS/Introduction_%C3%A0_CSS/Le_mod%C3%A8le_de_bo%C3%AEte#Les_d%C3%A9passements">Comment contrôler le contenu débordant</a></li> + <li><a href="/fr/Apprendre/CSS/Introduction_%C3%A0_CSS/Le_mod%C3%A8le_de_bo%C3%AEte#L%27arri%C3%A8re-plan">Comment contrôler la partie des boîtes CSS dessinées au-dessus de l'arrière-plan</a></li> + <li><a href="/fr/Apprendre/CSS/Introduction_%C3%A0_CSS/Le_mod%C3%A8le_de_bo%C3%AEte#Les_types_de_bo%C3%AEte">Comment définir <em>"inline</em>", <em>"block"</em> et <em>"inline-block"</em> ?</a></li> + <li><a href="/fr/Apprendre/CSS/Comment/Cr%C3%A9er_de_belles_bo%C3%AEtes">Comment créer des boîtes fantaisies </a> (lire aussi le module <a href="/fr/docs/Learn/CSS/Styling_boxes">Styles pour boites</a>, généralités).</li> + <li><a href="/fr/Apprendre/CSS/Comment/Cr%C3%A9er_de_belles_bo%C3%AEtes#Les_arri%C3%A8re-plans">Comment utiliser <code>background-clip</code> pour contrôler combien de boîtes sont impactées par l'image de fond-d'écran</a></li> + <li><a href="/fr/docs/Learn/CSS/Styling_boxes/Box_model_recap#Changing_the_box_model_completely">Comment changer complètement le modèle de boîte en utilisant <code>box-sizing</code></a></li> + <li><a href="/fr/docs/Learn/CSS/Styling_boxes/Backgrounds">Comment contrôler l'arrière-plan</a></li> + <li><a href="/fr/docs/Learn/CSS/Styling_boxes/Borders">Comment contrôler les bordures</a></li> + <li><a href="/fr/docs/Learn/CSS/Styling_boxes/Styling_tables">Comment donner un style à une table HTML</a></li> + <li><a href="/fr/docs/Learn/CSS/Styling_boxes/Advanced_box_effects#Box_shadows">Comment ajouter des ombres aux boîtes</a></li> </ul> -</div> -</div> <h2 id="Techniques_avancées_ou_peu_communes">Techniques avancées ou peu communes</h2> @@ -67,15 +60,15 @@ original_slug: Apprendre/CSS/Comment <h3 id="Général">Général</h3> <ul> - <li><a href="https://developer.mozilla.org/fr/Apprendre/CSS/Introduction_%C3%A0_CSS/La_cascade_et_l_h%C3%A9ritage#Specificity">Comment calculer la spécificité d'un sélecteur de CSS</a></li> - <li><a href="https://developer.mozilla.org/fr/Apprendre/CSS/Introduction_%C3%A0_CSS/La_cascade_et_l_h%C3%A9ritage#L%27h%C3%A9ritage">Comment contrôler l'héritage en CSS</a></li> + <li><a href="/fr/Apprendre/CSS/Introduction_%C3%A0_CSS/La_cascade_et_l_h%C3%A9ritage#Specificity">Comment calculer la spécificité d'un sélecteur de CSS</a></li> + <li><a href="/fr/Apprendre/CSS/Introduction_%C3%A0_CSS/La_cascade_et_l_h%C3%A9ritage#L%27h%C3%A9ritage">Comment contrôler l'héritage en CSS</a></li> </ul> <h3 id="Effets_avancés">Effets avancés</h3> <ul> - <li><a href="https://developer.mozilla.org/fr/docs/Learn/CSS/Styling_boxes/Advanced_box_effects#Filters">Comment utiliser des filtres en CSS</a></li> - <li><a href="https://developer.mozilla.org/fr/docs/Learn/CSS/Styling_boxes/Advanced_box_effects#Blend_modes">Comment utiliser les modes fusion</a></li> + <li><a href="/fr/docs/Learn/CSS/Styling_boxes/Advanced_box_effects#Filters">Comment utiliser des filtres en CSS</a></li> + <li><a href="/fr/docs/Learn/CSS/Styling_boxes/Advanced_box_effects#Blend_modes">Comment utiliser les modes fusion</a></li> </ul> <h3 id="Mise_en_page">Mise en page</h3> @@ -83,9 +76,9 @@ original_slug: Apprendre/CSS/Comment <ul> <li><a href="/fr/docs/Web/Guide/CSS/Flexible_boxes">Utiliser les boîtes flexibles CSS (<em>flexbox</em>)</a></li> <li><a href="/fr/docs/Web/CSS/Colonnes_CSS3" title="/en-US/docs/Web/Guide/CSS/Using_multi-column_layouts">Utiliser une structure CSS avec plusieurs colonnes</a></li> - <li><a href="https://developer.mozilla.org/fr/docs/CSS/Premiers_pas/Contenu">Utiliser les contenus générés par CSS</a></li> + <li><a href="/fr/docs/CSS/Premiers_pas/Contenu">Utiliser les contenus générés par CSS</a></li> </ul> <h2 id="Voir_aussi">Voir aussi</h2> -<p><a href="https://developer.mozilla.org/fr/docs/Web/CSS/CSS_questions_frequentes">CSS FAQ</a> — Une collection d'informations ponctuelles couvrant une variété de sujets, du débogage à l'utilisation de sélecteurs.</p> +<p><a href="/fr/docs/Web/CSS/CSS_questions_frequentes">CSS FAQ</a> — Une collection d'informations ponctuelles couvrant une variété de sujets, du débogage à l'utilisation de sélecteurs.</p> |