La propriété color
permet de définir la couleur de premier plan pour le texte d'un élément et ses décorations. Cette propriété n'affecte aucune autre caractéristique de l'élément et aurait dû être appelée text-color
si ce n'est pour des raisons historiques liées à CSS Level 1.
La valeur de couleur est uniforme et peut inclure une composante de transparence depuis CSS3. Une couleur ne peut pas être un gradient (type <gradient>
) car, selon CSS, un gradient est une image (type <image>
).
Valeur initiale | Varie d'un navigateur à l'autre |
---|---|
Applicabilité | tous les éléments. S'applique aussi à ::first-letter et ::first-line . |
Héritée | oui |
Média | visuel |
Valeur calculée | si la valeur est translucide, la valeur calculée est la fonction rgba() correspondante. Sinon, la fonction rgb() correspondante. Le mot-clé transparent devient rgb(0,0,0) . |
Animable | oui, comme une couleur |
Ordre canonique | l'ordre unique et non-ambigu défini par la grammaire formelle |
Syntaxe
/* Valeurs avec mot-clé */ color: red; color: orange; color: antiquewhite; /* Une couleur notée avec */ /* 3 caractères et # */ color: #0f0; /* Une couleur notée en */ /* hexadécimal avec 6 caractères */ /* et # */ color: #00ff00; /* Une couleur construite avec */ /* la notation fonctionnelle */ color: rgba( 34, 12, 64, 0.3); /* Un mot-clé pour utiliser la */ /* couleur de l'ancêtre courant */ color: currentcolor; /* Valeurs globales */ color: inherit; color: initial; color: unset;
Valeurs
<color>
- Une valeur de couleur (type
<color>
qui fournit la couleur pour le contenu textuel de l'élément.
Syntaxe formelle
<color>où
<color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>
où
<rgb()> = rgb( <rgb-component>#{3} )
<rgba()> = rgba( <rgb-component>#{3} , <alpha-value> )
<hsl()> = hsl( <hue>, <percentage>, <percentage> )
<hsla()> = hsla( <hue>, <percentage>, <percentage>, <alpha-value> )
<named-color> = <ident>
<deprecated-system-color> = ActiveBorder | ActiveCaption | AppWorkspace | Background | ButtonFace | ButtonHighlight | ButtonShadow | ButtonText | CaptionText | GrayText | Highlight | HighlightText | InactiveBorder | InactiveCaption | InactiveCaptionText | InfoBackground | InfoText | Menu | MenuText | Scrollbar | ThreeDDarkShadow | ThreeDFace | ThreeDHighlight | ThreeDLightShadow | ThreeDShadow | Window | WindowFrame | WindowTextoù
<rgb-component> = <integer> | <percentage>
<alpha-value> = <number>
<hue> = <number>
Exemples
CSS
.exemple { color: rgb(0, 0, 255); /* équivalent à color: blue; color: #0000ff; */ } .confiture { color: orange; /* on pourrait aussi utiliser color: rgb(255, 128, 0); */ }
HTML
<p class="exemple"> En passant elle prit sur un rayon un pot de confiture portant cette étiquette, <span class="confiture"> « MARMELADE D’ORANGES. » </span> Mais, à son grand regret, le pot était vide : elle n’osait le laisser tomber dans la crainte de tuer quelqu’un ; aussi s’arrangea-t-elle de manière à le déposer en passant dans une des armoires. </p>
Résultat
Spécifications
Spécification | État | Commentaires |
---|---|---|
CSS Transitions La définition de 'color' dans cette spécification. |
Version de travail | color peut désormais être animée. |
CSS Color Module Level 3 La définition de 'color' dans cette spécification. |
Recommendation | Dépréciation des couleurs système. Ajout des couleurs SVG. Ajout des notations fonctionnelles rgba() , hsl() , hsla() . |
CSS Level 2 (Revision 1) La définition de 'color' dans cette spécification. |
Recommendation | Ajout de la valeur orange et des couleurs système. |
CSS Level 1 La définition de 'color' dans cette spécification. |
Recommendation | Définition initiale. |
Compatibilité des navigateurs
Fonctionnalité | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
Support simple | 1.0 | 1.0 (1.7 ou moins) | 3.0 | 3.5 | 1.0 |
Fonctionnalité | Android | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
Support simple | 1.0 | 1.0 (1) | 6.0 | 6.0 | 1.0 |
Voir aussi
- Le type
<color>