Cours CSS : les balises structurales

Utilité

Il fallait penser à un système pour "déconnecter" certains morceaux de paragraphe ou plusieurs paragraphes de cette logique d'écriture avec des feuilles de style.
Ce sont les balises Structurales qui créaient ainsi des petits blocs particuliers dans le document sans devoir repasser par les éléments structurels du Html classique.

DIV

DIV est une balise de division qui permet de définir un bloc de texte particulier.

Procédures :

Intégrer chaque grande portion de document dans une balise DIV particulière.
Utiliser une feuille de style pour chaque DIV.

<HEAD>
<STYLE type="text/css">
.zone{font-size: x-small}
</STYLE>
</HEAD>
<BODY>
La balise <DIV>
<DIV class=zone>
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
</DIV>

Il est à noter que Netscape ne supporte pas l'imbrication de DIV (et généralement des balises de bloc) et les gère très mal. Les DIV en cascades sont donc à éviter.

SPAN

SPAN est une balise de marquage, qui va considérer une petite portion particulière de texte. Elle va servir à mettre en valeur des citations, des exemples, des extraits ...
On peut l'utiliser de la même manière que DIV avec des feuilles de style. Elle s'utilise également couramment avec des feuilles de style intra-lignes.

Ainsi, si je voulais écrire :

Toto est beau.

Le code serait :

<STYLE type="text/css">
.element {font-size: x-large; color: navy}
</STYLE>
Toto est <SPAN class=element>beau</SPAN>.

Nous vous informons que ce cours constitue une œuvre protégée en France par le Code de la Propriété Intellectuelle, et à l’étranger par les conventions internationales en vigueur sur le droit d’auteur. La violation de l’un des droits d’auteur de l’œuvre est un délit de contrefaçon. Il est donc interdit, à titre privé ou public, de reproduire, copier, vendre, revendre ou exploiter, que ce soit dans un but commercial ou purement gratuit, ce cours, sauf accord exprès et préalable de son auteur.

Cours CSS N°4 : les balises structurales