Conception de pages pour un navigateur

Les styles pour les blocs

Les différents éléments d'un bloc

Schéma des éléments d'un bloc

La marge

Pour modifier l'épaisseur de la marge autour du bloc, il faut utiliser le style suivant :

Nom du style Valeurs possibles remarque
margin Valeur numérique Définit l'épaisseur de la marge

 

Il est possible de définir séparément la marge haute, gauche, basse ou droite. Pour cela, il faut utiliser les styles margin-top, margin-left, margin-bottom et margin-right.

La bordure

Pour modifier la bordure du bloc, il faut utiliser les trois styles suivants :

Nom du style Valeurs possibles remarque
border-width Valeur numérique (par défaut : 0) Définit l'épaisseur de la bordure
border-style dashed, dotted, double, groove, hidden, inset, none, ouset, ridge, solid (par défaut : none) Définit le style de la bordure
border-color Code d'une couleur Définit la couleur de la bordure

 

Il est possible de définir séparément la bordure haute, gauche, basse ou droite. Pour cela, il faut utiliser les styles border-top-width, border-top-style et border-top-color. De même pour border-left, border-bottom et border-right...

Le fond

Pour modifier la couleur du fond du bloc ou placer une image de fond, il faut utiliser l'un ou plusieurs des styles suivants :

Nom du style Valeurs possibles remarque
background-color Code d'une couleur Définit la couleur de fond du bloc
background-image URL de l'image Définit l'url de l'image a afficher en fond de bloc
background-repeat no-repeat, repeat, repeat-x, repeat-y Précise la façon dont l'image de fond est répétée ou non
background-position Deux valeurs (séparées par un espace) :
top, center, bottom ou une valeur numérique
left, center, right ou une valeur numérique
Permet de préciser la position de l'image de fond

 

 

L'espace entre le contenu et la bordure

Pour modifier l'espace entre le contenu et la bordure d'un bloc, il faut utiliser le style suivant :

Nom du style Valeurs possibles remarque
padding Valeur numérique Définit l'épaisseur de l'espace entre le contenu et la bordure

 

Il est possible de définir séparément l'espace haut, gauche, bas ou droit. Pour cela, il faut utiliser les styles padding-top, padding-left, padding-bottom et padding-right.

Le contenu

Le contenu est mis en forme avec les mêmes styles que pour le texte (cf. Les styles pour le texte).

A ces styles on peut ajouter :

Nom du style Valeurs possibles remarque
text-align center, justify, left, right Définit la façon dont le contenu est aligné dans le bloc
text-indent Valeur numérique Définit l'indentation du contenu du bloc (c'est à dire le retrait de la première ligne)

 

  Valid XHTML 1.0 Transitional   Valid CCS

ostralo.net