Accueil

Traduction

Tutoriel CSS - sommaire

Sommaire partiellement masqué - faites défiler !

Tutoriel CSS - recherche

L'auteur : Patrick Darcheville

Vous pouvez me contacter via Facebook pour questions & suggestions : Page Facebook relative à mon site

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.

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

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 :

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 !

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 :

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

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 :

Version 4

Encore des rajouts à la feuille de style !

Règles rajoutées

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

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.

Les mêmes sélecteurs apparaissent plusieurs fois !
Il faut effectuer des regroupements, ajouter des commentaires.

Feuille de style optimisée

Ce qui donne :

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 :