CSS3 – La balise <div> et la notion de conteneur

LEÇON

 

La balise <div>

  • La balise <div> est une balise neutre qui sert de conteneur.
  • Le mot div évoque division ou section.
  • La balise <div> est utilisée pour grouper des éléments afin de pouvoir appliquer des styles au niveau du groupe.
  • C'est une balise très utile mais souvent sur-employée (on n'a pas toujours besoin d'un div - si le hiérarchie de la page contient trop de balise div superflue, elle devient difficile à lire/entretenir pour le programmeur).

 

Pourquoi et comment grouper les éléments ?

 

Exemple.

Voici un document HTML et son CSS qui définissent une page avec trois paragraphes. Les deux premiers paragraphes ont un fond gris.

 

ex1_sans_div.css

body {
  font-size:2.0em;
}

p.different {
  background-color:#c0c0c0;
  border:1px solid gray;
  padding:10px;
}

ex1_sans_div.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Exemple</title>
        <link rel="stylesheet" type="text/css" href="ex1_sans_div.css">
    </head>
    <body>
      <p class="different">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer elementum consectetur arcu, in consectetur est viverra id. Fusce tincidunt, quam at accumsan feugiat, dui enim porta diam, non feugiat quam lectus ac magna.
      </p>
      <p class="different">
        Fusce dignissim magna in erat fermentum, eget maximus nibh lacinia. Donec maximus lorem dolor. Sed ut nibh erat. Fusce et vestibulum massa. Ut eu lacinia enim. In eu sem eget sem auctor egestas eget facilisis odio.
      </p>
      <p>
        Fusce in ipsum vel orci faucibus vestibulum quis a leo. Duis enim orci, placerat eleifend massa nec, facilisis placerat ipsum. Cras sit amet lectus tellus. Curabitur iaculis tincidunt tortor sit amet pharetra.
      </p>
    </body>
</html>

 

Affichage sous Chrome :

ex1_sans_div

 

Remarquer :

  • la couleur de fond et la bordure sont appliquées individuellement sur chacun des deux premiers paragraphes

 

Imaginer maintenant qu'on veut appliquer le même genre de style (fond gris et bordure) aux deux paragraphes ensemble.

La balise <div> nous aide à grouper les éléments, et elle ouvre la porte à l'application des styles au niveau du groupe.

Voici les même fichiers avec les modifications nécessaires :

 

ex1_avec_div.css

body {
  font-size:2.0em;
}

div.different {
  background-color:#c0c0c0;
  border:1px solid gray;
  padding:10px;
}

ex1_avec_div.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Exemple</title>
        <link rel="stylesheet" type="text/css" href="ex1_avec_div.css">
    </head>
    <body>
      <div class="different">
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer elementum consectetur arcu, in consectetur est viverra id. Fusce tincidunt, quam at accumsan feugiat, dui enim porta diam, non feugiat quam lectus ac magna.
        </p>
        <p>
          Fusce dignissim magna in erat fermentum, eget maximus nibh lacinia. Donec maximus lorem dolor. Sed ut nibh erat. Fusce et vestibulum massa. Ut eu lacinia enim. In eu sem eget sem auctor egestas eget facilisis odio.
        </p>
      </div>
      <p>
        Fusce in ipsum vel orci faucibus vestibulum quis a leo. Duis enim orci, placerat eleifend massa nec, facilisis placerat ipsum. Cras sit amet lectus tellus. Curabitur iaculis tincidunt tortor sit amet pharetra.
      </p>
    </body>
</html>

 

Affichage sous Chrome :

ex1_avec_div

 

 


 

EXERCICES

 

1. Créer un fichier HTML et un fichier CSS pour reproduire la page suivante.

  • Utiliser la balise div - mais faire attention de ne pas sur-utiliser la balise div.
  • Remarquer et reproduire les marges et padding

css_div_exercice1