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 |
Votre navigateur peut supporter de nombreux autres noms de couleurs, comme :
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.
Avec un peu de pratique, vous pouvez ajuster les couleurs à trois chiffres à la main dans la plupart des cas :
|
||||||||||||||||||
Pour un ton pastel comme du bleu pâle :
|
| 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 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.
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 |
| 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.