Contenu

  • Raccourci de la révision : CSS/Premiers_pas/Contenu
  • Titre de la révision : Contenu
  • ID de la révision : 73441
  • Créé :
  • Créateur : Verruckt
  • Version actuelle ? Non
  • Commentaire /* Pour continuer */

Contenu de la révision

Cette page décrit plusieurs manières d'utiliser CSS pour ajouter du contenu à un document affiché.

Vous modifierez votre feuille de style pour ajouter du contenu textuel et une image.

Information : contenu

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

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.

Plus de détails
Spéficier 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.

Ces complications ne surviendont pas si le contenu spécifié consiste en une série de symboles ou d'images compréhensibles dans toutes les langues et cultures.

Le contenu spécifié dans une feuille de style ne fait pas partie du DOM.

Contenu textuel

CSS peut insérer du texte avant ou après un élément. Pour spécifier cela, créez une règle et ajoutez :before ou :after au sélecteur. Dans la déclaration, spécifiez la propriété content en lui donnant comme valeur le contenu textuel.

Exemple
Cette règle ajoute le texte Référence : devant chaque élément de la classe ref :
.ref:before {
  font-weight: bold;
  color: navy;
  content: "Référence : ";
  }
Plus de détails
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 4.4 CSS style sheet representation dans la spécification CSS.

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 Referring to characters not represented in a character encoding, ainsi que Characters and case dans la spécification CSS.

Contenu sous forme d'images

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é content.

Exemple
Cette règle ajoute une espace et une icône après chaque lien faisant partie de la classe glossaire:
a.glossaire:after {content: " " url("../images/glossary-icon.gif");}


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é background. 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.

Exemple
Cette règle change le fond d'un élément spécifique, en utilisant une URL pour indiquer un fichier image.

Le sélecteur spécifie l'id de l'élément. La valeur no-repeat fait que l'image apparaîtra une seule fois :

#panneau-lateral {background: url("../images/sidebar-ground.png") no-repeat;}
Plus de détails
Pour plus d'informations sur les propriétés affectant les fonds, et des autres options qui peuvent être spécifiées pour les images de fond, consultez The background dans la spécification CSS.

Action : ajout d'une image de fond

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 :

Image:ligne-bleue.png

(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.)

Éditez votre fichier CSS et ajoutez cette règle à l'élément body, pour donner une image de fond à la page entière.

background: url("ligne-bleue.png");

La valeur repeat 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é :

Image:fond-lignes-bleues.png

Cascading Style Sheets

Cascading Style Sheets

Challenge
Téléchargez cette image :
Image:punaise-jaune.png

Ajoutez une règle à votre feuille de style de manière à ce que l'image soit affichée au début de chaque ligne :

Image:fond-lignes-bleues.png

image:punaise-jaune.png Cascading Style Sheets
image:punaise-jaune.png Cascading Style Sheets

Pour continuer

Une façon courante d'ajouter du contenu via une feuile de style est de marquer les différents éléments d'une liste.

La page suivante décrit la manière de spécifier un style pour les éléments d'une liste : Listes

{{ wiki.languages( { "en": "en/CSS/Getting_Started/Content", "pl": "pl/CSS/Na_pocz\u0105tek/Tre\u015b\u0107", "pt": "pt/CSS/Como_come\u00e7ar/Conte\u00fado" } ) }}

Source de la révision

<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 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 style="font-weight:bold; text-align:left; margin-top:1em;">Plus de détails
</caption><tbody><tr>
<td> Spéficier 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 surviendont 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 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 style="font-weight:bold; text-align:left; margin-top:1em;">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 {
  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 style="font-weight:bold; text-align:left; margin-top:1em;">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 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 style="font-weight:bold; text-align:left; margin-top:1em;">Exemple
</caption><tbody><tr>
<td> Cette règle ajoute une 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 style="font-weight:bold; text-align:left; margin-top:1em;">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 style="font-weight:bold; text-align:left; margin-top:1em;">Plus de détails
</caption><tbody><tr>
<td> Pour plus d'informations sur les propriétés affectant les fonds, et des 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 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" src="File:fr/Media_Gallery/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" src="File:fr/Media_Gallery/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 style="font-weight:bold; text-align:left; margin-top:1em;">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" src="File:fr/Media_Gallery/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" src="File:fr/Media_Gallery/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" src="File:fr/Media_Gallery/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" src="File:fr/Media_Gallery/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 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 :
<b><a href="fr/CSS/Premiers_pas/Listes">Listes</a></b>
</p>{{ wiki.languages( { "en": "en/CSS/Getting_Started/Content", "pl": "pl/CSS/Na_pocz\u0105tek/Tre\u015b\u0107", "pt": "pt/CSS/Como_come\u00e7ar/Conte\u00fado" } ) }}
Revenir à cette révision