Révisions CSS2

Plutôt que de lister toutes les propriétés CSS2 il me semble préférable de rappeler les principales au travers d'un exemple.
Dans les différentes versions de la page le code HTML reste identique mais par contre le CSS est de plus en plus complexe.

Exemple : le code HTML

Dans toutes les versions de la page ce code HTML sera identique !
Par contre la feuille de style sera de plus en plus complexe.

<body> <h1>Titre principal</h2> <div id ="entete"> <h2>Titre de l'en-tête</h2> <p>Corps du texte de la boite entete</p> <br>Blabla ...<br>Blabla ... <br>Blabla ... <br>Blabla ... <br>Blabla ... <br>Blabla ... </p> </div> <!-- fin boite entete --> <hr> <div id ="menu"> <h2>Tite du menu</h2> <a href ="#">Lien 1 </a> <a href ="#">Lien 2 </a> <a href ="#">Lien 3 </a> </div> <!-- fin boite menu --> <hr> <div id ="corps"> <h2>Titre du corps de la page</h2> <div id ="images"> <img src ="../images/latino_bikini.jpg" alt ="jolie fille" class ="grand"/> <img src ="../images/noire_bikini.jpg" alt ="jolie fille" class ="grand" /> </div> <!-- fin boite images --> <div id ="css" class ="texte"> <p> <img src="../images/css3_logo.jpg" class ="logo"> Haec igitur Epicuri non probo, inquam. De cetero vellem equidem aut ipse doctrinis fuisset instructior est enim, quod tibi ita videri necesse est, non satis politus iis artibus, quas qui tenent, eruditi appellantur aut ne deterruisset alios a studiis. quamquam te quidem video minime esse deterritum. </p> </div><!-- fin boite css --> <div id ="html" class ="texte"> <p> <img src="../images/html5_logo.png" class ="logo"> Sed ut tum ad senem senex de senectute, sic hoc libro ad amicum amicissimus scripsi de amicitia. Tum est Cato locutus, quo erat nemo fere senior temporibus illis, nemo prudentior; nunc Laelius et sapiens (sic enim est habitus) et amicitiae gloria excellens de amicitia loquetur. Tu velim a me animum parumper avertas, Laelium loqui ipsum putes. C. Fannius et Q. Mucius ad socerum veniunt post mortem Africani; ab his sermo oritur, respondet Laelius, cuius tota disputatio est de amicitia, quam legens te ipse cognosces. </p> </div> <!-- fin boite html --> <div id ="divers"> <table> <caption>Un tableau à trois colonnes</caption> <tr><th>col 1</th><th>col 2</th><th>col 1</th></tr> <tr><td>aaaa</td><td>12.10</td><td>TR</td></tr> <tr><td>bbbb</td><td>15.2</td><td>TN</td></tr> <tr><td>cccc</td><td>8.40</td><td>TN</td></tr> </table> <ul>Liste à  puces : <li>item 1</li> <li>item 2</li> <li>item 3</li> </ul> <ol>Liste numérotée: <li>item 1</li> <li>item 2</li> <li>item 3</li> </ol> </div> <!-- fin boite divers --> <a href ="#">Retour haut de page </a> </div> <!-- fin boite corps --> </body>

Notez que chaque image se voit affectée de l'attribut class avec la valeur "grand" ou "logo".
Toutes les boites balisées avec DIV ont un ID et certaines se voient affectés la classe "texte".

Observez les liens (balises A). Un lien dont la valeur de l'attribut href = "#" permet un retour haut de page.

Remarquez que les images avec la classe "logo" sont contenues dans la balise P ! C'est une obligation pour que le texte puisse éventuellement encadrer l'image (voir version 4 de la page).

Le code HTML est encodé en HTML4. En HTML5 les DIV id ... seraient remplacés avantageusement par les balises structurantes (header, nav, section, article, aside, footer).

Les différentes versions de la page d'exemple

Version 1 : pas de CSS

La partie HEAD de la page se résume alors à peu de choses

<html> <head> <title>hypothèse 1 : pas de CSS</title> </head>

Test de la première version

Rendu avec navigateur !

La page s'affiche mais c'est très moche !

Révisions du CSS2

Toujours à partir du même exemple nous allons maintenant réviser le CSS version 2.
Le texte HTML de la partie BODY est toujours inchangé mais à mesure des versions on rajoute du CSS2 de plus en plus complexe.

Version 2 : apparition du CSS dans la page

On insère dans la partie HEAD de la page le conteneur STYLE avec quelques règles de style.

Code de la partie HEAD

Le code de la partie HEAD se complexifie !

