ACCUEIL |  PAGE PRECEDENTE |  PAGE SUIVANTE |  FIN DE PAGE |  INDEX

Syntaxe de base Valid HTML 4.01 Transitional


Dans une définition de feuille de style, tous les styles suivent la même syntaxe de base et la même structure.
 
Les règles sont à la base de toutes les feuilles de styles, elles ont une syntaxe précise et sont construites de la manière suivante :

Sélecteur    { propriété : valeur; propriété : valeur...}
 
Nous constatons qu'une règle est composée d'un sélecteur suivi d'un bloc de déclarations définissant le style. Le bloc de déclarations est délimité par des accolades {...}. Il peut contenir une seule déclaration ou plusieurs. Lorsqu'il y a plus d'une déclaration, elles sont alors séparées par un point virgule.
 
exemple :
 
H2    { color : blue; font-size : 18pt; font-family : serif }
 
Dans la règle ci-dessus H2 est le sélecteur, la première déclaration est en bleu-vert, la seconde en rouge et la troisième en magenta.
Chaque déclaration contient une propriété (color, par exemple) à laquelle on attribue une valeur ( blue, dans notre exemple). Remarquez, que contrairement au HTML, cette affectation de valeur se fait avec le signe : ( deux points) et non pas avec le signe = (égal).
Pour les valeurs, la casse n'a pas d'importance. Ainsi pour la propriété font-family, vous pouvez spécifier indifféremment les valeurs Garamond, garamond ou GARAMOND.
 
Le SELECTEUR indique la façon dont le style est référencé au sein du reste de la page.
 
Pour nommer la plupart des sélecteurs, on utilise l'une des balises HTML existantes , telles que <CODE> ou <P>
 
exemple :
 
   { text-indent : 5em }

Les sélecteurs

Sélecteurs simples

Un sélecteur simple associe un élément (par son type ou son attribut) à une règle particulière et cela, quelle que soit la position qu'il occupe parmi les autres éléments.

On peut grouper plusieurs sélecteurs simples, à une même règle de présentation, en les séparant par des virgules

H1,H2 {color:navy}
H3
, H4, H5 {color:red}
H6
,H7 {color:green}

Dans cet exemple, les en-têtes

H1 et H2 sont affichés en bleu,
H3,H4 et H5 sont affichés en rouge,
H6 et H7 sont affichés en vert.

Sélecteurs contextuels

Comme leur nom l'indique, les sélecteurs contextuels associent une règle particulière à un élément, mais en fonction de sa situation.

Par exemple, tous les éléments <STRONG> de classe ex (CLASS="ex") situés dans des paragraphes (P) sont affichés en jaune. Si un élément <STRONG> n'est pas inséré dans un élément P (SPAN, DIV...) ou un élément P de classe différente, la règle ne lui sera pas appliquée. On sépare par des espaces    les sélecteurs contextuels que l'on veut grouper.


Exemple N°1

Le style suivant :

P  STRONG.ex {color:yellow}

sera incorporé et rendu comme ci-dessous :

<P>
Voici un élément
<STRONG CLASS="ex">strong</STRONG> situé dans un élément P de classe <EM>ex</EM>.
</P>

Voici un élément strong situé dans un élément P de classe ex.

Chaque sélecteur peut faire référence à une CLASSE, un ID ou un TYPE d'élément.

Exemple N°2

Le style suivant :

DIV.rem   P    STRONG {font-style:italic;color:green;font-size:150%}

sera incorporé et rendu comme ci-dessous :

<DIV CLASS="rem">
<P>Élément <STRONG>strong</STRONG> situé dans un élément DIV (CLASS="rem")</P>
</DIV>

Élément strong situé dans un élément DIV (CLASS="rem")

Ici, sont affichés les éléments <STRONG>, inclus dans un élément P s'il est situé dans un élément DIV de classe rem (CLASS="rem") en caractères italiques, de couleur verte, dans une police agrandie de 50%.

Exemple N°3

Le style suivant :

UL  EM.info {font-size:30px;color:yellow;background:navy}

Les éléments EM de classe info (CLASS="info") qui sont contenus dans une liste (UL) sont affichés dans une police de 30px, en couleur jaune sur fond bleu si celui-ci est lui-même contenu dans un élément UL.

sera incorporé et rendu comme ci-dessous :

<UL>
<LI>Première ligne de la liste, avec un élément <SPAN CLASS="info">SPAN de classe info</SPAN>
<LI>Deuxième ligne avec élément <SPAN CLASS="info">SPAN de <EM CLASS="info">classe</EM> info</SPAN>
</UL>

  • Première ligne de la liste, avec un élément SPAN de classe info (sans EM)
  • Deuxième ligne avec élément SPAN de classe info (avec EM)

 

Les signes utilisés :

.
point
  H1.rouge    { color : red }  pour créer une classe
{...}
accolades
  DIV    { background : #669933 }  les accolades fixent les limites du  bloc de déclarations
:
deux points
  H1    { font-size : 14pt }  pour affecter une valeur à une propriété
;
point-virgule
  H1    { font-size : 15pt; font-weight : bold; color : red }  pour séparer chaque déclaration ( la paire propriété/valeur)
,
virgule
  H1, H2, H3    { color : red}  3 sélecteurs regroupés
/
 
  H1    { font : 15pt/17pt  "Arial" }  
#
dièse
  #z098y    { letter-spacing : 0.3em }
 puis
  <H1 id=z098y> Titre en caractère élargi </H1>
en déclaration générale, puis dans le corps du document
>
 
 DIV > P: first-child { color ; blue }
 DIV est ici l'élément parent
Le signe > précède le 2ème sélecteur (élément enfant) pour lequel on a spécifié une pseudo-classe :first-child
Tout premier élément-enfant "paragraphe" d"un élément >DIV> sera ainsi affiché en bleu dans le document
/* ... */
 
  /*  ...commentaires... */  Commentaires
 

ACCUEIL |  PAGE PRECEDENTE |  PAGE SUIVANTE |  DEBUT DE PAGE |  INDEX