Éducation, société et technologie

CSS - Les couleurs du web

mercredi 2 mars 2005 par André Vincent

Les couleurs, en (X)HTML et en CSS, peuvent être attribués à presque tous les éléments. Chaque élément (X)HTML possède trois attributs qui peuvent être ainsi colorés : le texte, le fond et les bordures.

  • le texte par la propriété color
  • le fond par la propriété background
  • les bordures par la propriété border

On peut assigner les couleurs directement dans la balise d’un élément avec l’attribut style de cette façon :

Le code :

<p style="color: #FFF; background: olive;
    border: 2px rgb(128, 0, 0) solid;">

    Un paragraphe tout en couleur

 </p>

Résultat :


Un paragraphe tout en couleur

Une autre méthode, plus efficace, consiste à utiliser une feuille de style interne ou externe pour assigner une couleur à un élément globalement ou encore à un élément précis identifié à l’aide d’une classe ou d’un identificateur unique :

Le code CSS :

p.boite {
   color: #FFF;
   background: teal;
   border: rgb(128, 0, 0) 4px solid;
}

Le code (X)HTML :
<p class="boite">Un paragraphe tout en couleur</p>

Les diverses méthodes pour assigner les couleurs

1. Nominale
Exemple : p { color: red; }
On utilise dans ce cas le nom d’une des 16 couleurs prédifinis en (X)HTML et en CSS. Les voici, avec l’équivalent hexadécimal. [CSS2 introduit une 17e couleur : ORANGE.

black #000000 gray #808080
maroon #800000 red #FF0000
green #008000 lime #00FF00
olive #808000 yellow #FFFF00
navy #000080 blue #0000FF
purple #800080 fuchsia #FF00FF
teal #008080 aqua #00FFFF
silver #C0C0C0 white #FFFFFF
orange #FFA500

2. RGB
Exemple : p { color: rgb(68,128,214); }
Ici, on utilise une valeur décimale de 0 à 255 pour déterminer la valeur de chacune des composantes primaires rouge, vert et bleu. Ce modèle permet de définir plus de 16 millions de variations possibles de couleurs (256 x 256 x 256).

2. Hexadécimale
Exemple : p { color: #FF092C; }
Ici, on utilise des caractères de 0 à F (0 à 9 + A à F, soit 16 valeurs possibles) pour déterminer la valeur de chacune des couleurs primaires rouge, vert et bleu. Chaque composante est défini par 2 caractères ; ce qui permet, pour chaque composante d’avoir 16 x 16 = 256 possibilités. On obtient ainsi le même nombre de variations qu’avec le modèle RGB, mais codé de manière plus compacte. Il existe aussi en CSS un façon raccourcie de coder les couleurs en hexadécimale sur 3 caractères au lieu de 6. En effet, lorsque les 2 valeurs de chacune des paires de caractères sont identiques, on peut n’utiliser que 3 caractères. Ainsi, #36A est identique à #3366AA.

Voir en complément :


Accueil | Contact | Plan du site | | Statistiques du site | Visiteurs : 13417 / 1789533

Suivre la vie du site fr  Suivre la vie du site Cours Web  Suivre la vie du site Sites web statiques  Suivre la vie du site CSS - Feuilles de styles   ?    |    titre sites syndiques OPML   ?

Site réalisé avec SPIP 3.1.4 + AHUNTSIC

Creative Commons License

Visiteurs connectés : 2