Couleurs

 

Cette page donne plus de détails sur la manière de spécifier les couleurs en CSS.

Dans votre exemple de feuille de style, vous ajouterez des couleurs de fond.

Information : les couleurs

Dans ce tutoriel, jusqu'à présent, vous avez utilisé un nombre limité de couleurs nommées. CSS 2 définit 17 couleurs nommées en tout. Certains des noms peuvent ne pas êtres ce à quoi vous vous attendez :

  black   gray   silver   white  
primaires red   lime   blue  
secondaires yellow   aqua   fuchsia  
  maroon   orange   olive   purple   green   navy   teal  

 

Plus de détails
Votre navigateur peut supporter de nombreux autres noms de couleurs, comme :
dodgerblue   peachpuff   tan   firebrick   aquamarine  

Pour plus de détails et la liste complète, consultez : SVG color keywords dans le module CSS 3 Color. Faites attention à ne pas utiliser de noms de couleurs que le navigateur de vos lecteurs peut ne pas comprendre.

Pour une palette plus étendue, vous pouvez spécifier les composantes rouges, vertes et bleues de la couleur désirée en utilisant un signe dièse (carré) suivi de trois chiffres hexadécimaux dans l'intervalle 0 – 9, a – f. Les lettres a – f représentent les valeurs 10 – 15:

noir   #000
rouge pur   #f00
vert pur   #0f0
bleu pur   #00f
blanc   #fff

Pour la palette complète, spécifiez deux chiffres hexadécimaux pour chaque composante :

noir   #000000
rouge pur   #ff0000
vert pur   #00ff00
bleu pur   #0000ff
blanc   #ffffff

Il est généralement possible d'obtenir ces codes hexadécimaux à six chiffres dans les logiciels de dessin ou d'autres outils.

Exemples
Avec un peu de pratique, vous pouvez ajuster les couleurs à trois chiffres à la main dans la plupart des cas :
Commencez avec du rouge pur :   #f00
Pour le rendre plus pâle, ajoutez un peu de vert et de bleu :   #f77
Pour qu'il soit plus orange, ajoutez un peu de vert supplémentaire :   #fa7
Pour le rendre plus sombre, réduisez chacune des composantes :   #c74
Pour réduire la saturation, égalisez un peu les composantes :   #c98
Si vous les rendez exactement égales, vous obtenez du gris :   #ccc
Pour un ton pastel comme du bleu pâle :
Commencez avec du blanc pur :   #fff
Réduisez légèrement les autres composantes :   #eef

 

Plus de détails
Vous pouvez également spécifier une couleur à l'aide de valeurs RGB décimales dans l'intervalle 0 – 255, ou des pourcentages.

Par exemple, ceci est marron (rouge sombre) :

rgb(128, 0, 0)


Pour plus de détails sur la manière de spécifier des couleurs, consultez Colors dans la spécification CSS.

Pour des informations sur l'utilisation des couleurs système comme celle des menus ou des bordures 3D, consultez CSS2 System Colors dans la spécification CSS.

 

Propriétés de couleur

Vous avez déjà utilisé la propriété color pour le texte.

Vous pouvez également utiliser background-color pour changer la couleur de fond de certains éléments.

Les fonds peuvent êtres définis à transparent pour enlever explicitement toute couleur, permettant de voir le fond de l'élément parent.

Exemple
Les boîtes Exemple dans ce tutoriel utilisent cette couleur de fond jaune pâle :
background-color: #fffff4;

Les boîtes Plus de détails utilisent ce gris pâle :

background-color: #f4f4f4;

Action : utilisation des codes de couleur

Éditez votre fichier CSS. Effectuez le changement montré ici en gras pour donner aux lettres initiales un fond bleu pâle. (La mise en page et les commentaires dans votre fichier seront probablement différents du fichier montré ici. Conservez la mise en page et les commentaires de la manière qui vous convient.)

/*** Tutoriel CSS : page des couleurs ***/
 
/* police de la page */
body {font: 16px "Comic Sans MS", cursive;}
 
/* paragraphes */
p {color: blue;}
#premier {font-style: italic;}
 
/* lettres initiales */
strong {
  color: red;
  background-color: #ddf;
  font: 200% serif;
  }
 
.carotte {color: red;}
.epinard {color: green;}

Actualisez dans votre navigateur pour voir le résultat :

Cascading Style Sheets
Cascading Style Sheets

 

Challenge
Dans votre fichier CSS, changez tous les noms de couleur en codes hexadécimaux à trois chiffres sans affecter le résultat.

(Ceci ne peut pas être fait exactement, mais vous pouvez arriver tout près. Pour que ce soit exact, vous aurez besoin des codes à six chiffres et de regarder dans la spécification CSS ou utiliser un outil graphique pour obtenir les valeurs précises.)

 

Pour continuer

Votre document d'exemple et votre feuille de style séparent strictement le contenu du style.

La page suivante explique comment vous pouvez faire des exceptions à cette séparation stricte : Contenu.

Étiquettes et contributeurs liés au document

Étiquettes : 
 Contributeurs à cette page : teoli, Mgjbot, Verruckt, Indigo, BenoitL
 Dernière mise à jour par : teoli,