Les elements <span> et <div> servent a regrouper et structurer un document et seront souvent utilises avec les attributs class et id.

Dans cette lecon, nous verrons de plus pres l'utilisation des deux elements <span> et <div>, et leur importance centrale pour CSS.

Le regroupement avec <span>

L'element <span> est ce qu'on pourrait appeler un element neutre, qui n'ajoute rien au document en lui-meme. Mais CSS peut utiliser l'element <span> pour ajouter des caracteristiques visuelles a des parties specifiques du texte des documents.


<p>Tot couche et tot leve
fortifie, enrichit et rend avise.</p>

Supposons que les avantages aux yeux de M. Franklin de ne pas gaspiller son sommeil soient accentues en rouge. Dans ce but, nous pouvons baliser les avantages avec des elements <span>. Chaque span recoit alors un attribut class defini ainsi dans la feuille de style :


<p>Tot couche et tot leve
<span class="benefit">fortifie</span>,

<span class="benefit">enrichit</span>
et <span class="benefit">rend avise</span>.</p>


span.benefit {
	color:red;
}

Bien sur, vous pouvez aussi utiliser l'attribut id pour ajouter du style aux elements <span>, tant que vous appliquez un id unique a chacun des trois elements <span>, comme appris dans la lecon precedente.

Le regroupement avec <div>

Alors que <span> s'utilise dans un element de type bloc comme vu precedemment, <div> sert a regrouper un ou plusieurs elements de type bloc.

Hormis cette difference, le regroupement avec <div> fonctionne plus ou moins de la meme facon. Voyons un exemple avec deux listes de presidents des etats-Unis repartis selon leur affiliation politique :



<div id="democrats">
<ul>
<li>Franklin D. Roosevelt</li>
<li>Harry S. Truman</li>
<li>John F. Kennedy</li>
<li>Lyndon B. Johnson</li>

<li>Jimmy Carter</li>
<li>Bill Clinton</li>
</ul>
</div>

<div id="republicans">
<ul>

<li>Dwight D. Eisenhower</li>
<li>Richard Nixon</li>
<li>Gerald Ford</li>
<li>Ronald Reagan</li>
<li>George Bush</li>

<li>George W. Bush</li>
</ul>
</div>

Dans notre feuille de style, nous pouvons utiliser le regroupement exactement de la meme facon que precedemment :


#democrats {
	background:blue;
}

#republicans {
	background:red;
}

Dans les exemples precedents, nous avons utilise les elements <div> et <span> pour des choses tres simples telles que les couleurs du texte et de l'arriere-plan. Ces deux elements ont le potentiel pour des choses beaucoup plus evoluees, mais nous ne les abordons pas ici. Cela interviendra plus loin dans le tutoriel.

Resume

Dans les lecons 7 et 8, vous avez vu les selecteurs id et class, et les elements span et div.

Vous etes maintenant capable de regrouper et d'identifier, plus ou moins, toutes les parties d'un document, ce qui constitue un grand pas vers la maitrise de CSS. Dans la lecon 9, nous introduirons le modele des boites.

Lecon 8 : Le regroupement d'elements (span et div)

Le regroupement avec <span>

Le regroupement avec <div>

Resume