CSS2 : les principales propriétés

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>  <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>  <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>  <div id ="css" class ="texte"> <p> <img src="../images/css3_logo.jpg" class ="logo"> Haec igitur Epicuri non probo, inquam ... </div> <div id ="html" class ="texte"> <p> <img src="../images/html5_logo.png" class ="logo"> Sed ut tum ad senem senex de senectute ... </div>  <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>  <a href ="#">Retour haut de page </a> </div>  </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>
		<meta charset = 'utf-8'>
	</head>

La balise title permet d'afficher une légende dans la barre de titre.

La page sera lue selon le code "utf-8". Est-elle encodée en utf-8 ?

Rendu du code dans un cadre :

la page a la largeur de l'écran ; couleur de fond : blanc
le texte est en noir sauf les liens hypertextes (en bleu souligné) ; police : TNR
les images et les liens sont côte à côte et sont affichées avec leur taille d'origine
les éléments sont alignés à gauche.
la taille de texte est fonction de la hiérarchie de la balise ; taille pour H1 > taille pour H2 > taille pour P ou items de liste ; il y a aussi des espacements verticaux entre les titres
aucune bordure pour le tableau de données

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 : 100% ; background : purple ; color :white; } img.grand {width : 40%; height : auto; } img.logo {width : 15%; height :auto;} </style> </head>

Grâce à la première règle de style *{margin : 0 ; padding : 0; } je supprime les marges externes et internes par défaut des balises titres (H1 à H6).
En effet ces marges externes et internes par défaut ont l'inconvénient de varier selon les navigateurs.

Avec la deuxième règle de style, la page occupera toute la largeur de la fenêtre. C'est un règlage acceptable sur un petit écran (smartphone, tablette) mais c'est discutable sur un grand écran. Mais comme nous ne savons pas encore tester la largeur de l'écran, nous nous contenterons de cette solution.
Je rappelle que margin est une propriété raccourcie qui remplace quatre propriétés : margin-left, margin-top, margin-right, margin-bottom.
Je peux donc écrire : margin : gauche haut droite bas
Ici la marge haute étant égale à la marge basse ET la marge gauche égale à la marge droite on peut utiliser le raccourci margin avec deux valeurs : vertical horizontal. Ce qui donne donc ici : margin : 20px auto

Deux classes pour les images avec des largeurs différentes exprimées en pourcentage.
"height: auto" force le navigateur à recalculer la hauteur en fonction de la largeur afin que les proportions soient respectées. Donc pas de risque de déformation de l'image.

Rendu du code dans un cadre :

tout l'écran a un fond violet.
Le texte est aligné à gauche et colle aux bordures
les images ne sont plus affichées avec leur taille réelle mais en % de la largeur du conteneur parent ; il n'y a pas déformation de l'image car la hauteur est ajustée pour respecter les proportions
la largeur du tableau de données est "riquiqui"
Les puces et numéros des listes sont en dehors du bordurage ; c'est très laid !

Version 3

Je vais enrichir la feuille de style interne.
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; 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 larges et centrés horizontalement.
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 des marges internes (à la bordure) de 5 pixels.

Ne confondez pas "margin" (marges externes à la bordure) et "padding" (marges internes à la bordure).

Rendu du code dans un cadre :

les titres sont bien centrés horizontalement mais "collent" verticalement.
les liens sont bien disposés les uns en dessous des autres.
le tableau prend forme mais les cellules ne sont toujours pas bordurées ...
les boites DIV affectées de la classe "texte" sont moins larges désormais que leur conteneur parent (DIV identifié "corps").
les puces et numéros des items de liste sont bien à l'intérieur de la bordure
grâce aux marges internes définies au niveau du sélecteur DIV le texte ne colle plus à la bordure gauche.

Version 4

Encore des rajouts à la feuille de style !

Règles rajoutées

img.grand {display : block ; margin : 10px auto ; }
img.logo {float : left ; margin : 1%;}
td, th {border : 1px solid white ; }
h1,h2 {width : 80% ; background : black ; margin : 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 avec centrage horizontal.

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.

Rendu du code dans un cadre :

Ç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" !
Les cellules du tableau 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

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;}

Dans les tableaux, les bordures contigües fusionnent. 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 !

Rendu du code dans un cadre :

Touche finale : version 6

Feuille de style à optimiser

Suite aux rajouts aux différentes étapes la feuille de style presque définitive est la suivante. *{margin :0 ; padding : 0 ; } body {font-family : 12px ; width : 100% ; background : purple; color : 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;} 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 !
Il faut effectuer des regroupements, ajouter des commentaires.

Feuille de style optimisée

Ce qui donne : /* mise en forme page */ *{margin :0 ; padding : 0 ; } body {font-family : 12px ; width : 100% ; background : purple; color : white;} /* mise en forme images */ img.grand {width : 40%; height : auto; display : block ; margin : 10px auto; } img.logo {width : 15%; height : auto ; float : left ; margin : 1%;} /* mise en forme titres */ h1,h2 {width : 80% ; background : black ; margin : 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 ; 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 ; border : 1px solid white;} /* mise en forme listes et items */ li {list-style : inside ;}

Dans le code HTML les balises HR ayant été supprimées, la règle de style hr {display : none ;} devient inutile.

Je peux remplacer margin : gauche haut droite bas par margin : vertical horizontal si la marge haut = la marge bas et si marge gauche = la marge droite donc si les marges verticales et les marges horizontales sont égales entre elles.

Rendu du code dans un cadre :

Traduction

Tutoriel CSS - sommaire

Révisions CSS2

Nouveautés CSS3

Nouveautés CSS3 - suite

Transformations, transitions & animations

Tutoriel CSS3 - recherche

L'auteur : Patrick Darcheville

CSS2 : les principales propriétés

Exemple : le code HTML

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

Révisions du CSS2

Version 2 : apparition du CSS dans la page

Code de la partie HEAD

Version 3

Version 4

Règles rajoutées

Version 5

Nouvelles règles dans la feuille de style

Touche finale : version 6

Feuille de style à optimiser

Feuille de style optimisée