Forum

Réagissez dans les forums de JDN Développeurs

CSS autorise les développeurs à bien des détours à qui veut colorer un élément. Chaque manière correspond à un usage ou à un public.

La notation hexadécimale classique
color: #001122;
Cette manière est déjà bien connue de ceux qui sont habitués aux couleurs en HTML. Elle définit la couleur, ou plutôt ses trois composantes Rouge, Vert et Bleu, via une notation hexadécimale de type #RRVVBB. 00 implique que la composante est absente, FF qu'elle est à son maximum.

La notation hexadécimale abrégée
color: #012;
Cette manière permet de gagner quelques caractères pour les couleurs utilisant des valeurs composé de doublons : FF, 55, 33. Par exemple, #53F correspond à la notation classique #5533FF. On comprend donc qu'on ne peut pas abréger une couleur comme #52E45F…

La notation en pourcentage
color: rgb(50%, 75%, 0%);
Cette notation permet une précision innaccessible aux deux précédentes, notamment parce qu'elle autorise les nombres à virgule. Le fonctionnement est sinon proche de la notation hexadécimale : 0% signifie l'absence de la composante, 100% qu'elle est à son maximum.

La notation décimale
color: rgb(25, 0, 255);
Celle-ci permet à ceux qui les connaissent d'entrer directement les codes RVB nécessaires à l'affichage d'une couleur donnée. Là encore, 0 dénote l'absence, 255 le maximum. C'est donc l'équivalent décimal de la notation hexadécimale.

Les mots-clefs
color: black;
Cette dernière option permet à ceux ne maîtrisant pas les différentes autres de s'y retrouver dans les couleurs qu'ils utilisent : un grand nombre de couleur sont accessible via leur nom anglais : green, yellow, blue, orange, white, red, black, mais aussi maroon, lime, aqua, teal, silver… Il y en a 17 en tout, décrites sur le site du W3C.



Les meilleures astuces CSS sur le JDN :
- Comment appliquer les CSS d'une page web au contenu d'une iframe ?
- Comment centrer horizontalement une DIV dans une autre en CSS ?
- Comment créer un arrière-plan (backgroud) CSS extensible et adaptable ?
- Comment définir les cellpadding et cellspacing en CSS ?
- Comment modifier l'image d'un bouton input en CSS ?
- Comment rendre l'arrière-plan d'un élément semi-transparent en conservant le texte de cet élément opaque en CSS ?
- Internet Explorer supporte-t-il l'attribut CSS border-radius