Propriété color CSS
La propriété color définit la couleur du contenu textuel et des décorations de texte. Une couleur de fond peut être combinée avec une couleur de texte pour rendre le texte plus lisible. Vous pouvez trouver les couleurs web dans notre section Couleurs HTML et essayer de choisir vos couleurs préférées avec notre outil Sélecteur de couleurs. La valeur par défaut de cette propriété est currentcolor.
| Valeur initiale | currentcolor |
|---|---|
| S'applique à | Tous les éléments. Elle s'applique également à ::first-letter et ::first-line. |
| Héritée | Oui. |
| Animable | Oui. La couleur est animable. |
| Version | CSS1 |
| Syntaxe DOM | object.style.color = "#1c87c9"; |
Syntaxe
Syntaxe de la propriété CSS color
color: color | initial | inherit;Exemple de la propriété color :
Exemple de la propriété CSS color
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.blue {
color: #1c87c9;
}
</style>
</head>
<body>
<h2>Color property example</h2>
<p>This is some paragraph for example.</p>
<p class="blue">This is some paragraph with blue color.</p>
<p>This is some paragraph for example.</p>
</body>
</html>Résultat
INFO
Vous pouvez définir des valeurs hexadécimales, RGB, HSL ou des noms de couleur comme valeur pour la propriété color. Remarque : La valeur initiale est currentcolor, ce qui signifie qu'elle hérite de la couleur de texte de son élément parent.
Exemple de la propriété color avec une valeur de couleur nommée :
Exemple de la propriété CSS color avec une valeur de couleur nommée
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.blue {
color: blue;
}
</style>
</head>
<body>
<h2>Color property example</h2>
<p>This is some paragraph for example.</p>
<p class="blue">This is some paragraph with a named blue color.</p>
<p>This is some paragraph for example.</p>
</body>
</html>Exemple de la propriété color avec une valeur hexadécimale :
Exemple de la propriété CSS color avec une valeur hexadécimale
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.color {
color: #8ebf42;
}
</style>
</head>
<body>
<h2>Color property example.</h2>
<p>This is some paragraph for example</p>
<p class="color">This is some paragraph with a hexadecimal color value (#8ebf42 for green).</p>
<p>This is some paragraph for example.</p>
</body>
</html>Exemple de la propriété color avec une valeur RGB :
Exemple de la propriété CSS color avec une valeur RGB
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.color {
color: rgb(142, 191, 66);
}
</style>
</head>
<body>
<h2>Color property example.</h2>
<p>This is some paragraph for example</p>
<p class="color">This is some paragraph with a RGB color value.</p>
<p>This is some paragraph for example.</p>
</body>
</html>Exemple de la propriété color avec une valeur HSL :
Exemple de la propriété CSS color avec une valeur HSL
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.color {
color: hsl(89, 43%, 51%);
}
</style>
</head>
<body>
<h2>Color property example.</h2>
<p>This is some paragraph for example</p>
<p class="color">This is some paragraph with an HSL color value.</p>
<p>This is some paragraph for example.</p>
</body>
</html>Valeurs
| Valeur | Description | Tester |
|---|---|---|
| color | Décrit la couleur du texte et des décorations de texte. Les noms de couleur, les codes couleur hexadécimaux, rgb(), rgba(), hsl(), hsla() peuvent être utilisés. | Tester » |
| initial | Définit la valeur par défaut de la propriété. | Tester » |
| inherit | Hérite la propriété de son élément parent. |
Pratique
Quels sont les trois moyens de spécifier des couleurs en CSS selon le contenu de l'URL fournie ?