Des variables dans la feuille CSS
Une variable c'est sert à stocker une information. Si tu fais de la programmation (genre JavaScript) tu dois bien connaitre. Sinon, tu peux imaginer qu'une variable c'est une boite dans laquelle tu ranges quelque chose. Cette boite, elle a un identifiant, son nom qui va te permettre de récupérer le contenu de la boite et de le réutiliser à l'infini.
Tu vois où je veux en venir ? LES COULEURS !
Tu vas pouvoir les définir une fois tout en haut de la feuille CSS et si il faut modifier la couleur ça sera hyper simple & rapide !!
Synthaxe
Pour déclarer les variables faut écrire :
- Code:
-
:root{
--fondforum: #e9e9e9; /* gris */
--fondfonce: #a8b7d3; /* mauve */
--fondclair: #fff;
--bordure: #fff;
--colorone: #982786; /* magenta -- titre et sous titre*/
--colortwo: #aa3a98; /* violet clair */
--colorthree: #008d9b; /* vert-eau -- lien */
--colorfour: #512563; /* mangeta soulignement gras et italic */
}
le nom de la variable commence forcément par les 2 tirets. Ne doit pas contenir de chiffre et être en minuscule.
J'ai mis des commentaires, personnellement, ça me sert à me repérer, je préfère avoir un nom de variable générique et ensuite, précisé où la couleur est utilisée. Mais vous n'êtes pas obligé, vous pouvez mettre autant de variable que vous voulez & le nom de votre choix !
Ensuite, pour l'utiliser plus bas dans votre feuille CSS, vous appelez la variable ainsi : (en remplaçant le nom de la variable par celui que vous voulez utiliser !)
- Code:
-
h3.titreRP{
color: var(--colorone);
}
Et voilà !!
En espérant que ce tuto va autant te simplifier la vie que la mienne ! Si une question subsiste, n'hésite pas à répondre à ce sujet pour demander des éclaircissements.
Enjoy coding !
