Comment utiliser les couleurs CSS ?

La couleur peut être utilisée de différentes manières en CSS : noms de couleurs prédéfinis, RVB, RVBA et utilisation de valeurs de couleur hexadécimales. Le CSS ci-dessous montre qu'en utilisant un nom de couleur prédéfini, la couleur d'arrière-plan sera définie sur « violet ».

background-color: Purple;

Il existe de nombreuses couleurs prédéfinies en CSS et vous pouvez appliquer la couleur en utilisant uniquement le nom prédéfini comme indiqué ci-dessus. Vous trouverez ci-dessous une liste de couleurs prédéfinies, ce ne sont pas toutes les couleurs prédéfinies. Ces noms ne sont pas sensibles à la casse, vous pouvez donc tous les écrire en majuscules ou en minuscules.

Noir, Blanc, Gris (ou Gris), Argent

Bleu, Aqua, Cyan)

Crimsom (rouge foncé), Rouge (rouge)

Vert (vert), DarkGreen (vert foncé), Lime (lime)

Or (or), Jaune (jaune)

Pink (rose), HotPink (rose vif), Magenta ( magenta)

Marron (marron), Marron (marron)

Violet (violet), Violet (violet)

Rouge (rouge), Vert (vert), Bleu ( bleu) ou RVB est une autre façon de définir les couleurs en CSS. La fonction RVB reçoit trois paramètres, représentant respectivement le rouge, le vert et le bleu. La valeur de chaque composant de couleur peut être n'importe quel nombre entier compris entre 0 et 255, 0 inclus étant la valeur minimale et signifie que la couleur n'est pas appliquée. Le composant bleu dans le code ci-dessous a une valeur de 0, donc aucun bleu n'est ajouté à la couleur. Nous réglons la composante rouge à sa valeur la plus brillante et la composante verte à la moitié (125). Cela le mettra en orange.

background-color: rgb(255, 125, 0);

La transparence est une autre chose qui peut être appliquée aux couleurs en CSS. En utilisant la fonction rgba, vous pouvez ajouter un paramètre supplémentaire pour définir la transparence. alpha est ce qui définit le niveau de transparence. Sa valeur est un nombre décimal de 0 à 1, donc 0,5 représente la moitié de la transparence. Le code ci-dessous définit également la couleur sur orange, mais définit également l'opacité de moitié, ce qui la rend quelque peu transparente.

background-color: rgba(255, 125, 0, 0.5);

La dernière façon de définir les couleurs en CSS est d'utiliser des valeurs hexadécimales. Les valeurs hexadécimales vont de 0 à F et donnent à chaque composante de couleur deux parties, précédées d'un symbole thématique '#'. Les parties alphabétiques du système hexadécimal de A à F correspondent aux chiffres 10 à 15. Le code CSS ci-dessous utilise une représentation hexadécimale de l'orange. La partie rouge est représentée par « FF », la partie verte par « 76 » et la partie bleue par « 00 ». La composante verte n’est pas le nombre 76, ce sont les deux parties du chiffre 7 et du chiffre 6.

background-color: #FF7600;

La conversion des valeurs hexadécimales en valeurs décimales couramment utilisées est compliquée car les valeurs hexadécimales sont en base 16 et les valeurs décimales sont en base 10. Pour convertir les couleurs hexadécimales en nombres décimaux ordinaires, nous devons multiplier chaque nombre par une puissance de 16. Ce qui suit montre comment les valeurs hexadécimales sont converties en nombres décimaux ordinaires.

FF = (15 16^0)^ + (15 16^1)^ = 15 1 + 15 16 = 15 + 140 = 255

76 = ( 7 16^0)^ + ( 6 16^1)^ = 7 1 + 6 16 = 7 + 96 = 103

00 = ( 0 16^0)^ + ( 0 16^1)^ = 0 1 + 0 16 = 0 + 0 = 0

Pour simplifier le calcul, on peut simplement prendre le premier nombre d'une couleur hexadécimale et multiplier le deuxième nombre par 16. Ceci est indiqué ci-dessous, en utilisant les mêmes chiffres que ci-dessus. En effet, tout nombre élevé à la puissance 0 est égal au nombre 1, et 16 élevé à la puissance 1 est égal au nombre 16.

FF = 15 + (15 16) = 255

76 = 7 + ( 6 16) = 103

00 = 0 + ( 0 * 16) = 0

Tutoriel recommandé : "Tutoriel CSS"

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!