Infini's CSS Tutorial

Pour finir cette présentation sur les feuilles de styles CSS, nous allons parler des différents types d'attributs CSS qui vous sont proposés. En effet, CSS définit plus de 70 attributs de styles utilisables pour un sélecteur quelconque.

Nous allons donc voir les grandes catégories d'attributs : couleurs et images d'arrière plan - décoration de polices de caractères - mise en forme de blocs de caractères - modèle de boîtes englobantes - et le positionnement absolu. Ensuite nous parlerons aussi plus précisément du modèles de boîtes englobantes.

Sachez aussi que chaque navigateur spécifie ses propres attributs supplémentaires. Pour de plus amples informations sur ces attributs, veuillez vous référer au site adapté en fonction du navigateur considéré.

Nous avons précédemment parlé des attributs margin, padding et border : ils sont fortement liés au modèle de boîtes englobantes CSS. Quelques précisons à ce sujet me semble être utiles.

Tous éléments (tous tags) occupe un (ou plusieurs) espace(s) rectangulaire(s) à l'écran. Cette zone rectangulaire est subdivisées en sous-rectangle. Le rectangle de base contient la donnée du tag (son texte). Autour de cette zone, une marge interne (le padding) est réservée. Cette zone est visualisée avec la couleur de fond de l'élément considéré.

La marge interne est entourée d'une bordure. Si vous spécifiez une largeur et une hauteur pour l'élément, ces tailles englobent aussi la marge interne et la bordure. Enfin, la bordure est séparée du reste par l'intermédiaire d'une marge externe. Cette marge est transparente.

Le bout de code suivant permet de mettre en évidence ces différentes zones autour d'un tag DIV. Le résultat est ensuite présenté. Notez bien que, dans l'exemple, deux classes de styles sont utilisées.

<STYLE>
	    .Conteneur {
	        color: #FF8000;
	        font-family:verdana;
	        font-weight: bold;
	        background: rgb(210,210,255);     /* Bleu pastel */
	    }
	
	    .Contenu {
	        background: rgb(255,226,198);     /* Rose pale */ 
	        text-align: center;
	        padding: 10px;
	        margin: 10px;
	        border-color: rgb(198,255,198);   /* Vert pastel */
	        border-width: 10px;
	        border-style: solid;
	    }
	</STYLE>
	<DIV Class="Conteneur" align="center">
	    <DIV Class="Contenu">
	        Content
	    </DIV>
	</DIV>

Au terme de ce chapitre, nous en avons finit avec la présentation des styles CSS. J'espère, au travers de ces quelques pages, vous avoir convaincu de l'intérêt des feuilles de styles dans la mise en oeuvre de vos sites web.

Je rappelle bien que ce cours ne constitue qu'une introduction aux CSS. Pour de plus amples informations, veuillez vous rediriger sur le site du W3C : cette technologie (ainsi que bien d'autres) y sont complètement décrites. Mais attention tout de même : le W3C constitue une référence en la matière, mais pas forcément une bon tutorial pédagogique.