Avec la balise DIV vous allez pouvoir modifier l'aspect d'un ou plusieurs paragraphes à l'aide de classes ou sous-classes se trouvant dans l'en-tête source de la page ou dans un fichier externe.
De même vous pouvez effectuer ces effets en proposant un style appliqué directement au paragraphe, sans faire appel à ces règles citées ci-dessus.
Cette balise DIV est souvent associée avec"class" (et "ID") et se retrouve souvent pour positionner un élément.
Si (page précédente) la balise SPAN s'appliquait pour une lettre, un mot ou quelques mots seulement ici avec la la balise DIV vous modifiez des paragraphes.
Source dans HEAD de cette page
</TITLE>
<style type="text/css">
.marge { margin-left: 75px ; font-style: italic ; }
.jaune {background-color: #FFFF00 ;}
.vert {background-color: #00FF00 ;}
.essai-texte { font-style: italic ; color: green ;}
.essai-grand { font-size: 16pt ; }
.essai-fond { background-color: #CCFF99 ;}
</style>
<HEAD
1 - Code placé dans BODY
utilisation des classes ou sous-classes
<div class="marge">Avec le choix de la sous-classe " .marge" vous obtenez d'abord sa spécificité d'un écartement de 75px du bord de la marge gauche (sera vu plus loin) et d'un texte en italique. Pour le reste il y a héritage direct du parent "p"</div>
Résultat de l'exemple 1
2 - Autre code dans BODY
utilisation de votre "style" personnel
<div style="font-family: verdana, times, sans-serif ; color: green ; font-size: 12pt ; text-decoration: underline ; background-color: #FFFFFF ;"> Ici vous ne tenez plus compte des règles CSS mais appliquez un STYLE de votre choix à un ou plusieurs paragraphes de votre page. De ce fait il n'y a plus notion d'héritage et vous devez reprendre les déclarations conformes à ce langage.</div>
Résultat de l'exemple 2
"text-decoration: underline ;" qui a servi à souligner le texte, sera vu plus loin.
Il est possible de définir un ou plusieurs paragraphes qui prennent, outre les styles habituels, une couleur de fond propre à faire ressortir le contenu à l'aide d'une déclaration associée à DIV. Noter que pour rester en conformité avec les services de validation du CSS il faut ajouter la déclaration "color:xxxx" qui comme toujours vient suppléer les navigateurs anciens qui ne supporteraient pas les feuilles de style.
3 - Code dans BODY
<DIV STYLE="font-family: arial, sans-serif ; background-color:
yellow ; font-size: 12pt ; color: black ; " >Il est possible de
définir un ou plusieurs paragraphes qui prennent, outre les styles
habituels, une couleur de fond propre à faire ressortir le contenu
à l'aide d'une déclaration associée à
DIV.
<br>
<br>
Noter que pour rester en conformité avec les services de validation
du CSS il faut ajouter la déclaration "color:xxxx"
qui comme toujours vient suppléer les navigateurs anciens qui ne
supporteraient pas les feuilles de style.</DIV>
Résultat exemple 3
Noter que pour rester en conformité avec les services de validation du CSS il faut ajouter la déclaration "color:xxxx" qui comme toujours vient suppléer les navigateurs anciens qui ne supporteraient pas les feuilles de style.
Dans ce cas un peu particulier pour grouper les deux paragraphes distincts, il faut remplacer les "p" d'interligne par deux sauts de ligne "br". Vous utilisez dans cet exemple un corps de 12pt et de ce fait vous n'héritez pas de "p" et devez reprendre les familles. Si par contre vous aviez choisi de conserver le corps de 10pt (valeur de "p") vous pouviez directement appliquer <p style="background-color: yellow ; font-size: 12pt ; color:black ; " > xxxxxxxxxxxx </p>. En essayant un petit exercice tout va vous sembler évident.
4 - Code SPAN dans BODY d'après les sous-classes de HEAD
Couleur de fond sur une partie de texte seulement
Code dans BODY
<P align="center"><b><span
class="jaune">C'est jaune</span></b></P>
<P align="center"><b><span class="verte">C'est
vert</span></b></P>
Résultats exemple 4
C'est jaune
C'est vert
5 - Code dans BODY d'après les sous-classes de HEAD
Couleur de fond sur une ligne de texte seulement
Vous pouvez aussi arriver à un résulat presque semblable, et toujours avec le même code CSS de départ placé dans HEAD, dont la couleur s'étend cette fois sur la ligne entière.
Code 5 dans BODDY
<p class="jaune">c'est jaune</p>
<p class="vert"> c'est vert</p>
Résultat exemple 5
c'est jaune
c'est vert
6 - Balise DIV dans HEAD avec regroupement des propriétés
Voici une mise en place de règles pour un paragraphe avec l'aide de la balise DIV, qui offre l'avantage de réduire le code source sans modifier le résultat.
Code dans BODY
<DIV class="essai-texte essai-fond essai-grand"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis te feugifacilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. </DIV>
Résultat exemple 6
Très important : Pour que ça marche, à la fin de la déclaration de DIV, ne pas mettre de point-virgule (essayez d'en mettre un pour voir le résultat). Placer les sous-classes séparées par un espace d'avancement clavier. S'il y a conflit pour une valeur retenez que le "dernier qui parle a raison" !
Vous êtes déjà en possession de diverses règles CSS qui vous permettent de réaliser un dossier d'exercices, et page suivante vous allez découvrir les liens hypertexte, indispensables pour monter un site.
Plus loin vous retrouverez la balise DIV dans d'autres applications (positionnement par exemple) mais pas d'anticipation...
Sommaire CSS ... @ ... Liens hypertexte
