diff options
Diffstat (limited to 'files/fr/learn/css/howto/generated_content/index.md')
| -rw-r--r-- | files/fr/learn/css/howto/generated_content/index.md | 65 |
1 files changed, 35 insertions, 30 deletions
diff --git a/files/fr/learn/css/howto/generated_content/index.md b/files/fr/learn/css/howto/generated_content/index.md index aa8656013b..3179e8b02c 100644 --- a/files/fr/learn/css/howto/generated_content/index.md +++ b/files/fr/learn/css/howto/generated_content/index.md @@ -7,61 +7,66 @@ tags: translation_of: Learn/CSS/Howto/Generated_content original_slug: Apprendre/CSS/Comment/Generated_content --- -<p>{{LearnSidebar}}</p> +{{LearnSidebar}} -<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> +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>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> +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. -<div class="note"> -<p><strong>Note :</strong> Le contenu spécifié dans la feuille de style ne fait pas partie du DOM.</p> -</div> +> **Note :** Le contenu spécifié dans la feuille de style ne fait pas partie du DOM. -<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> +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>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> +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. -<h2 id="Exemples">Exemples</h2> +## Exemples -<h3 id="Contenu_textuel">Contenu textuel</h3> +### Contenu textuel -<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> +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. -<h4 id="HTML">HTML</h4> +#### HTML -<pre class="brush: html">Un texte où j'en ai besoin de <span class="ref"> quelque chose</span> -</pre> +```html +Un texte où j'en ai besoin de <span class="ref"> quelque chose</span> +``` -<h4 id="CSS">CSS</h4> +#### CSS -<pre class="brush: css">.ref::before { +```css +.ref::before { font-weight: bold; color: navy; content: "Réference "; -}</pre> +} +``` -<h4 id="Résultat">Résultat</h4> +#### Résultat -<p>{{ EmbedLiveSample('Contenu_textuel', 600, 30) }}</p> +{{ EmbedLiveSample('Contenu_textuel', 600, 30) }} -<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> +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 [4.4 Représentation de la feuille de style CSS](https://www.w3.org/TR/CSS21/syndata.html#q23) dans la spécification CSS. -<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> +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 [Référencer des caractères non représentés par l'encodage](https://www.w3.org/TR/CSS21/syndata.html#q24) et [Caractères et casse](https://www.w3.org/TR/CSS21/syndata.html#q6) dans la spécification CSS. -<h3 id="Contenu_avec_une_image">Contenu_avec_une_image</h3> +### Contenu_avec_une_image -<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> +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>Cette règle ajoute un espace et une icône après chaque lien qui possède la classe <code>glossary</code> :</p> +Cette règle ajoute un espace et une icône après chaque lien qui possède la classe `glossary` : -<h4 id="HTML_2">HTML</h4> +#### HTML -<pre class="brush: html"><a href="developer.mozilla.org" class="glossary">developer.mozilla.org</a></pre> +```html +<a href="developer.mozilla.org" class="glossary">developer.mozilla.org</a> +``` -<h4 id="CSS_2">CSS</h4> +#### CSS -<pre class="brush: css">a.glossary::after { +```css +a.glossary::after { content: " " url("glossary-icon.gif"); -}</pre> +} +``` -<p>{{ EmbedLiveSample('Contenu_avec_une_image', 600, 40) }}</p> +{{ EmbedLiveSample('Contenu_avec_une_image', 600, 40) }} |