Tutorial CSS : Styler une citation

0
(27/02/09) Categories : CSS ; Tutoriaux

La balise <blockquote>

Vous connaissez probablement la balise <blockquote>, qui permet d'insérer dans votre page une longue citation. C'est un élément de type 'block' (il y a un retour à la ligne avant et après le contenu de la balise). Rappelons au passage que la balise <cite> représente la source de la citation, et que son attribut 'cite' contient la référence médiamétrique de la citation.

Par exemple :

<p><cite>Albert Einstein</cite> disait :</p>
<blockquote>Quiconque prétend s'ériger en juge de la vérité et du savoir s'expose à périr sous les éclats de rire des dieux puisque nous ignorons comment sont réellement les choses et que nous n'en connaissons que la représentation que nous en faisons.</blockquote>

Rendu par défaut

Le rendu par défaut est le suivant :

Image représentant une balise blockquote sans aucun style CSS appliqué

Application des styles CSS

Vous le voyez, les navigateurs n'appliquent aucun style au bloc de citation, si ce n'est une marge. Mais vous pouvez en CSS rendre cette citation attrayante. Nous allons l'entourer par deux gros guillemets (deux images) et ajouter une emphase sur la première lettre :

blockquote {
    font-family:Georgia,"Times New Roman",Times,serif;
    font-style:italic;
    background:url(right-quote.gif) no-repeat right bottom;
    text-indent:-25px;
    padding-right:25px;
    padding-left:25px;
    color:brown;
    text-align:justify;
}

blockquote:first-letter {
    background:url(left-quote.gif) no-repeat left top;
    padding-left:25px;
    font-size:1.4em;
}

Rendu obtenu

Image représentant une balise blockquote stylée en CSS

Ressources

Retour en haut de la page

Commentaires

Il n'existe pas encore de commentaires pour ce billet.

Retour en haut de la page

Ajouter un commentaire

 
Règles
  • Merci d'écrire des commentaires en relation avec le billet et en français correct
  • Ces balises HTML sont autorisées : <a><b><i><em><strong><abbr><acronym><blockquote><code>
  • Tout message avec spam, langage SMS sera supprimé.
Inscrivez ici le nom de la capitale de la France
 
Retour en haut de la page


  • Lien vers la page Contact
  • Lien vers le flux RSS du blog
  • Lien vers la page Liens
Partenaire Rammstein World Partenaire Emigrate France
Page valide XHTML 1.0 Page valide CSS Level 2.1 Flux RSS Valide

Ce site respecte les standards du web du W3C.

Site optimisé pour une largeur d'écran supérieure ou égale à 1024 pixels.
Site testé sur Firefox, Internet Explorer 7+, Chrome, Opera, Safari.

contenu | menu | recherche

Ce site propose un blog qui parle d’informatique, notamment de développement et design.

Il a été créé, designé et est maintenu par Pierrick Dautrement.

© 2019 Pierrick Dautrement. Tous droits réservés.

Ce qu'il y a derrière