Conception de pages pour un navigateur

Les styles pour les blocs

Les différents é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...

 

Il existe une écriture condensée pour définir les trois styles d'une bordure.

Exemple : border: 2px solid red;

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)