Médiaforma

All posts tagged border-color

L’attribut border de la balise <table> affiche une bordure autour des cellules d’un tableau. En remplaçant cet attribut par quelques propriétés CSS, vous allez pourvoir choisir la couleur, l’épaisseur et la forme de la bordure.

Voici les propriétés à utiliser :

  • border-color pour choisir la couleur de la bordure. Vous pouvez utiliser une couleur prédéfinie, comme blue ou red, ou un code RVB hexadécimal précédé du signe #, comme #451244 ;
  • border-width pour choisir l’épaisseur de la bordure. Cette propriété peut prendre les valeurs thin, medium ou thick ou être définie en pixels (px), points (pt) ou une autre unité de mesure quelconque;
  • border-style pour choisir la forme de la bordure : dashed, dotted, double, solid, .inset, groove, ridge ou outset.

Dans cet exemple, la bordure est de couleur rouge, épaisse de 5 pixels et pointillée.

Entrainez-vous à utiliser d’autres valeurs pour les trois propriétés CSS border et examinez le résultat obtenu.

Ne voyez-vous pas quelque chose d’étrange dans cette bordure ? Elle entoure le tableau, mais pas les cellules qui le composent. Ceci est tout à fait normal puisque l’attribut style a été spécifié dans la balise <table> et non dans les différents <td>. Pour résoudre élégamment ce problème, vous devez modifier le style de la balise <td>. Cette technique sera étudiée dans la rubrique suivante.


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 :