CSS Mots-clés de couleur
Mots-clés de couleur CSS
CSS dispose de quelques mots-clés de couleur prédéfinis qui peuvent être utilisés avec des propriétés telles que color , background-color et border-color .
Les mots-clés spéciaux sont :
-
transparent -
currentcolor -
inherit
Le mot-clé transparent
Le mot-clé transparent est utilisé pour rendre une couleur transparente. Cela est souvent utilisé pour créer une couleur de fond transparente pour un élément.
Exemple
Ici, la couleur de fond de l'élément <div> sera entièrement transparente, permettant à l'image de fond de se montrer :
body {
background-image: url("paper.gif");
}
div {
background-color: transparent;
} Remarque : Le mot-clé transparent est équivalent à rgba(0,0,0,0). Les valeurs de couleur RGBA sont une extension des valeurs de couleur RGB avec un canal alpha, qui spécifie l'opacité d'une couleur. Lisez-en plus dans notre chapitre CSS RGB et dans notre chapitre CSS Colors .
Le mot-clé currentcolor
Le mot-clé currentcolor fonctionne comme une variable qui contient la valeur actuelle de la propriété de couleur d'un élément.
Ce mot-clé peut être utile si vous souhaitez qu'une couleur spécifique reste cohérente dans un élément ou sur une page.
Exemple
Dans cet exemple, la couleur de la bordure de l'élément <div> sera bleue, car la couleur du texte de cet élément est bleue :
div {
color: blue;
border: 10px solid currentcolor;
} Exemple
Dans cet exemple, la couleur de fond de l'élément <div> est définie sur la valeur de couleur actuelle de l'élément body :
body {
color: purple;
}
div {
background-color: currentcolor;
} Exemple
Dans cet exemple, la couleur de la bordure et la couleur de l'ombre de l'élément <div> sont définies sur la valeur de couleur actuelle de l'élément body :
body {
color: green;
}
div {
box-shadow: 0px 0px 15px currentcolor;
border: 5px solid currentcolor;
} Le mot-clé inherit
Le mot-clé inherit spécifie qu'une propriété doit hériter de sa valeur de son élément parent.
Le mot-clé inherit peut être utilisé pour n'importe quelle propriété CSS et sur n'importe quel élément HTML.
Exemple
Dans cet exemple, les paramètres de bordure de l'élément <span> seront hérités de l'élément parent :
div {
border: 2px solid red;
}
span {
border: inherit;
}