HTML et CSS

Éléments et boîtes

En CSS chaque élément d'une page HTML est considéré comme une "boîte" avec des dimensions (width, height), des marges externes (margin) et internes (padding) séparées par une bordure, un contenu.

Les éléments peuvent hériter certaines propriétés de leurs "parents". Dans l'exemple ci-contre la police, la couleur et la justification du texte sont héritées du conteneur (élément plus grand qui contient aussi ce texte). Par contre l'interligne a été modifié.

Analyse du code de l'exemple : le style de chaque élément est décrit ici dans sa balise ouvrante, grâce à l'attribut "style". La valeur de cet attribut est la liste des propriétés de style séparées par des points-virgules. Les textes en brun sont des commentaires explicatifs.

<div id="exemple" title="boîte parent"  
   <!--création de la boîte turquoise -->
style=" 
   <!--début de la définition de l'attribut "style" de la boîte turquoise-->   
border:none;
   <!--pas de bordure--> 
margin-left:5em;margin-right:1em;
   <!--largeur des marges externes gauche et droite de la boîte turquoise--> 
height:15em;width:25em;
   <!--dimensions de la boîte-->  
padding:0;
   <!--pas de marges internes (le texte "suite du contenu..." est donc contre le bord)--> 
background:#aadddd;
   <!--couleur turquoise du fond (code RVB)--> 
float:left; 
   <!--la boîte sera à gauche de son parent et habillée sur la droite par le contenu de son parent--> 
"
  <!--fin de l'attribut style de la boîte turquoise--> 
>
  <!--fin de la balise ouvrante de la boite turquoise--> 
    < div title="boîte enfant" style="
       <!--création de la boîte blanche et début de la définition son l'attribut "style"-->  
    border:solid 2px #aa0000;
       <!--bordure en trait plein, largeur 2 pixels, couleur rouge foncé (code RVB). syntaxe abrégée--> 
    margin:2em 2em 1em 2em;
       <!--marges externes de largeurs différentes, données dans le sens 
	    des aiguille d'une montre en partant du haut --> 
    height:6em;
       <!--hauteur de la boîte blanche--> 
    background:#ffffff;
       <!--fond blanc--> 
    padding:2em;
       <!--largeur de la marge intérieur--> 
    line-height:120%
       <!--hauteur de ligne 120% de la hauteur des caractères -->
    ">
       <!--fin de l'attribut style et de la balise ouvrante de la boîte blanche--> 
    Contenu de la boîte blanche ...
	   <!--texte contenu dans la boîte blanche -->
    </div>  
       <!--fermeture de la boîte blanche -->
Suite du contenu de la boîte turquoise
   <!--texte contenu dans la boîte turquoise-->
</div>
   <!--fermeture de la boîte turquoise--> 

Chaque propriété est indiquée sous la forme nom de propriété : valeur ;. Le point-virgule marque la fin d'une propriété et la sépare de la suivante.

Certaines propriétés, comme border ou margin, sont composées de plusieurs 'sous-propriétés'. On peut alors indifféremment définir ces sous-propriétés une par une, ou définir globalement la propriété-mère.

La ligne de code border:solid 2px #aa0000; équivaut ainsi à border-style:solid;border-width:2px;border-color:#aa0000;. Les valeurs indiquées font qu'on reconnaît sans ambiguïté de quelle propriété il s'agit :#aa0000 ne peut être qu'une couleur, 2px une largeur, solid un style.