<head> <title>hypothèse 2 </title> <style> *{margin :0 ; padding : 0 ; } body {font-family : 12px ; width : 900px ; margin : 20px auto 20px auto ; border : 2px solid white ; background : purple ; color :white; } img.grand {width : 40%; } img.logo {width : 15%;} </style> </head>

Grâce à la première règle de style je supprime les marges externes et internes par défaut des balises titres (H1 à H6).
La page aura une largeur de 900 pixels (hors marges) et sera centrée horizontalement dans l'écran et sera bordurée par un trait blanc continu de 2 pixels d'épaisseur ; la bordure sera visible car le fond de page est désormais "purple" (violet).
Deux classes pour les images avec des largeurs différentes exprimées en pourcentage.

Dans le cadre d'un site adaptatif (fonctionne correctement sur tous les écrans) il faut exprimer la largeur de chaque image en % de celle du conteneur parent. Ainsi même sur un écran de smartphone l'image sera affichée totalement.

Test de cette deuxième version

Rendu avec navigateur

C'est moins moche mais pas encore terrible !

Version 3

Je vais enrichir la feuille de style interne.

Rajouts dans le conteneur STYLE

Je précise bien rajout, donc les 4 premières lignes de la feuille de style sont toujours présentes

h1 {text-align : center; font-size : 1.5em ;} h2 {text-align : center ; font-size : 130%; } a {display : block ; text-decoration : none ; font-size : 1.2em ; color : white;} table {width : 50% ; margin : 10px auto 10px auto; border : 1px solid white ; } div.texte {width : 80% ; margin : 10px ; border : 1px solid white;} li {list-style : inside ;} div {padding : 5px ;}

Désormais les textes des titres seront centrés horizontalement dans leur boite H1 et H2 (qui par défaut ont la même largeur que la page) ; la taille des caractères est augmentée par rapport à la taille de référence définie dans le sélecteur *. 1.5em ou 150% ; 130% ou 1.3em.
Les balises A sont transformée en éléments bloc pour créer un saut de ligne automatique ; plus de soulignement
Les tableaux de données seront plus large et centrés dans leur conteneur et bordurés
Les boites DIV affectées de la classe "texte" ont une largeur égale à 80% de celle de la boite parente.
Les puces ou numéros de liste ne seront plus à l'extérieur mais à l'intérieur du bloc
Les boites DIV auront une marge interne (à la bordure) de 5 pixels (en haut, en bas, à gauche et à droite) ; padding : marge interne ; margin : marge externe.

Test de cette troisième version

Rendu avec navigateur

Version 4

Encore des rajouts à la feuille de style !

Nouvelles règles

img.grand {display : block ; margin : 10px auto 10px auto ; } img.logo {float : left ; margin : 1%;} td, th {border : 1px solid white ; } h1,h2 {width : 80% ; background : black ; margin : 10px auto 10px auto ; line-height : 50px;}

Les images affectées de la classe "grand" deviennent de type "block" et donc se positionnent les unes en dessous des autres.

Les images de type "logo" vont désormais être entourées par le texte.

Les cellules du tableau vont être bordurées.

Les boites titres (H1 & H2) auront un fond noir et seront moins larges que leur parent mais seront centrés horizontalement dans celui-ci.
La ligne de titre a une hauteur de 50 pixels. Par défaut le texte est toujours centrée verticalement dans sa ligne ; donc si le titre tient sur une seule ligne il y a centrage vertical dans cette ligne et donc de facto dans la boite.

Test de cette quatrième version

Rendu avec navigateur

