Comment définir  la couleur de fond CSS

Les propriétés css couleur texte et arrière-plan déterminent la manière dont la couleur est définie dans CSS.

Avant de pouvoir apprendre à définir les couleurs de texte et couleur de fond CSS, vous devez en savoir un peu plus sur les valeurs de couleur. Voyons ensemble comment ça fonctionne !

 

Comment utiliser une couleur de fond css ?

Les valeurs de couleur de fond css peuvent être spécifiées de plusieurs manières:

Concernant les noms des couleurs (qui seront toujours en anglais), il en existe 17. Ce sont des noms de couleur de base de mots-clés qui sont spécifiés dans CSS3. Les navigateurs modernes prennent en charge de nombreux noms de couleurs supplémentaires.

Pour du rouge basique, il suffit par exemple d’écrire :


color:red;

Dans votre feuille de style.

Les valeurs de couleurs hexadécimales quant à elles prennent le format #rrggbb, où rr est la quantité de rouge dans la couleur, gg est la quantité de vert dans la couleur, et bb est la quantité de bleu dans la couleur.

Par exemple :


color: #ff0000;

Comme vous le voyez, la couleur de fond css peut être déclinée de différentes manières.

Les valeurs de couleur hexadécimales peuvent être abrégées lorsqu’une couleur est représentée par trois paires de caractères hexadécimaux.

Par exemple, avec # ff6600, vous pouvez supprimer un caractère de chaque paire. Les valeurs de couleurs abrégées prennent le format #rgb, où r est la quantité de rouge, g est la quantité de vert dans la couleur, et b est la quantité de bleu. Par exemple, # f60 est identique à # ff6600.

Par exemple :


p {

color: #f60;

 

Voyons maintenant de plus près ce qu’est la notation fonctionnelle. Notation qui s’applique bien évidemment à la couleur de fond css.

Le notation fonctionnelle prend le format rgb (n, n, n), où n est un nombre compris entre 0 et 255 ou un pourcentage entre 0% et 100% pour les intensités rouge, verte et bleue de la couleur, respectivement.

 

Un code comme :


color: rgb(255,0,0);

Qui correspond à :


color: rgb(100%,0%,0%);

Il est possible également d’utiliser des noms de couleur au format RGBA:

 

Le paramètre supplémentaire (le « a ») spécifiant l’opacité (le canal « alpha ») de la couleur sous la forme d’un nombre décimal compris entre 0,0 (complètement transparent) et 1,0 (complètement opaque).

Ainsi, le code mis directement dans une page web…


<div style="background-color:

rgba(255,0,0,0.5)">

color: rgba(255,0,0,0.5)

</div>

…styliserait la div avec un fond rouge avec 50% de transparence.

 

 

Mais ne cherchez pas trop à vous compliquer la vie. je vous conseille d’utiliser la notation hexadécimale à trois caractères (c’est-à-dire #rgb) lorsque vous pouvez obtenir la couleur désirée et d’utiliser la notation hexadécimale à six chiffres (par exemple, #rrggbb) lorsque vous devez définir la couleur de manière plus granulaire.

 

Ensuite, vous utilisez la propriété couleur de fond css pour spécifier la couleur d’arrière-plan d’un élément

Pour créer une couleur de fond css, voici quelques exemples de ce que vous pouvez mettre dans votre feuille de style css :


p {

background-color: #CC99FF; /* ou #C9F comme on l'a vu dans l'exemple */

}

 

Maintenant que vous avez une meilleure idée de ce qu’est une couleur de fond css ou HTML, vous pouvez penser à apprendre à ajouter une image de fond css.

Faites connaître ce cours sur vos réseaux sociaux favoris :