CSS : Cascading Style Sheet
Les différentes catégories d'attributs CSS

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é.

Les différentes catégories d'attributs de styles

Couleurs et images d'arrière plan

  

Attributs

Descriptif

Exemple
color Permet de fixer la couleur d'avant-plan. color: purple;
color: rgb(255,0,255);
color: #FF00FF
background Permet de fixer la couleur d'arrière-plan. background: red;
background: rgb(255,0,0);
background: #FF0000
background-image Permet de fixer une image d'arrière plan. Une image d'arrière plan prévaut sur la couleur d'arrière-plan. background-image: url('http://hostname/reps/fichier.html');

Décoration de polices de caractères

  

Attributs

Descriptif

Exemple
font-family Cet attribut permet de spécifier la police de caractère à utiliser. Au cas ou la police n'existerait pas, il est possible de spécifier une liste de choix. La première police trouvée à partir de la gauche est appliquer. font-family : verdana, arial;
font-weight Permet de fixer le poids (ou la graisse) de la police de caractères. font-weight: bold;
font-weight: bolder;
text-decoration Permet de décorer la police de caractères text-decoration: underline;
text-decoration: overline;
text-decoration: strike;

Mise en forme de blocs de caractères

  

Attributs

Descriptif

Exemple
text-align Cet attribut spécifie l'alignement du bloc texte. text-align: center;
text-align: left;
text-align: right;
text-align: justify;
text-indent Permet de définir le retrait de la premier ligne du bloc de texte. text-indent: 10pt;
text-indent: 15px;
text-indent: 5%;

Gestion des boîtes englobantes

  

Attributs

Descriptif

Exemple
width Permet de spécifier la largeur de l'élément, taille de bordure comprise. width: 80pt;
width: 100px;
width:80%
height Permet de spécifier la hauteur de l'élément, taille de bordure comprise. height: 25%;
padding
padding-top
padding-bottom
padding-left
padding-right		 Le padding correspond à l'espace interne d'une cellule (entre le contenu et la bordure). Plutôt que de spécifier le padding pour les quatre cotés, on peut le spécifier individuellement coté par coté. Cette marge interne prend comme couleur, celle de l'arrière plan de l'élément considéré. padding: 5px;
padding-bottom: 10px;
margin
margin-top
margin-bottom
margin-left
margin-right		 La marge externe n'est pas prise en compte dans la taille de l'objet. Elle est de plus transparente. Vous pouvez aussi la spécifier individuellement pour chaque coté. margin: 10px;
margin-left:10%;
margin-right: 10%;
border
border-style
border-width
border-color
border-top-style
...		 Ces attributs permettent de spécifier les caractéristiques de la bordure (son style de bordure, sa taille et sa couleur) border: 2px solid #FF00FF;
border-style: solid;
border-width: 2px;
border-color: #FF00FF;
border-top-style: ridge;

Positionnement absolu

  

Attributs

Descriptif

Exemple
position Cet attribut peut prendre deux états : soit relative, soit absolute. Cela permet d'indiquer si l'on reste en positionnement relatif (valeur par défaut) ou si l'on passe en positionnement absolu (dans ce cas top et left valent, par défaut, 0). position: absolute;
display Permet d'indiquer quel est le mode d'affichage de l'élément. Trois états sont utilisables : none (l'élément n'est pas affiché : il occupe zéro pixels) - inline (il s'affiche à la suite de l'élément précédent) - block (des retours à la ligne sont insérés avant et après l'élément). display: none;
display: inline;
display: block;
top Distance entre l'élément et le haut de la page web. top: 10px;  /* pixel */
top: 10pt;   /* points */
top: 20%;
left Distance entre l'élément et la bordure gauche de la fenêtre. left: 150px;
left: 100pt;
left: 15%;
z-index Permet de fixer le niveau de profondeur d'un élément. Les éléments de plus grosses valeurs seront affichés en avant-plan. z-index: 1000;

Le modèle de boîtes englobantes

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.




    

        Content

Content

Conclusion

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.

Besoin d'une formation : vous recherchez un centre de formation en informatique pour suivre un stage sur les langages HTML et CSS ? Si tel est le cas, consultez le plan de cours suivant Les langages HTML et CSS.

ATTENTION : Les tutoriaux Infini Software vous sont fournis dans le but de vous aider à acquérir les compétences nécessaires à l'utilisation des langages ou des technologies considérés. Infini Software ne pourra nullement être tenu responsable de l'utilisation des informations présentes dans ces tutoriaux. De plus, si vous remarquez des erreurs ou des oublis dans ce document, n'hésitez surtout pas à nous le signaler en activant ce lien.

Dominique LIARD - © 2007 SARL Infini Software - Tous droits réservés
Les autres marques et les noms de produits cités dans ces documents sont la propriété de leurs éditeurs respectifs.