Boîte et bloc

Les boîtes en CSS

Ceux qui ont étudié le XHTML savent très bien qu'il y a deux sortes de balises : les balises de type inline et les balises de type block. En CSS, les éléments de type bloc comme div, ul, form, blockquote, pre, servent souvent à la mise en page générale de la page. On peut donc créer de grands rectangles qu'on appellera désormais les boîtes. Ils peuvent contenir soit d'autres éléments du même type, soit des éléments de type "en-ligne"

Les éléments de type "en-ligne" sont juste des conteneurs plus petits que bloc, avec un comportement spécifique. Parmi ces éléments on distingue par exemple A, B, IMG, INPUT, U, SPAN

Grosso modo, les types bloc peuvent contenir des types inline. Par contre, les types inline ne doivent pas contenir des types bloc.

Les balises Div et Span

Les balises div et span sont généralement conçues pour séparer la mise en forme du contenu. Grâce à elles on peut profiter de toute la gamme de propriétés qu'offre CSS pour la mise en forme.

La balise Div

La balise div est un élément de type bloc. Elle est utilisée pour faire des blocs de structure ou boîte. Ces blocs de structure peuvent être par exemple un ensemble de paragraphes. Avec cette balise on va pouvoir modifier l'aspect d'un ou plusieurs paragraphes et les mettre dans une sorte de boîte. Ainsi, souvent quand on parle de bloc ou boîte, on fait référence à un div.

Les div servent généralement à positionner un élément. C'est pourquoi on donne souvent à un div une identité unique à l'aide de l'attribut id. Mais on peut aussi lui assigner des classes si l'on veut utiliser plusieurs fois le même type de bloc dans une même page.

Code CSS :

.boitenoire{


background-color:#000000;
color: #FFFFFF;
font-size:24px;
width:6cm;
height:4cm;


}

Code XHTML :

<div id="boitenoire">boîte noire</div>

La balise Span

Si la balise div permet de spécifier un bloc de texte en entier, la balise span s'applique pour une lettre, un mot ou quelques mots seulement. Autrement dit, les balises <span> ... </span> servent à modifier un morceau de texte contenu dans des div.

C'est une balise de type inline et on l'utilise souvent pour souligner l'importance d'un mot ou d'un morceau de texte. C'est vrai qu'il y a des balises comme strong qui servent particulièrement à cela. Cependant, avec les span, il nous sera plus facile de modifier à la fois la couleur, la taille, la police d'écriture du texte. Il suffit d'utiliser des classes à l'intérieur de la balise.

Par exemple, pour surligner en vert un mot dans le div ci-dessous, voici ce qu'on doit faire :

Code CSS :

.boitespan
{


border: solid 2px #990000 ;


}



.stylespan
{


background-color:#00FF00;
text-decoration: underline;
font-weight: bold;


}

Code XHTML :

<div class="boitespan">Ce <span class="stylespan">mot</span> sera surligné en vert, mis en gras et souligné pour marquer son importance.</div>