Accueil
Mes tutoriels sur la programmation

Tutoriel CSS - sommaire


Vous pouvez me contacter via Facebook (questions, suggestions) : page facebook relative à mon site

Mon site est gratuit pour les visiteurs (et sans publicité) mais sachez qu'il a un coût ...
Signé : l'auteur.

CSS3 : variables dans la feuille de style

Le code HTML d'une page web

<body> <header> <h1>Titre principal</h2> <h2>Zone de navigation</h2> <button>menu1</button><button>menu2</button><button>menu3</button><button>menu4</button> </header> <main> <article> <h2>Titre article</h2> <p>Texte dans article ... <br>Blabla ... <br>Blabla ... <br>Blabla ... <br>Blabla ... <h3>Tableau</h3> <table> <tr><th>col 1 </th><th>col 2</th></tr> <tr><td>...</td><td>...</td></tr> <tr><td>...</td><td>...</td></tr> <tr><td>...</td><td>...</td></tr> </table> <h3>Image</h3> <img class ="grand" src ="../images/bikini6.jpg" > </article> <aside> <h2>Boite aside</h2> <p>Texte dans aside ... <br>Blabla ... <br>Blabla ... <br>Blabla ... <br>Blabla .. </aside> </main> <footer> <h2>boite footer</h2> <a>Retour menu</a> </footer> </body>

Trois grandes divisions : HEADER, MAIN, FOOTER

Le conteneur MAIN contient les boites ARTICLE & ASIDE.

La feuille de style : première solution

Il s'agit d'une feuille de style classique ; les valeurs des propriétés sont des constantes.

* {box-sizing : border-box; font-size : 12px; }
html {margin : 0 ; padding : 0 ; }
body {width : 90%; margin : auto ;  }
h1,h2{background : darkblue ; color : red ; text-align : center; margin-top : 10px;   }
h3 {background : lime ; color : navy ; text-align : center; font-size : 120%; }
h1 {font-size : 200%; line-height : 50px; }
h2 {font-size : 150%; line-height : 40px;}
button {background : lime ; color : navy ; 
	line-height : 30px; width : 20% ; margin : 1%; font-size : 110%; }
p {background : pink ; color : purple; padding : 5px ; margin : 5px ; font-size : 110%;  }
table {background : lime ; color : navy; width : 50% ; margin : auto;  }
a {display : inline-block ; background : pink ; color : purple; font-size : 120%;  }
img.grand {width : 50%; display : block; margin : auto; }
main {width : 100% ; margin: auto;display : flex; flex-direction : row ; }%
article {width : 70% ; }
aside {width : 30%; }

Notez que les "enfants" de la boite MAIN (ARTICLE & ASIDE) sont disposés avec la méthode "flexbox".
Notez aussi que les boites seront "border-box".

Le rendu

Observez le rendu !

Je suis d'accord avec vous. Les couleurs sont moches.
Mais c'est volontaire !

Deuxième solution : feuille de style avec des variables

Nous allons créé et utiser des variables CSS dans la feuille.
En particulier pour définir les couleurs. Ainsi on pourra facilement et très rapidement faire des tests.

* {box-sizing : border-box; font-size : 12px; }

/* création et initialisation de variables */
html { --largeur1 : 90% ;--largeur2 : 100%;--largeur3 : 50%; 
--fond1 : darkblue; --texte1 : red ;
--fond2 : pink ; --texte2 : purple ;
--fond3 : lime ; --texte3 : navy; 
--marge1 : 10px; --marge2 : 5px;    }

/* règles de style avec utilisation des variables définies  */
body {width : var(--largeur1); margin : auto ;  }
h1,h2{background : var(--fond1) ; color : var(--texte1) ; text-align : center; line-height : 40px ; 
	margin-top : var(--marge1); font-size : 150%;   }
h3 {background : var(--fond3) ; color : var(--texte3) ; text-align : center; 
	line-height : 20px ; font-size : 120%; }
h1 {font-size : 200%; line-height : 50px; }
h2 {font-size : 150%; line-height : 40px;}
button {background : var(--fond3) ; color : var(--texte3) ; line-height : 30px; width : 20% ; 
margin : 1%; font-size : 110%; }
table {background : var(--fond3) ; color : var(--texte3); width : var(--largeur3); 
	width : var(--largeur3;); margin : auto;  }
a {display : inline-block ; background : var(--fond3) ; color :var(--texte3); font-size : 110%;   }
img.grand {width : var(--largeur3); display : block; margin : auto; }
p {background : var(--fond2) ; color : var(--texte2); padding : var(--marge2) ; 
	margin : var(--marge2); font-size : 120%;  }
main {width : var(--largeur2); margin: auto;display : flex; flex-direction : row ; }
article {width : 70% ; }
aside {width : 30%; }

Via le sélecteur html on définit des variables qui seront utilisables pour toute la page.
Le nom d'une variable CSS doit toujours commencer par deux tirets. Le nom d'une variable ne peut comporter le caractère "espace".
Exemple de création et initialisation de variables :

--fond1 : darkblue; --texte1 : red ;

Pour utiliser une variable comme valeur d'une propriété il faut l'entourer de la fonction var().
Exemple d'utilisation d'une variable préfinie :

background : var(--fond3) ; color : var(--texte3) ;

Et si on manipule une variable qui n'a pas été définie ?
La fonction var() admet un deuxième paramètre !

background : var(--fond3, lime) ; color : var(--texte3,navy) ;

La couleur "lime / navy" sera utilisée par le navigateur s'il ne trouve pas les variables "--fond3 / --texte3"

Le rendu avec la feuille de style contenant des variables

Observez le rendu !

Le rendu est strictement identique à celui avec une feuille de style classique.
Bien évidemment les variables CSS peuvent être utilisées dans le cadre d'une feuille de style externe.

Intérêt pratique

Pour modifier l'apparence de la page il suffit de changer les valeurs initiales des variables. Donc vous ne modifiez que la deuxième règle de style (celle qui débute avec le sélecteur "html").

Changements opérés dans cette règle de style :

 
--fond1 : skyblue; --texte1 : navy ;
--fond2 : blue ; --texte2 : white ;
--fond3 : lavender ; --texte3 : purple;
Observez de nouveau le rendu

C'est beaucoup plus joli dans le choix des couleurs.