Médiaforma

Mise en exergue d’un texte

Print Friendly

Cliquez ici pour accéder au pack eBook+vidéos HTML5, CSS3, JavaScript

La balise <blockquote></blockquote> permet de différentier un bloc de texte du texte courant. Il suffit d’entourer le bloc de texte concerné par les balises <blockquote> et </blockquote> pour le mettre en retrait :

Dans cet exemple, le document est constitué de deux paragraphes identiques. Le premier occupe toute la largeur de la fenêtre. Le deuxième, placé entre les balises <blockquote> et </blockquote> subit un retrait à droite et à gauche :

Si cette mise en forme n’est pas suffisante, vous pouvez la compléter par quelques instructions CSS.

Pour cela, il suffit de redéfinir le style blockquote. Vous pourriez par exemple :

  • augmenter les marges à gauche et à droite du texte en agissant sur les propriétés margin-left et margin-right (lignes 7 et 8) ;
  • ajouter une indentation sur la première ligne du bloc de texte (ligne 9) ;
  • modifier la couleur du texte (ligne 10) ;
  • afficher le texte en italique (ligne 11) ;
  • ajouter une bordure autour du texte (lignes 12 à 14). Ici, la bordure est solide, épaisse de 1 pixel et de couleur bleu ciel ;
  • ajouter une marge intérieure entre le texte et la bordure (ligne 15).

Voici le résultat dans Internet Explorer :

Vous avez aimé cet article ? Partagez-le avec vos réseaux...
 
Comments

No comments yet.

Leave a Reply