STYLES ET MODIFICATIONS DE STYLE


MODIFICATION D'UN STYLE PRÉDÉTERMINÉ

Il existe des caractéristiques par défaut pour certains éléments, par exemple: la balise body détermine les caractéristiques du texte pour tout le corps de la page:

corps: 16px, serif, justification à gauche...

la balise h1: corps 32px, serif, justification à gauche

Il est possible dans la feuille de style css ou dans la partie style du head du fichier considéré de déclarer ces balises pour indiquer des modifications, par exemple

body
{
text-align:justify;
font-size :18px;
}

h1
{
text-align:center;
font-family:sans-serif;
}

Remarque: on peut utiliser la balise prédéfinie <p> qui définit comme la balise <div> un paragraphe, mais ne détermine que les caractéristiques du texte (corps, police, couleur...). Cette balise est utile uniquement si on veut obtenir des sauts de paragraphe à dimension standard (qui sont légèrement plus petits que 2 retours de ligne <br><br>). La balise div au contraire n'entraîne aucun saut de paragraphe, mais uniquement un retour de ligne (comparable à un br). Il est possible de déterminer un saut de paragraphe spécifique avec une balise div par la commande padding-bottom par exemple comme suit: <div style="padding-bottom:5px;">. Ces sauts de ligne plus petits conviennent généralement mieux à la présentation d'articles ou textes littéraires. La balise p, autrefois très répandue, a perdu beaucoup de son intérêt car le texte est géré aussi bien par la balise div. De plus, cette dernière permet de régler plus finement les sauts de paragraphe.

On comparera ci-dessous les sauts de parragraphe obtenus dans différents cas:


-saut de paragraphe standard avec la balise p

<p>premier paragraphe</p>
<p>deuxième paragraphe</p>


premier paragraphe

deuxième paragraphe



-saut de paragraphe obtenu par 2 balises br

<p>premier paragraphe<br> <br>
deuxième paragraphe</p>


premier paragraphe

deuxième paragraphe



-retour de ligne simple obtenu avec les balises div

<div>premier paragraphe</div>
<div>deuxième paragraphe</div>


premier paragraphe
deuxième paragraphe


-saut de paragraphe réglé obtenu par la commande padding-bottom dans la balise div

<div style="padding-bottom:5px;">premier paragraphe</div>
<divdiv style="padding-bottom:5px;">deuxième paragraphe</div>


premier paragraphe
deuxième paragraphe


MODIFICATION LOCALE D'UN STYLE

Par exemple, nous avons défini dans la feuille de style ou dans la partie head ue la page considérée le style:

.mon_style
{
text-align:justify;
line_height:22px;
color:red;
font-size:18px;
}

Mais si l'on veut par exemple utiliser occasionnellement ce style en mode justifié à gauche au lieu de centré, il est possible de modifier ce style de la manière suivante:

<div class="mon_style_centre" style="text-align:left">
Ce texte va se trouver justifié à gauche
</div>


Il est possible de même de modifier localement un style prédéterminé, par exemple:

<h1 style="text-align:center">MON TITRE CENTRÉ</h1>


Il est possible de modifier de la même manière la balise body au début de la page (ce qui fournit le même résultat que de la modifier dans la partie head). par exemple:

<body style="background-color:white">


Cependant en aucun cas, l'on ne peut fermer en cours de page la balise body pour la rouvrir, il faut utiliser la balise div.


MODIFICATION INTERNE À UN PARAGRAPHE BALISE SPAN

La balise span réalise une modification de style à l'intérieur d'un paragraphe. Elle ne peut concerner que certaines caractéristiques comme la couleur, le corps, la police...

Par exemple, si nous avons défini dans la feuille:

.mon_style
{
text-align:justify;
line_height:22px;
color:red;
font-size:18px;
}

Il est ainsi possible d'obtenir, sans retour à la ligne, une partie du texte en vert et de corps 26px:

<div class="mon_style">
Ce texte est rouge en 22px
<span style="color:green;font-size:26px;">
Là, je suis en vert 26px;
</span>
Et là je reviens en rouge 22px
</div>


Ce texte est rouge en 22px Là, je suis en vert 26px; Et là je reviens en rouge 22px

Si on a défini dans la feuille de style le style suivant:

.modif_mon_style
{
color:green;
font-size:26px;
}

il est possible d'obtenir le même résultat que précédemment:

<div class="mon_style">;
Ce texte est rouge en 22px
<span class="mon_style_modif">
Là, je suis en vert 26px;
</span>
Et là je reviens en rouge 22px
</div>



Ce texte est rouge en 22px Là, je suis en vert 26px; Et là je reviens en rouge 22px

alors que la formulation <div class="mon_style_modif"> au lieu de <span class="mon_style_modif"> aurait entraîné un retour automatique à la ligne.

<div class="mon_style">
Ce texte est rouge en 22px
<div class="mon_style_modif">
Là, je suis en vert 26px;
</div>
Et là je reviens en rouge 22px
</div>


Ce texte est rouge en 22px
Là, je suis en vert 26px;
Et là je reviens en rouge 22px


Remarque: l'italique et le gras, respectivement, peuvent s'écrire par la définition ou la modification d'un style:

<span style="font-style:italic;">

<span style="font-weight:bold;">

cependant c'est une complication inutile pour une utilisation accidentelle en local et il est préférable d'utiliser dans ce cas les balises <i> et <b>, parfaitement reconnues par le W3C pour le HTML5.

SOMMAIRE    SUITE