Retrouvez cet article dans : Linux Pratique 39

Indispensables à l'esthétique des pages Web, les mentions de couleurs doivent être utilisées à bon escient. En fonction du type d'élément auquel la couleur est attribuée, il faut faire usage de propriétés CSS bien spécifiques, dont nous avons ici dressé un récapitulatif...

 Trois possibilités

Il y a deux possibilités pour définir les couleurs en HTML :

•  en indiquant les valeurs RGB (Red Green Blue) de la couleur désirée sous forme hexadécimale ;
•  en précisant leur nom (en anglais).

Si vous optez pour la première solution, vous travaillez indépendamment du navigateur et avez le libre choix entre 16,7 millions de couleurs. Notons qu'il est possible de ne préciser que trois chiffres hexadécimaux de 0 à F, les navigateurs convertissant ces valeurs par réplication (la couleur notée #FC5 est ainsi interprétée comme #FFCC55).
L'utilisation des noms de couleur paraît plus " pratique " et surtout plus intuitive, mais sachez qu'à la date d'aujourd'hui, seuls 16 noms de couleurs sont officiellement standardisés. Ces couleurs composent une palette appelée " palette VGA " (Fig. 1) : c'est le plus petit dénominateur commun de toutes les cartes graphiques et des écrans VGA compatibles. Les noms prédéfinis sont permis à la fois en HTML et en CSS. Il y a bien d'autres noms de couleurs, mais ceux-ci dépendent du navigateur... Pour s'assurer de la compatibilité de vos mentions de couleur avec n'importe quel navigateur, mieux vaut utiliser le code hexadécimal des couleurs.
En langage CSS, vous disposez d'une autre possibilité pour définir les couleurs. Il s'agit de l'expression rgb(rrr, ggg, bbb). Entre les parenthèses doivent figurer trois valeurs décimales (de 0 à 255) ou trois pourcentages (de 0% à 100%),
séparés les uns des autres par des virgules. Le premier groupe de trois caractères correspond à la valeur du rouge, le deuxième correspond au vert et le dernier correspond au bleu.
Ces trois mentions sont ainsi équivalentes :

background-color: orange;
background-color: #FFA500;
background-color: rgb(255,165,0);

C'est la forme hexadécimale des couleurs qui est la plus couramment utilisée.

Couleurs de texte

Pour définir la couleur du texte contenu dans n'importe quel élément HTML, vous devez utiliser la propriété color. Exemples (Fig. 2) :

h1 {color: #0000FF;}
a {color: #FF0000;}

Couleurs d'arrière-plan

Les couleurs d'arrière-plan peuvent s'appliquer à tous les éléments HTML. On utilise pour cela la propriété background-color. Elle admet comme valeur une mention de couleur ou bien la valeur transparent (qui est sa valeur par défaut).

body {background-color:#E0E0E0;}
#container {background-color: #FF9999;}
td {background-color: #CCCCFF}

Par défaut, l'arrière-plan d'un élément est transparent et donc, si vous ne spécifiez pas de couleur, c'est la couleur de fond de l'élément parent qui sera apparente.

Couleurs de bordure

Tous les éléments HTML peuvent recevoir des éléments de style pour leurs bordures : titres, blocs, paragraphes, images, listes, liens, etc. Par défaut, l'épaisseur de celles-ci est fixée à 0px, c'est pourquoi elles sont inapparentes. Pour définir une couleur de bordure, deux solutions s'offrent à vous :

• soit vous définissez une même couleur pour l'ensemble des bordures, à l'aide de la propriété border, ce qui formera un cadre au final ; Par exemple : border: 2px dotted #990099;
• soit vous définissez une couleur différente pour chaque bordure, en utilisant border-top-color, border-bottom-color, border-right-color et border-left-color ; plus simplement, vous pouvez utiliser la propriété border-color, suivie de 2 à 4 valeurs :

Dans le cas de 2 valeurs, la première désigne la couleur des bordures supérieure et inférieure de l'élément, la deuxième désigne la couleur des bordures droite et gauche. Dans le cas de 3 valeurs, la première désigne la couleur de la bordure supérieure, la deuxième correspond à la couleur des bordures droite et gauche et la troisième désigne la couleur de la bordure inférieure. Si vous utilisez quatre valeurs de couleur, vous désignez dans l'ordre la couleur de la bordure du haut, de droite, du bas, puis de gauche. On suit en fait ici la même logique que la déclaration des marges...
Attention, ces sous-possibilités de border-color ne sont disponibles que depuis CSS 2.0 et sont ignorées des navigateurs plus anciens. En outre, lorsque vous utilisez ces propriétés, n'oubliez pas de mentionner également un style et une épaisseur de bordure, sans quoi vos bordures n'apparaîtront pas...

Fig. 3 : Les 4 bordures d'un conteneur peuvent être définies séparément.

Exemples (Fig. 3) :

#bloc1 {
border: 8px solid #330099;
}

#bloc2 {
border-style: solid;
border-width: 8px;
border-top-color: #0000FF;
border-right-color: #FFFF00;
border-bottom-color: #FF0033;
border-left-color: #009900;
}

#bloc3 {
border: solid 8px;
border-color: #00CC33 #FFCC33;
}

Couleurs de contour

Les contours (outlines) sont semblables aux bordures, mais n'affectent pas les dimensions ou le positionnement de l'élément auquel on les applique ou de n'importe quel autre élément. C'est comme si le contour était tracé par-dessus le conteneur auquel il s'applique : les dimensions de ce dernier ne varient pas en fonction de l'épaisseur du contour (contrairement aux bordures, dont il faut tenir compte dans les dimensions).

Fig. 4 :  Le contour apparaît ici en vert ; en rouge, c'est une bordure qui a été définie. Constatez la différence entre les deux propriétés...

Par ailleurs, contrairement à border, la propriété outline ne peut pas être décomposée en -top, -right, etc.
La propriété outline-color admet pour valeur une mention de couleur ou bien la valeur invert. Cette dernière produit l'inversion des couleurs des pixels à l'écran (on l'utilise en général pour s'assurer que le contour actif est visible, indépendamment de la couleur du fond). Exemple d'utilisation :

outline: #228B22 solid 3px;

Adaptez-vous à l'utilisateur !

Depuis la version 2.0 du langage CSS, il est possible d'utiliser des noms de couleur spécifiques, correspondant aux couleurs que l'utilisateur a définies lors de la configuration de son environnement de travail. De cette manière, vous pouvez définir la même couleur d'arrière-plan pour vos pages que celle que l'utilisateur aura choisie pour son navigateur, et ce, sans même les connaître ! Parmi les noms de couleurs spécifiques à l'utilisateur, on retiendra :

• appworkspace : couleur de l'arrière-plan de la fenêtre de l'application active ;
• background : couleur de l'arrière-plan du bureau ;
• highlighttext : couleur du texte sélectionné ;
• infobackground : couleur pour les info-bulles et les hints (petites aides déroulantes) ;
• infotext : couleur du texte dans les info-bulles et les hints ;
• scrollbar : couleur de la barre de défilement dans les fenêtres ;
• window : couleur d'arrière-plan pour les fenêtres de document ;
• windowframe : couleur de bordures des fenêtres ;
• windowtext : couleur de texte normal dans des fenêtres de document.

Ces mentions s'utilisent de la même façon que les autres définitions de couleur ; en voici un exemple :

body {background-color: appworkspace;}

Vous pouvez visualiser la liste complète de ces couleurs spécifiques à l'adresse suivante :

Lien
http://fr.selfhtml.org/css/formats/affectationvaleur.htm#couleurs