Feuilles de style

-

L'ensemble des propriétés typographiques attaché à un document, ou à une balise HTML représente un style. La possibilité de pouvoir séparer un document HTML des attributs typographiques permet de partager ces attributs entre plusieurs documents, et donc de donner une certaine homogénéïté à un ensemble de pages.

Un style permet de personnaliser le comportement d'une balise HTML. Avant d'écrire un document en langage HTML, on définit les modifications souhaitées, sous la forme d'une suite de règles; chaque règle comporte le nom d'une ou plusieurs balises et les propriétés que l'on veut changer.

Exemple de règle:

H1 {color:blue; font-size:18pt}

Chaque règle comprend un sélecteur, ici H1 et la déclaration d'une ou plusieurs propriétés;
Deux syntaxes permettent de définir les styles; la syntaxe ci-dessus répond à la norme CSS.
L'autre syntaxe est plus proche du langage JavaScript; on présentera la règle ci-dessus par les instructions:

tags.H1.color = "green"
tags.H1.fontSize = "18pt"

Dans la suite on utilise essentiellement la syntaxe CSS.

I. Emplacements d'une définition de style

Les définitions peuvent se placer dans un ou plusieurs fichiers externes, ou dans l'entête du document en utilisant la balise STYLE ou dans une balise en utilisant l'attribut style.

  1. Dans un fichier externe:

    Cela permet d'avoir le même style dans plusieurs documents, et d'obtenir une présentation homogène de plusieurs pages. Quand un style doit être changé, la seule modification dans le fichier de style est automatiquement répercutée dans les documents utilisant cette feuille.

    Exemple de fichier de style:( styledef.css)

    /* un exemple */
    @import url("stylede1.css");
    h2 { margin-left:-0.4cm; color:salmon }
    P { margin-left:0.8cm }
    BODY { margin-left:0.4cm; color:#880088; background-color:#FFFFF0}


    Pour utiliser ces styles, il faut indiquer le nom du fichier dans une balise LINK en entête du document comme par exemple:

    <LINK rel="styleSheet" type="text/css" href="styledef.css">

    Il existe deux syntaxes de définition des styles; l'une des valeurs 'text/css' ou 'text/javascript' de l'attribut type indique celle qui est utilisée.

    On peut mettre plusieurs balises LINK; et dans un fichier de style on peut inclure, par le mot @import d'autres fichiers de style, comme dans l'exemple ci-dessus.

  2. Dans l'entête du document:

    Cela permet de particulariser le document; les styles sont définis dans l'entête, en utilisant la balise <STYLE> comme ci-dessous:

    <STYLE type="text/css">
    SAMP { margin-left:1.2cm; font-weight:normal; font-style:normal; font-size:10pt; }
    /* Paragraphe en retrait de 1.5 centimètres */
    P { font-size:10pt; margin-left:0.5cm;}
    </STYLE>


  3. Dans une balise:

    Cela est possible, mais doit être exceptionnel. On utilise l'attribut style, comme ci-dessous:

    <H1 style="color:blue; font-style:italic">


II. Règle de style

  1. Syntaxe d'une règle
    Chaque règle comprend deux parties: un sélecteur et une déclaration de propriétés. Des commentaires (encadrés par /* ... */) peuvent figurer dans une règle. Exemple de règle:

    P { font-size:10pt; margin-left:0.5cm;}


  2. Hiérarchie dans une règle
    La marque de séparation entre les balises d'un sélecteur est importante. Quand les balises sont séparées par une virgule, comme:

    H3, H4 {color:green; font-weight:bold; margin-left:-0.5cm}

    alors la déclaration de propriété affecte chaque balise.
    Mais quand le séparateur est un ou plusieurs espaces, la propriété n'affecte une balise que lorsqu'elle apparait dans l'autre. La règle suivante modifie le comportement de la balise EM, uniquement quand elle est à l'intérieur d'un bloc défini par H3:

    H3 EM { color:red; font-size:larger }


    Nous utilisons la balise EM dans les trois lignes suivantes:

    <P style="margin-left:2cm;"> 1: texte avec <EM>la balise EM</EM> utilisée</P>
    <H3 style="margin-left:2cm"> 2: texte sans la balise EM</H3>
    <H3 style="margin-left:2cm;"> 3: texte avec la <EM>balise EM</EM> utilisée </H3>

    qui sont affichées comme ci-dessous:

    1: texte avec la balise EM utilisée

    2: texte sans la balise EM

    3: texte avec la balise EM utilisée

    On voit que le comportement de la balise EM, n'est pas le même suivant qu'elle est ou n'est pas placée à l'intérieur d'un bloc délimité par H3; comparez pour cela les phrases 1 et 3.

III. Plusieurs styles pour une même balise

On peut définir des paragraphes ayant des styles différents. Par exemple définissons, pour la même balise, une règle générale et une règle avec le suffixe source:

BLOCKQUOTE { color:#8000F0; margin-left:0.5cm; font-size:10pt;}
BLOCKQUOTE.source { margin-left:2.0cm; font-family:courier }


Nous voyons ci-dessous une utilisation simple de BLOCKQUOTE et une autre utilisation en précisant la classe source, qui se distinguent aisément car les marges gauches sont différentes:
un texte dans le bloc: <BLOCKQUOTE>
un texte dans le bloc: <BLOCKQUOTE class="source">
Le bloc de classe "source" hérite de l'attribut couleur; par contre il a, en propre, sa marge et sa police de caractères.

IV. Propriétés usuelles

Les propriétés les plus courantes sont présentées, avec un exemple.
  1. Propriétés d'un texte
  2. Propriétés d'une police de caractères
  3. Couleur et image

    Décrivons les propriétés permettant de colorer un texte ou le fond d'un bloc.

  4. Décorer le fond     référence

    Le fond d'un élément 'en-ligne' ou d'un bloc peut être précisé avec d'autres attributs que celui de couleur, vu ci-dessus

  5. Bloc

    Un bloc est dessiné dans un cadre (pouvant être invisible), lui-même dans une une zone rectangulaire. Il existe une marge paramétrable entre l'extérieur de la zone et le cadre; le cadre a une épaisseur (border) réglable; enfin l'espacement (border) intérieur entre ce cadre et le bloc est aussi modifiable.

 

V. Eléments dynamiques

Nous allons voir comment en modifiant des attributs de styles par l'intermédiaire de javascript, des zones peuvent être affichées ou masquées, en traitant deux exemples.
  1. Développer ou masquer de façon permanente une zone, comprenant du texte des images ... voir les exemples ci-dessous. Cela est basée sur :
    1. deux images qui, lorsqu'on clique dessus permettent de développer ou masquer un texte.
    2. une zone de code HTML contenant le texte qui est soit développé soit masqué
    3. une fonction javascript qui change l'état de cette zone et alterne les images utilisées.

    En cliquant, ci-dessous sur le "bouton" ▼ suite ... ▼   du texte apparaît, et ce "bouton" laisse la place à un autre.
    En fait on peut inclure aussi des images, une table ... (toute balise Html) dans cette zone affichée ou masquée à la demande.

    Code source javascript:   ▼ suite ... ▼
    Code Html:   ▼ suite ... ▼
     
  2. Autre méthode pour voir ou cacher une zone, qui n'utilise pratiquement pas javascript, mais d'une part des styles et d'autre part une structure html bien précise.

    Code Css   voir ... 

    /* voir cacher */
div.voirCacher { display:none; 
  margin-left:  4px; padding-left:4px; padding-bottom: 3px; 
  border-left:   dashed 1px rgb(192,80,80);
  border-bottom: dashed 1px rgb(192,80,80);
  }
a.voirCacherM, a.voirCacherC  { /* liens pour voir-cacher */
  font-weight:bold; font-size:0.71em;
  text-decoration:none;
  padding:5px; border:solid 1px rgb(192,80,80);
  }
a.voirCacherC { /* lien pour cacher */
  color:rgb(192,80,80);
  margin-left:-5px;
  }

    Voir dans ce code
      → le style de la balise div contenant le texte caché ; initialement ce bloc est caché (display:none;). Une bordure en pointillé, à gauche et en bas, délimite cette zone.
      → et le style des balises a (boutons permettant de cacher ce texte sur un click.

    ↑ cacher

    Code Html   voir ... 

    <div>
<div>
  <!--  texte_intro ==============================  -->
  <p>
    N'importe quel code html bien <b>structuré</b>
    pouvant ête sur plusieurs blocs h1, ..., div, p, pre, ol, ul  ...
    et à la fin le lien permettant sur un click de voir la partie cachée
    </p>
  <p>
    <b>Code Html </b>
    <!--  fin texte_intro  ========================== -->
	  <a class="voirCacherM" href="javascript:void(0)"
    onClick=
    "this.parentNode.parentNode.parentNode.children[1].style.display='block'"
    >voir ...</a>   </p>
</div>

<div class="voirCacher">
  <!--  texte_caché  ===========================  -->
  <pre class="txtCode">
    bla bla bla
  </pre>
  <p style="padding-left:9px;">
    bla bla bla
    </p>	
  <div style="clear:both"></div>
  <!--   fin texte_caché  ========================= -->
  <a class="voirCacherC" href="javascript:;" 
     onclick="this.parentNode.style.display='none';"
	  >↑ cacher</a></div>
</div>

    Voir ci-contre dans un bloc div ancêtre, deux sous blocs div consécutifs. Le premier (fond rose) contient un texte toujours visible et un lien (fond vert) permettant de voir le texte caché.
    Le deuxième (fond bleu) contient le texte caché et un lien (fond vert) permettant de cacher à nouveau le texte.
      → Remarquer dans le premier lien, la façon d'obtenir le bloc div bleu
      + this.parentNode désigne le bloc p
      + this.parentNode.parentNode désigne le bloc rose
      + this.parentNode.parentNode.parentNode désigne le bloc ancêtre
      + this.parentNode.parentNode.parentNode.children[0] désigne le bloc rose
      + this.parentNode.parentNode.parentNode.children[1] désigne le bloc bleu
    et c'est sur ce dernier que l'attribut style.display prend la valeur 'block' et devient donc visible. 

           Structure
div                          ← bloc ancètre
  div                        ← bloc rose
     bloc +++  /bloc         ← un ou plusieurs
     bloc
        +++
        a ...voir /a         ← lien pour voir
     /bloc
  /div
  div                        ← bloc bleu
     bloc  +++  /bloc        ← un ou plusieurs
     a ↑ cacher /a           ← lien pour cacher
  /div
/div
    ↑ cacher
  3. Encore une autre, la plus facile à utiliser avec quelques de style tout d'abord - nom : voirCacher, voirCacherM, voirCacherC
    et d'une fonction javascript - nom : voirCacherFn
    Code Html
    <script>voirCacherFn('<b>Code Html</b>   ','teleCh')</script>
<!-- texte caché -->
<p> bla bla bla </p>
<ul>
<li>Le projet et sa Pratique <span class="dateDoc">106,5ko-</span></li>
<li>Statuts SNL Union <span class="dateDoc">78,0 ko - </span></li>
<li>Charte SNL <span class="dateDoc">326,6 ko - </span></li>
</ul>
<!-- FIN texte caché -->
<script>voirCacherFn('FIN')</script>

    Voir ci-contre deux appels d'une fonction javascript pour une présentation très simple.
    → les mots avant le texte caché sont indiqués sur le premier appel
    → Le texte caché est codé entre les deux appels ; il est constitué de un ou plusieurs blocs de code html.
    → le deuxième appel, avec l'argument 'FIN' ne doit pas être oublié.

    Code Css : le même que ci-dessus (div.voirCacher ... a.voirCacherC)
      
    // Les arguments nomClasse et txtVoir sont optionnels
function voirCacherFn( txtIntro, nomClasse, txtVoir) {
var TXTVOIR='voir la suite ...';	
var TXTCACHER='cacher  ^^^';		  
var STYLE_DIV_MC='voirCacher';	 // classe de style balise div 
var STYLE_A_M='voirCacherM';	 // classe de style du lien a (pour montrer)
var STYLE_A_C='voirCacherC';  // classe de style du lien a (pour cacher)	  
var DB='<',FB='>'; /* var DB='<',FB='>'; */
if(arguments.length<3) txtVoir=TXTVOIR;
if(txtIntro != 'FIN') {
// introduction, texte d'info et bouton 'montrer'
  var attribClasse = (arguments.length==1) ? "" : " class='"+nomClasse+"'";
  document.write(""
     +DB+"div "+attribClasse +FB			 
     +DB+"div style='margin-bottom:7px;' "+FB+txtIntro+"  "
     +DB+"a onClick=\"this.parentNode.parentNode.children[1].style.display"
     +"       ='block'\" "
     +"    href='javascript:void(0)' class='"+STYLE_A_M+"'>"+txtVoir+DB+"/a"+FB
     +DB+"/div"+FB
     +DB+"div class='"+STYLE_DIV_MC+"'"+FB
     );
    }
else {
  document.write(""
     +DB+"a class='"+STYLE_A_C+"'"
     +" onclick=\"this.parentNode.style.display='none';\" "
     +"     href='javascript:;' "+FB+TXTCACHER+DB+"/a"+FB     
     +DB+"/div"+FB
     +DB+"/div"+FB
     );
  }
} // fin voirCacherFn(txtIntro, nomClasse, txtVoir)

  4. Bulle qui montre une information au passage de la souris, puis celle-là disparaissant quand la souris s'éloigne.

    On doit définir d'une part la zone réactivequi est ici encadrée en pointillés pour indiquer au lecteur une particularité sur ces mots (ici on utilise une balise a class="infoBulle") mais également l'information qui apparaît de façon éphémère et le « mécanisme » (ici le pseudo événement a.infoBulle:hover) qui permet son apparition/disparition 

    d'une part la <a href="javascript:void(0);" class="infoBulle">
  zone réactive
  <span style="width:450px; left:-94px;top:-1.2em;">
	 qui est ici encadrée en pointillés pour indiquer au lecteur une
	 particularité sur ces mots
	 </span></a>
 mais  également

    Remarquer que la largeur de la bulle et sa position sont précisées dans la balise span. On peut ainsi les adpater.
    On ne peut pas mettre un lien dans le texte de la bulle.

    a.infoBulle {
  cursor: help; position:relative;z-index:24;
  text-decoration:none;margin-bottom:0px;padding: 0 3px 0 3px;color:#000;
  border:1px dotted #993300;
  }
a.infoBulle:hover {
  z-index:25;background-color:#ECF4B4; !important;
  color:#000!important;
  font-weight:normal!important;
  text-decoration:none;
  }
a.infoBulle span { display:none;}
a.infoBulle:hover span {
  display:block; 
  padding:4px; position:absolute; top:1.5em; left:-2em;
  border:3px solid #a2a2a2;
  background-color:#f2f2f2;color:#00f;
  font-size:12pt; text-align:center;
  }

  5. Une autre bulle qui n'apparaît qu'au survol de la souris, mise en œuvre par une technique différente.

    Voyons l'exemple de cette zone sensible au passage de la souris qui est ici très visible par sa coloration. Nous voyons ci-après la déclaration de style et le code Html permettant ces effets.

    Déclarations de style:     voir ... 

    span.maBulle {
    position:relative; z-index:2;
    cursor: help;
    background-color:#ECF4B4;
    margin:0px 4px; padding:0 3px; color:#000;
    border-bottom:1px dotted #993300;
    }
span.maBulle span {
    position:absolute; 
    padding:4px; border:3px solid #a2a2a2;
    background-color:#f2f2f2;color:#00f;
    font-size:12pt;
    }

    Nous avons deux éléments dont les styles sont précisés:

    1. la zone sensible définie par la balise span de classe 'maBulle'.
    2. le texte bulle, en fait un code Html, défini dans une balise span interne à la balise span précédente, précisée ci-contre par 'span.maBulle span'
     
    ↑ cacher

    Code Html     voir ... 

    Voyons l'exemple de cette zone
<span class='maBulle'
     onMouseOver="javascript:document.getElementById('txtB1')
                 .style.display='inline'"
     onMouseOut="javascript:document.getElementById('txtB1')
                .style.display='none'"
   >
   sensible au passage de la souris 
   <span id="txtB1" style="display:none; top:-2.5em; left:0em;">
      ici le texte de la bulle associée<br>
      qui apparaît au survol de la souris<br>
      <a href="javascript:alert('ici par exemple\nune boîte message')">
      et un lien</a>
      </span>
</span> qui est ici très visible ...

    Observons que :

    1. la zone sensible réagit aux événements 'onMouseOver' et 'onMouseOut' en modifiant l'attribut de style 'display' du texte bulle qui, ainsi apparaît ou disparaît suivant la position de la souris.
    2. le texte bulle, interne à la balise span (repérée en noir ci-contre , est identifiée par 'txtB1' (voir l'attribut id de cette balise).
    3. nous pouvons avoir plusieurs bulles avec pour chacune un texte bulle identifié de façon spécifique, txtB2, txtB3 ... par exemple, alors que la déclaration du style 'span.maBulle span' ne change pas
    4. la position de la bulle, étant spécifique à chaque bulle, est précisée dans la partie code Html : voir 'top:-2.5em; left:0em;'
     
    ↑ cacher
  6. Une dernière bulle facile à utiliser qui est mise en oeuvre simplement, par deux appels javascript qui encadrent le texte de la bulle codée dans une balise span.
    Quelques de style tout d'abord - nom : uneBulle
    et d'une fonction javascript - nom : uneBulleFn
    voir la hierarchie des balises html     doivent être faites au préalable. 
    function uneBulleFn(texteIntro, nomClasse) {
var DB='<',FB='>';
var CLASSBULLE='uneBulle';

if(texteIntro != 'FIN') {
  if(arguments.length==1) nomClasse=CLASSBULLE;
  document.write(""
     +DB+"span class='"+nomClasse+"' "
     +  "onMouseOver=\"this.children[1].style.display='block'\"  "
     +  "onMouseOut =\"this.children[1].style.display='none'\"   "+FB
     +DB+"var class='"+nomClasse+"'"+FB+texteIntro+DB+"/var"+FB
     );
  }
else {document.write(DB+"/span"+FB); }
}

    Le premier argument contient le texte qui est à survoler pour voir la bulle ; ce texte, codé en html, peut contenir toute balise admissible comme élément enfant de la balise var (voir ces éléments)
    Le deuxième argument a pour valeur par défaut : uneBulle utilisé pour les trois déclarations de style : 'span.uneBulle', 'span.uneBulle var.uneBulle' et enfin 'span.uneBulle span'. 


    span.uneBulle {
  position:relative; z-index:2; display:inline
  cursor: help;
  margin:0px 4px; padding:0 3px;
  border-bottom:1px dotted rgb(192,80,80);
  }
span.uneBulle var.uneBulle { font-family:inherit;font-style:normal; }
span.uneBulle span {
  display:none;
  position:absolute; left:0em; top:-1em; z-index:4;
  padding:4px; border:3px solid #a2a2a2;
  background-color:#f2f2f2;color:#00f;
  font:normal 0.8em 'comic sans ms';
  }


    Code html pour utiliser 
    Quelques 
<script>uneBulleFn('déclarations')</script>

<span style="top:-2.1em; left:0em;width:24em;">
  de style tout d'abord - nom: <b>uneBulle</b><br>
  et d'une fonction javascript - nom: <b>uneBulleFn</b><br>
  <a href="http://giminik.developpez.com/xhtml/span.html"
  >voir la hiérarchie des balises html</a>
  </span>

<script>uneBulleFn('FIN')</script>
doivent être faites au préalable.

    Le code ci-contre correspond au texte ci-dessus, avec sa bulle sur le mot 'déclarations'.
     
    Le premier appel, dans la balise script,
          uneBulleFn('déclarations')
    contient le mot à survoler
    La partie en rose correspond au code html du texte dans la bulle ; il est obligatoirement dans une balise span ; il peut contenir des éléments de mise en forme et des liens.
    Le deuxième appel, uneBulleFn('FIN'), dans l'autre balise script, ne doit pas être oublié.

 

VI. Attribut media de la balise LINK

L'attribut media peut être présent dans les balises LINK et Style. La valeur par défaut est screen.

L'attribut media de la balise <STYLE> permet d'indiquer le type de matériel concerné par le style. La valeur par défaut est screen.
Les colonnes ci-contre donnent des valeurs possibles pour cet attribut. 		screen écran d'ordinateur
tty dispositif à espacements fixes
tv écran TV (faible résolution)
projection écran de projection à lampe
handheld écran de poche
print imprimante
braille table tactile
aural synthétiseur de paroles
all tout type de matériel
Exemples d'utilisation

 

VII. Modification de style avec javascript

    Un texte pour illustrer le changement de style  

          En appuyant sur l'un des boutons ci-contre, la couleur de fond change.
          ou la couleur de fond du texte ci-dessus.

 

Références: quelques adresses

présentation de Gilles Maire http://guide.ungi.net/chap32.htm#_0
manuel de style du W3C: http://www.yoyodesign.org/doc/w3c/manual-of-style-20050908/
CSS1 du W3C: http://www.yoyodesign.org/doc/w3c/css1/
CSS2 du W3C http://www.yoyodesign.org/doc/w3c/css2/cover.html
à propos de la spécification CSS2: http://www.yoyodesign.org/doc/w3c/css2/about.html.html
attributs infini: http://www.infini-fr.com/Index.wp?RequestedPage=...Attributs
 
première approche: http://www.w3.org/TR/REC-CSS2/intro.html#q1
attributs infini: http://www.infini-fr.com/Index.wp?RequestedPage=...Attributs
CSS2 specification: http://www.w3.org/TR/REC-CSS2/
W3C Recommendations: http://websitetips.com/css/w3c/c
comparaison CSS-XSS: http://www.w3.org/Style/CSS-vs-XSL