Ça prend forme mais il y a un nouveau "bug" ...
Par défaut la hauteur d'une boite s'ajuste au texte contenu (et pas à l'image contenue). La boite identifiée "css" n'est pas assez haute pour contenir l'image qui déborde et fait décaler celle en dessous. C'est très moche !
Le tableau est les cellules sont désormais bordurées mais ça fait donc parfois deux bordures ... (celle du tableau et celle de la cellule voisine).

Version 5

Dernière étape !

Nouvelles règles dans la feuille de style

body {border :none;} table {border-collapse : collapse ; font-family : arial, sans-serif;} td{text-align : right ; padding-right : 10px;} caption {line-height : 40px ; font-weight : bold; background : gray; } a:hover {font-size : 2em ; text-decoration : underline overline ; } div.texte {min-height : 150px; } #menu {width : 28%; float : left; } #corps {width : 68%; float : right;} #entete, #menu, #corps {background : pink; margin-top : 10px; } hr {display : none;}

En définitive je supprime les bordures pour la page. Donc body {border : none;} annule body {border : 2px solid white; ...
Dans les tableaux les cellules contigües vont fusionner ; rupture d'héritage : emploi d'une police sans empattements pour les tableaux.
Le texte dans les cellules est aligné à droite mais sans coller la bordure droite (marge interne droite).
La légende du tableau est une boite de fond gris avec le texte en gras centré verticalement dans la ligne unique donc la boite.
Sur survol d'un lien, son texte double de taille et il est souligné et surligné.
Les boites DIV de classe "texte" ont une hauteur minimale de 150 pixels.

On aborde maintenant le délicat problème du positionnement des boites.
On veut que les blocs identifiés menu et corps soient positionnés côte à côte (et non plus les uns en dessous des autres) il faut donc régler leur largeur respective pour que la somme ne dépasse 100% du conteneur. Mais ce n'est pas suffisant il faut que La boite menu "flotte" à gauche de BODY (float : left) et la boite corps "flotte" à droite (float : right).

Les lignes horizontales (balise HR) doivent disparaitre. Mais pour ne pas toucher au code HTML j'utilise encore une fois CSS. hr {display : none;} : les balises HR deviennent invisibles !

Test de cette cinquième version

Rendu avec navigateur

Optimisation

Suite aux rajouts aux différentes étapes les règles de style sont les suivantes.

La feuille de style complète

*{margin :0 ; padding : 0 ; } body {font-family : 12px ; width : 900px ; margin : 20px auto 20px auto ; background : purple; color : white; border : 2px solid white;} img.grand {width : 40%; } img.logo {width : 15%;} h1 {text-align : center; font-size : 1.5em ;} h2 {text-align : center ; font-size : 130%; } a {display : block ; text-decoration : none ; font-size : 1.2em ; color : white;} table {width : 50% ; margin : 10px auto 10px auto; border : 1px solid white ; } div.texte {width : 80% ; margin : 10px auto 10px auto ; border : 1px solid white;} li {list-style : inside ;} div {padding : 5px ;} img.grand {display : block ; margin : 10px auto 10px auto ; } img.logo {float : left ; margin : 1%;} td, th {border : 1px solid white ; } a:hover {font-size : 2em ; text-decoration : underline overline ; } h1,h2 {width : 80% ; background : black ; margin : 10px auto 10px auto ; line-height : 50px;} body {border :none;} table {border-collapse : collapse ; font-family : arial, sans-serif;} td{text-align : right ; padding-right : 10px;} caption {line-height : 40px ; font-weight : bold; background : gray; } a:hover {font-size : 2em ; text-decoration : underline overline ; } div.texte {min-height : 150px; } #menu {width : 28%; float : left; } #corps {width : 68%; float : right;} #entete, #menu, #corps {background : pink; margin-top : 10px; } hr {display : none;}

Les mêmes sélecteurs apparaissent plusieurs fois !

Optimisons la feuille de style

Il faut effectuer des regroupements, ajouter des commentaires
Par ailleurs je supprime physiquement dans le code HTML les balises HR.
Feuille de style optimisée et commentée :

/* mise en forme page */ *{margin :0 ; padding : 0 ; } body {font-family : 12px ; width : 900px ; margin : 20px auto 20px auto ; background : purple; color : white;} /* mise en forme images */ img.grand {width : 40%; display : block ; margin : 10px auto 10px auto ; } img.logo {width : 15%;float : left ; margin : 1%;} /* mise en forme titres */ h1,h2 {width : 80% ; background : black ; margin : 10px auto 10px auto ; line-height : 50px;} h1 {text-align : center; font-size : 1.5em ;} h2 {text-align : center ; font-size : 130%; } /* mise en forme liens */ a {display : block ; text-decoration : none ; font-size : 1.2em ; color : white;} a:hover {font-size : 2em ; text-decoration : underline overline ; } /* mise en forme tableaux et cellules */ table {width : 50% ; margin : 10px auto 10px auto; border : 1px solid white ; border-collapse : collapse ; font-family : arial, sans-serif;} caption {line-height : 40px ; font-weight : bold; background : gray;} td, th {border : 1px solid white ; } td{text-align : right ; padding-right : 10px;} /* mise en forme boites DIV */ div {padding : 5px ;} div.texte {min-height : 150px; } #menu {width : 28%; float : left; } #corps {width : 68%; float : right;} #entete, #menu, #corps {background : pink; margin-top : 10px; } div.texte {width : 80% ; margin : 10px auto 10px auto ; border : 1px solid white;} /* mise en forme listes et items */ li {list-style : inside ;}

Attention CSS2 c'était déjà les media queries, la possibilité de numéroter automatiquement certains titres, les positionnements fixe, absolu ou relatif, etc.
Toutes ces fonctionnalités sont abordées dans les pages suivantes du chapitre "Révisions".
Retour menu