| Accueil | table XHTML-CSS | index XHTML-CSS | précédent | suivant |

Spécification des boîtes

Nous donnons ci-dessous les attributs qui permettent spécifier les boîtes.
Pour en définir la syntaxe (règles d'écriture) nous adopterons les conventions suivantes :

| sépare les divers attributs possibles
[ ... ]encadre des attributs facultatifs

Les longueurs qui apparaissent dans les attributs sont définies de la manière suivante :

valeur=nombre cm|mm|pt|px|%|em|ex
cm, mm : centimètre et millimètre
pt : point typographique
px : pixel
% : pourcentage de la place disponible
em : taille de la police de caractère appliquée à la boîte
ex : hauteur de la lettre x de la police de caractères appliquée à la boite

A l'exception des spécifications exprimées en pixels les valeurs peuvent être non entières (exemple : 1.25cm).

Marges
margin[-left|-right|-top|-bottom|] : valeur;
Par exemple
margin : 20px; fixera toutes les marges à 20 pixelsl
margin-top : 15px; fixera la marge haute à 15 pixels

Notons que lorsque les marges ne sont pas précisées, les navigateurs adoptent des valeurs par défaut qui peuvent différer d'un navigateur à l'autre et produire des variations d'aspect sur les pages affichées. Il est donc préférable de toujours spécifier les marges.

Retrait
padding[-left|-right|-top|-bottom|] : valeur;
Par exemple
padding-left : 20px; mettra le texte en retrait de 20 pixelsl par rapport à la bordure gauche

Dimensions (largeur, hauteur)
width|height| : valeur;

Polices de caractères, décoration et alignement du texte : Voir les attributs déjà présentés

Bordures
border[-left|-right|-top|-bottom|]-style : solid|dotted|dashed|double|;
border[-left|-right|-top|-bottom|]-width : valeur;
border[-left|-right|-top|-bottom|]-color : rgb(R,G,B);

Couleur de fond
background-color : |rgb(R, G, B)|transparent|;
Définit la couleur que prendra le fond de la boîte. Si la spécification transparent est utilisée ou si l'attribut background-color est absent, la boîte laissera apparaître le fond sur lequel elle s'affiche.

Voir l'exemple ci-dessous et sa feuille de style qui donnent une idée des effets que l'on peut obtenir.


/* Fichier Style12.css */

body
{
background-color : rgb(90,0,0);
}

/* style des paragraphes */
.texte1
{
width : 100px;
font-family : Verdana;
font-size : 9pt;
color : rgb(255,255,255);
padding : 10px;
margin-left : 20px;
border-style : double;
border-width : 20px;
border-color : rgb(255,255,255);

}

.texte2
{
width : 100px;
height : 150px;
font-family : Verdana;
font-size : 9pt;
padding : 10px;
margin-left : 20px;
color : rgb(255,255,255);
border-width : 5px;
border-style : solid;
border-top-color : rgb(255,255,255);
border-bottom-color : rgb(255,255,255);
border-left-color : rgb(255,0,0);
border-right-color : rgb(255,0,0);
}



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Titre de cette page : exemple012</title>
<meta name="description" content="Phrase décrivant clairement cette page" />
<meta name="keywords" content="mot1 mot2, mot3 mot4 mot5, mot6" />
<link rel="stylesheet" type="text/css" href="Style12.css" />
</head>

<body>

<p class="texte1">
Paragraphe avec une bordure double unicolore
</p>

<p class="texte2">
Paragraphe avec une bordure simple multicolore
</p>

</body>
</html>


Afficher cette page



Nous n'avons pas précisé de hauteur pour le premier paragraphe. Elle est définie par la longueur du texte qui s'inscrit dans la boîte. Pour le deuxième paragraphe nous avons défini une hauteur largement supérieure à la place qu'occuperait le texte (si la hauteur définie est insuffisante, le texte débordera par le bas).

On peut utiliser une bordure partielle pour séparer deux paragraphes comme le montre l'exemple ci-dessous. Notons que certaines boîtes peuvent se voir attribuer des marges par défaut par le navigateur. Pour les annuler, il faut définir une marge nulle.


/* Fichier Style12a.css */

body
{
background-color : rgb(90,0,0);
}

/* style des paragraphes */
.texte1
{
width : 100px;
font-family : Verdana;
font-size : 9pt;
color : rgb(255,255,255);
padding : 10px;
margin-left : 30px;
margin-bottom : 0;
border-bottom-style : solid;
border-bottom-width : 2px;
border-bottom-color : rgb(255,255,255);

}

.texte2
{
width : 100px;
font-family : Verdana;
font-size : 9pt;
padding : 10px;
margin-left : 30px;
margin-top : 0;
color : rgb(255,255,255);
}


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Titre de cette page : exemple012a</title>
<meta name="description" content="Phrase décrivant clairement cette page" />
<meta name="keywords" content="mot1 mot2, mot3 mot4 mot5, mot6" />
<link rel="stylesheet" type="text/css" href="Style12a.css" />
</head>

<body>

<p class="texte1">
Paragraphe avec une bordure à un seul coté
(en bas) qui le sépare du paragraphe suivant.
</p>

<p class="texte2">
Paragraphe sans bordure. La bordure du paragraphe
précédent sépare les deux paragraphes.
</p>

</body>
</html>


Afficher cette page



Une dernière précision sur les marges et les retraits qui peuvent parfois prêter à confusion. Marges et retraits s'ajoutent aux dimensions définies pour les boîtes. Prenons l'exemple suivant :

width : 200px;
padding : 15px;
border-width : 2px;
margin-left : 20px;
margin-right : 20px;

La largeur totale qu'occupera une boîte ainsi définie sera de 274 pixels (200 pixels de largeur + deux marges de 20 pixels + deux épaisseurs de bordure de 2 pixels + deux retraits de 15 pixels)


suivant