Vous êtes ici > CSS Débutant | Premiers pas en CSS | Citations et retraits
Tout débutant (enfin, beaucoup...) en création de page web constate que l'utilisation balise blockquote induit un retrait du texte. Déduction : la balise blockquote est faite pour mettre un texte en retrait...
Et bien non ! Elle n'est pas du tout faite pour cela. "Quote" en anglais veut dire "citer". Cette balise doit donc être utilisée pour mettre en relief un "bloc" de citation.
Il y a d'autres méthodes pour faire des retraits que d'utiliser la balise blockquote.
L'élément BLOCKQUOTE indique une citation longue (avec un contenu de type bloc) et l'élément Q est censé être utilisé pour des citations courtes (avec un contenu de type en-ligne) ne nécessitant pas un saut de paragraphe.
L'utilisation de l'élément BLOCKQUOTE pour obtenir le retrait d'un texte est déconseillée en faveur de l'utilisation de feuilles de style.
<blockquote cite="http://www.la-grange.net/w3c/html4.01/struct/text.html#h-9.2.2"> <p> L'élément BLOCKQUOTE indique une citation longue (avec un contenu de type bloc) et l'élément Q est censé être utilisé pour des citations courtes (avec un contenu de type en-ligne) ne nécessitant pas un saut de paragraphe. </p> <p>L'utilisation de l'élément BLOCKQUOTE pour obtenir le retrait d'un texte est déconseillée en faveur de l'utilisation de feuilles de style. </p> </blockquote>
Tout est dit dans cet extrait des spécifications du html 4.01. Pour obtenir un retrait, il faut donc utiliser les CSS.
Fonctionne avec :
Attributs utilisés :
Pour induire le retrait d'un paragraphe, on peut lui assigner une marge gauche (margin-left) d'autant de pixels que souhaités.
Si l'on désire répeter plusieurs fois cette mise en forme dans la page, il sera évidemment préférable d'utiliser le sélecteur class.
.retrait {
margin-left:50px;
}
<p class="retrait"> Ce paragraphe est en retrait de 50 pixels du bord gauche. </p>
Ce paragraphe est en retrait de 50 pixels du bord gauche.
Si on ne veut faire un retrait que sur la première ligne d'un paragraphe, c'est alors le text-indent qu'il faut utiliser.
.retrait {
text-indent:50px;
}
<p class="retrait"> La première ligne de ce paragraphe est en retrait de 50 pixels. Le reste du texte est aligné normalement. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis eget ligula quis libero mollis dapibus. Suspendisse potenti. Nullam facilisis neque et sem. Proin placerat adipiscing urna. Aenean sollicitudin. </p>
La première ligne de ce paragraphe est en retrait de 50 pixels. Le reste du texte est aligné normalement. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis eget ligula quis libero mollis dapibus. Suspendisse potenti. Nullam facilisis neque et sem. Proin placerat adipiscing urna. Aenean sollicitudin.
Contact : pascale at mammouthland.net
En cas de reproduction (partielle ou totale) de cet article, prière de faire un lien vers la page originale : http://css.mammouthland.net/blockquote-retraits-css.php