Les feuilles de styles CSS
DEUXIÈME PARTIE
88
Rappelons que l’on peut indiquer une couleur de plusieurs manières :
• par son nom (en anglais). Exemple : border-color: black; pour le noir ;
• par rgb(x,y,z) : définition de la couleur en mode RGB avec des entiers de 0
à 255 ou des pourcentages. Exemple : border-color: rgb(50,255,80);
• par son codage RGB exprimé en hexadécimal, court ou long.
Exemple : border-color: #fc0;
Encore une fois, l’ordre d’attribution des valeurs de couleurs se fait dans le sens
horaire en partant du haut, en les complétant éventuellement par symétrie.
• Deux valeurs définissent ainsi une couleur par orientation (horizontale ou verticale) de côté. Exemple : border-color: #fc0 #ccc;
• Trois valeurs permettent de plus de distinguer le haut du bas.
Exemple : border-color: blue green red;
• Quatre valeurs individualisent chaque côté.
Exemple : border-color: blue green red yellow;
De nouveau, les propriétés border-top-color, border-right-color, borderbottom-color et border-left-color s’appliquent directement à un côté précis.
Notation raccourcie
La propriété générale border rassemble tous ces aspects en une seule instruction.
Pour obtenir une bordure en pointillés gris large de trois pixels, il suffit ainsi d’écrire :
Cela allège agréablement les spécifications distinctes :
Applications pratiques
Supprimer la bordure d’une image
Vous êtes probablement familier des images cliquables, notamment utiles dans les
menus avec boutons graphiques. L’approche naïve et naturelle :
entoure malheureusement toute image servant de lien d’un cadre bleu.
border: 3px dotted gray;
border-width: 3px;
border-style: dotted;
border-color: gray;