La syntaxe des CSS

La syntaxe des CSS

On commence en premier par définir l'élément que l'on souhaite mettre en forme :

une balise, une classe ou un identifiant.

Ensuite, entre crochets ({ et }) on indique les propriétés CSS utilisées puis leur valeur.

La syntaxe sera alors :

   1  div
   2    {
   3      propriété: valeur;
   4      propriété2: valeur2;
   5      propriété3: valeur3;
   6    }
 

// Balise, classe ou identifiant ?

Lorsque l'on souhaite définir une classe, on précéde le nom de cette dernière par un .
(point). Pour définir un identifiant, son nom sera précédé d'un # (Dièse).

Puis, lorsque l'on définie une balise, on indique simplement son nom, sans rien devant.

Enfin, il existe un sélecteur universel : le symbole *.

   1  .ma_classe { propriété: valeur; }
   2  #mon_identifiant { propriété: valeur; }
   3  ma_balise { propriété: valeur; }

Certaines balises enfants peuvent hériter de certaines propriétés CSS de leur
balise parent :

   1  <div class="code">
   2  <!-- on dira ici que la classe code donne une couleur bleue
      au texte et une police Courrier -->
   3    <h1>une_fonction()</h1>
   4    <h2>une_autre_fonction()</h2>
   5  </div>

Dans notre exemple, tous les éléments entre <div class="code"> et
</div> seront écrits en bleu avec une police Courrier (Comme ça).

Il est également possible de faire des sortes de combinaisons, pour cibler des
balises/classes enfants, sans avoir à surcharger de classes suplémentaires les balises.

Prenons l'exemple d'un menu, on le fait avec les balises indiquant une liste :

   1  <ul id="menu">
   2    <li><a href="index.hml">Accueil</a></li>
   3    <li><a href="nous.hml">qui sommes nous ?</a></li>
   4    <li><a href="travaux.hml">Nos travaux</a></li>
   5    <li>Contact</li>
   6  </ul>

Nous allons, avec les css, positionner et mettre en forme le menu (ajouter une bordure, le mettre à gauche du contenu, etc...).

   1  #menu
   2    {
   3      /* Propriétés CSS de l'ensemble, par la même
   4      occasion, on découvre ce qu'est un commentaire en CSS */
   5    }
   6  #menu li
   7    {
   8      /* Propriétés CSS de chaque option du menu*/
   9    }

Dans cette feuille de style, la première série d'indications concernaient l'ensemble
du menu (c'est ici que l'on indique que l'on désire une bordure, par exemple). La deuxième série
d'indications concerne uniquement les balises <li> contenues dans l'élément identifié par
menu, c'est ici que nous indiquerons par exemple, que l'on ne doit pas afficher la puce.

On pourrai faire la même chose pour définir les propriétés des liens du menu (d'une telle
couleur en temps normal, et d'une autre l'orsqu'il est pointé par la souris, nous y reviendrons).

Le code serait alors #menu a.

De cette manière, il est logique de déduire que peu importe la hiérarchie de la balise enfant (elle peut être sous-enfant, sous-sous-enfant...).

Il existe un symbole outil (sélecteur, comme *) qui permet de parvenir à un
résultat assez semblable, mais qui ne concernerait qu'une hiérarchie directe (balise parent et balise enfant directement). Ce symbole est >.

De cette manière :

   1  #menu > a
   2    {
   3      /* porpoiétés du lien */
   4    }
   5  #menu > li
   6    {
   7      /* porpoiétés de li */
   8    }
    

De cette manière, les attributs concernant <li>, fonctionneront toujours, mais plus ceux concernant <a>, car ils sont sous-enfants de menu et non directement enfants.
Note : des problèmes d'incompatibilité sont notés avec Internet Explorer version 6 lors de l'utilisation de l'outil >.

Cet inconvénient peut néanmoins devenir avantage dans des situations futures, mais nous y reviendrons. L'un des derniers outils à connaître est le symbole +, il est très particulier : il sert à définir un élément uniquement si il est précédé d'un autre précisément.

Par exemple :

   1  p + img
   2    {
   3      /* propriétés CSS */
   4    }
       
L'image ne prendra la mise en forme définie seulement si elle est précédée d'un
paragraphe. 

Note : comme pour >, des problèmes d'incompatibilité sont notés avec Internet Explorer version 6 lors de l'utilisation de cet outil.

Il est possible de définir plusieurs éléments en même temps en les séparant par des
virgules, comme :

   1  .classe, .classe2
   2    {
   3      propriété: valeur;
   4    }
 

// Les sous propriétés

Ce terme n'est pas issu de la documentation officielle [traduction en français], mais même si il ne définit pas clairement un type de propriété, il peut avoir du sens.

Prenons l'exemple de la propriété border : il existe 4 bordures, celle du haut (top), bas (bottom), de gauche (left), et de droite (right).
Il est possible de définir les mêmes valeurs pour les 4 bordures, ou alors, les
dissocier :

    1  border: 1px black solid;
    2  /* les 4 bordures seront en noir, d'un trait continu et de largeur
    1 pixel */
    3  border-top: border: 1px black solid;
    4  border-left: border: 1px black solid;
    5  border-bottom: border: 1px #333333 solid;
    6  border-right: border: 1px #333333 solid;
    7  /* Ici, les bordures du haut et de gauche seront en noir,
    8  et celles de droite et du bas en gris foncé
    9  ce qui donnera un petit effet de relief */
 

je les appelle sous-propriétés car elles définissent plus précisément ce qu'une
propriété plus courte défini de manière générale.

Chaque particule qui fait la sous-propriété est séparée de la propriété originale par
le symbole - (tiret).

On trouve maximum 2 sous-propriétés (ex : list-style-type qui indique quel
est le format de la puce de la liste).

// Les pseudo-formats

Les pseudo-formats sont des outils qui servent à séléctionner des éléments aux caractères
particuliers.

Le syntaxe est :

   1  .classe:pseudo-format

Les pseudo-formats les plus connus sont ceux qui définissent le comportement d'un
lien hypertexte :

   1  a:link
   2  /* dans le cas où l'élément a est un lien (car il peut aussi être
     une ancre) */
   3  a:active
   4  /* dans le cas où le visiteur clique sur le lien */
   5  a:visited
   6  /* dans le cas où la page a déjà été visitée */
   7  a:hover
   8  /* dans le cas où la souris pointe sur le lien */

C'est grâce à ces pseudo-formats que l'on change la couleur d'un lien dans la page.

Mais il existe d'autres pseudo-formats :

:focus, que l'on utilise souvent pour les champs de formulaires, lorsque le focus est sur le champ.

:first-letter qui permet de définir un style sur la première lettre du bloc uiquement.

:first-line qui permet de définir le style de la première ligne.

:before qui place du contenu avant le contenu du bloc.

:after qui place du contenu après le contenu du bloc.

On utilise ces pseudo-formats de cette manière :

   1  .bloc:before
   2   {
   3      content: "debut de la phrase";
   4   }
   5
   6  .bloc:after
   7    {
   8      content: "fin de la phrase";
   9    }
  

Note : Les pseudo-formats :after et :before ne sont pas interprété sous la version 6 Windows d'Internet Explorer. vous pouvez avoir un apreçu de l'utilisation de ces pseudo-formats sur la page d'exemple n°5

> retour au sommaire

> voir la suite