Styles Locaux en CSS

 

MENU

Les techniques CSS s'appliquent à définir globalement des styles pour donner une uniformité à l'ensemble des pages du site.
Mais il peut s'avérer utile de changer localement un style pour apporter un peu de diversité.

Pour mettre en oeuvre ces changements locaux, trois outils :

  • l'attribut < balise ... STYLE = ... à ne pas confondre avec la balise <STYLE> des pages de style internes
  • les identificateurs de style : #identificateur - avec les balises <SPAN ID = identificateur> ... </SPAN>
  • le conteneur <DIV> ... </DIV>


Modifications locales de style par l'attribut : <... STYLE =...

<HTML><HEAD><TITLE>Attribut local de style<TITLE>
<STYLE="text/css">

H1{font-familly:Arial ; font-size:14pt}
P {font-familly:"Times New Roman" ; font-size:10pt}

</STYLE>

<BODY>
<H1>1 - Champignons</H1>
<P>
Voici une liste de champignons,BR>
Ecrits en rouge, les champignons dangereux<BR>
En vert, les tr&egrave;s bons.<BR>
En gris les espèces à go&ucirc;t m&eacute;diocre.<BR>

<P STYLE=color:green> Chanterelle</P><BR>
<P STYLE=color:grey>Vaisse de loup</P><BR>
<P STYLE=color:red>Bolet Satan</P><BR>
<P STYLE="color:green ; font-style:italic">Oronge C&eacute;sar</P><BR>
<P STYLE=color:green>Trompette de la mort</P><BR>

</BODY></HTML>

Nous avons écrit pour vous la source de l'exemple ci-dessus.

Deux remarques :

  1. Observez l'avant-dernière ligne où deux styles sont imposés dans la même balise P. Notez que lorsque l'on indique plus d'un style, l'ensemble doit être mis entre guillemets.
  2. Observez que les lignes des noms de champignons sont très séparées du fait de l'emploi de la balise P (paragraphe) qui s'isole des paragraphes adjacents par une ligne vide avant et une après.

Usage d'un IDENTIFICATEUR avec <SPAN> pour fixer localement un style


Ci-dessous une source comportant la déclaration et l'utilisation des identificateurs suivants :
dangereux - tresbon - mediocre.

<HTML><HEAD>
<STYLE type="text/css">
H1 { font-familly:Arial,Helvetica,sans-serif; font-size:14pt}
P { font-familly:"Times New Roman", Times, serif; font-size:10pt}
 #dangereux { color : red }
#tresbon { color : green }
#mediocre { color : #cccccc}
</STYLE></HEAD>
<BODY>
<H1>1 - Champignons</H1>
<P>
Voici une liste de champignons,BR>
Ecrits en rouge, les champignons dangereux<BR>
En vert, les tr&egrave;s bons.<BR>
En gris les espèces à go&ucirc;t m&eacute;diocre.<BR>

<SPAN ID=tresbon>Chanterelle</SPAN><BR>
<SPAN ID=mediocre>Vaisse de loup</SPAN><BR>
<SPAN ID=dangereux>Bolet Satan</SPAN><BR>
<SPAN ID=tresbon>Oronge C&eacute;sar</SPAN><BR>
<SPAN ID=tresbon>Trompette de la mort</SPAN><BR>
</P>
</BODY></HTML>

Les identificateurs sont ici : "dangereux", "tresbon", "mediocre"
Remarquons que les accentuations sont interdites pour les identificateurs.
  • Ils se déclarent de la mème manière que les balises. Ils supportent les mêmes attributs.
  • Ils sont appliqués dans le texte grâce à la balise <SPAN ID=identificateur>
  • Leur domaine de validité s'étend de cette balise à la balise </SPAN>
  • Ils sont très pratiques pour modifier localement les attributs d'un texte sur de courts segments.
Leur intérêt, lorsqu'ils sont écrits dans une feuille de style externe, est qu'il suffit de modifier leur attribut dans celle-ci pour que tous les attributs des sections de texte correspondantes soient automatiquement modifiés sur toutes les pages du site.

Exemple : Vous trouverez le code de l'exemple ci dessus en cliquant ici.
Autre exemple : cliquez ici

Vous observez que nous nous sommes affranchis des sauts de ligne inhérents à l'emploi de la balise P.
Voir l'exercice précédent.

Le grand intérêt des identificateurs de style est qu'ils peuvent être expansés dans la plupart des séquences de texte, sans faire appel à des balises particulières telles que P, H1, H2, etc. qui peuvent avoir des effets contraires à nos intentions.
L'attribut de couleur n'est, bien entendu pas le seul qui puisse faire l'objet d'un identificateur.
Tous les attributs de texte vus précédemment ainsi que ceux de positionnement que nous verrons plus loin peuvent faire l'objet d'une règle rattachée à un identificateur, individuellement ou collectivement.

 

Conteneur divisionnaire <DIV> . . .</DIV>
L'exemple ci-dessous oeuvre mieux qu'un long discours sur les propriétés de la balise DIV.
Nous avons écrit pour vous le fichier source du code ci-dessous - travaillez-le à votre guise.

<HTML> <HEAD>
<TITLE>Conteneur DIV</TITLE>
<STYLE TYPE="text/css">
P {font-family:Arial ; font-size:8pt ;color:green }
</STYLE>

</HEAD>
<BODY STYLE = "font-family:Arial ; font-size:10pt ; font-weight:600 ; color:blue">
<HR>
Dans la balise BODY on a imposé Arial 10 bleu gras.<BR>
Texte avant la balise DIV qui imposera Arial 12 couleur gray.
<DIV STYLE="font-family:Arial ; font-size:12pt ; color:gray">
Dans DIV.
</DIV>
Après /DIV, avant P STYLE = color:red.
<P style=color:red>Texte dans P (color:red).</P>
<P style=color:green>Texte dans P (color:green).</P>
Suite du texte après P
<!------------------------------------------------------------------>

<HR>
Dans la balise BODY on a imposé Arial 10 bleu gras.<BR>
Texte avant la balise DIV qui imposera Arial 12 couleur gray.

<DIV STYLE="font-family:Arial ; font-size:12pt ; color:gray">
Dans DIV, avant P STYLE = color:red.
<P style=color:red>Texte dans P (color:red), tj dans DIV.</P>
<P style=color:green>Texte dans (P color:green), tj dans DIV.</P>
Suite du texte après /P avant /DIV.
</DIV>
Après /DIV et avant la fin du BODY.
</BODY>
</HTLM>

En résumé :

Le conteneur DIV impose son style à tout le texte qu'il contient, sauf aux endroits où les style est redéfini par un autre conteneur tel que <P> ..</P>ou autre.

Au sortir de ces conteneurs, le texte reprend le style de DIV si on est toujours dans <DIV> ... </DIV>

Au sortir de tout conteneur, y compris DIV, le texte reprend le style imposé dans la balise <BODY>
Un autre exemple d'utilisation du conteneur <DIV . . . </DIV> avec <P> . . . </P>


Etape suivante
Sommaire du cours CSS
Sommaire du coursHTML
Retour en Page d'accueil