»Le modèle de boîtes
source : http://openweb.eu.org/articles/dimensions_boites_css/
- d'une zone de contenu : tout ce qui est contenu dans la boite (d'autres boites, du texte, des images, des formulaires, ...)
- d'une zone de marge interne (padding) : l'espace entre le contenu et les bords de la boîte
- d'une zone de bordure (border) : délimite le contour de la boîte
- d'une zone de marge externe (margin): l'espace en tre le bord de la boîtes et les éléments mitoyens
Il est également possible de définir pour une boîte
- La dimension: largeur (width) et hauteur (hieght) en pixels, en cm, en %, ...
- L'arrière plan (background): une couleur de fond ou une image pouvant être répétée ou non en motif
- La couleur du texte (color) de la zone de contenu
La plupart des propriétés énoncées sont déclinables, par exemple:
h1{
border: 1px solid red;
}
Affichera le rendu suivant
Mon titre
mais on pourrait vouloir des bords différents pour chaque côté dee la boîte
h1{
border-top: 1px solid red;
border-bottom: 4px groove pink;
border-left: 3px dashed #ffffff;
border-right: none;
}
Mon Titre
Notez qu' Internet Explorer ne gère pas les boîtes comme les autres navigateurs. Vous pouvez consultez la source qui m'a servi à faire cette page pour plus de détails sur le problème.
On peut aussi écrire des règles avec border-style, border-width, border-color, et on a le même genre de déclinaison pour margin, padding, ...
Bref se mettre tout ça dans la tête, alors qu'on a déjà du mal à se souvenir des quelques balises (X)HTML que nous avons vues à la section précédente, semble être "mission impossible".
Je vous propose donc ici de se faire aider :
- Par une liste plus ou moins exhaustive des propriétés CSS : http://slaout.linux62.org/html_css/doc_css.html
- Si vous adhérez déjà pleinement à PSPad vous pouvez opter pour TopStyle Lite, qui est un graticiel, et qui est parfaitement intégré dans PSPad, mais qui ne devrait pas fonctionner sur les postes informatiques de la salle, puisque vous n'avez pas les droits suffisants pour installer un programme.
- Sinon il est peut être temps de tester un éditeur HTML WYSIWYG (What You See Is What You Get!). Je vous propose NVU, développé par la Mozilla (la même équipe qui développe FireFoxe et Thunderbird) complètement libre ça va s'en dire, et qui se pose comme concurrent direct de Dreamweaver de Macromédia. Il existe une version zip en français (http://frenchmozilla.sourceforge.net/nvu/) de ce programme ce qui le rend utilisable sur les postes informatiques de la salle. Sur cette même page vous trouverez un tutoriel d'utilisation en français.
Voilà maintenant que nous sommes affranchis du code, je vous propose quelques astuces CSS souvent utilisées par les webmasters
