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

La boîte <div> .... </div>, l'héritage des styles

Les balises <div> .... </div> définissent une boîte plus générale que celles que nous avons déjà vues car elle peut contenir 

du texte et des images
des boîtes titres
des boîtes paragraphes
d'autres boîtes <div>

Examinons la feuille de style ci-dessous. Elle définit les styles des boîtes <div1>, <div2> et des paragraphes qu'elles contiennent :


/* Fichier Style11.css */

/* fond d'écran */
body
{
background-color : rgb(0,0,0);
}

.div1
{
background-color : rgb(60,0,0);
width : 300px;
border-width : 1px;
border-style : solid;
border-color : rgb(255,255,255);
font-family : Arial;
font-size : 9pt;
color : rgb(255,255,255);
}

.div2
{
background-color : rgb(0,60,0);
margin-left : 30px;
margin-top : 30px;
margin-right : 30px;
padding : 10px;
border-width : 1px;
border-style : solid;
border-color : rgb(255,255,255);
}

.texte0
{
margin : 0;
}

.texte1
{
color : rgb(255,255,150);
margin : 0;
margin-top : 20px;
}

.texte2
{
margin-left : 30px;
margin-top : 30px;
margin-right : 30px;
margin-bottom : 30px;
padding : 10px;
font-size : 11pt;
font-style : italic;
color : rgb(200,255,255);
}

Et voici la page HTML qui utilise cette feuille de style. La boîte de style <div2> est englobées dans la boîte de style div1 :


<!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 : exemple011</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="Style11.css" />
</head>

<body>

<div class="div1">

<div class="div2">

<p class="texte0">
Cette page montre l'emboîtement des balises "div". Nous n'avons pas spécifié de hauteur pour ces boîtes; c'est la longueur du texte qui la définit. La largeur de la boîte "div2" n'est pas non plus spécifiée. Elle prend toute la largeur disponible compte tenu des marges. <br/>Les boîtes internes héritent des propriétés des boîtes qui les englobent : ce paragraphe de style "texte0" est dans la boîte "div2", elle même contenue dans la boîte "div1". Il hérite de la police de caractères de "div1". Ses marges sont annulées par son style "texte0"
</p>

<p class="texte1">
Ce paragraphe est dans la boîte "div2" et répond au style "texte1". Ce style modifie la couleur de la police de caractères héritée de "div1", annule les marges, puis fixe la marge haute à 20px
</p>

</div>

<p class="texte2">
Ce paragraphe est directement placé dans "div1" et répond au style "texte2" qui redéfinit la taille, le style de la police de caractères héritée de "div1" et fixe les marges
</p>

</div>


</body>
</html>


Afficher cette page



Notons bien que :

Les boîtes sont affichées les unes au dessous des autres dans l'ordre de leur apparition dans la page.

La marge définie dans une boîte <div> ne s'applique pas au texte qu'elle contient mais à la boîte elle-même. C'est une marge extérieure définissant l'écart entre le bord de la boîte et le bord de son conteneur.
Pour aller du bord d'un texte jusqu'à l'extrême bord de la boîte <div> qui le contient, il faut franchir s'ils existent le retrait du texte dans son paragraphe, la bordure du paragraphe, la marge du paragraphe, le retrait du paragraphe à l'intérieur de la boîte, la bordure de la boîte et enfin la marge extérieure de la boîte <div>.

Chaque boîte hérite en cascade des propriétés du conteneur qui l'englobe comme le montre l'exemple.


suivant