« Le langage CSS/Structure et syntaxe » : différence entre les versions

Un livre de Wikilivres.
Contenu supprimé Contenu ajouté
Tavernierbot (discussion | contributions)
m Robot : Retouches cosmétiques
Ligne 58 : Ligne 58 :
==== Déclaration de styles ====
==== Déclaration de styles ====


Une première méthode pour utiliser des styles CSS consiste à intégrer les styles dans l'entête du fichier Html à l'aide s'une balise ''style''. Le code CSS est alors simplement écrit entre la balise ouvrante et la balise fermante :
Une première méthode pour utiliser des styles CSS consiste à intégrer les styles dans l'entête du fichier Html à l'aide d'une balise ''style''. Le code CSS est alors simplement écrit entre la balise ouvrante et la balise fermante :


<nowiki><html>
<nowiki><html>

Version du 6 mars 2007 à 13:21

Modèle:Programmation CSS

Si vous êtes pressé consultez en priorité :

Ce chapitre a pour but de poser les bases de la structure d'une feuille de styles CSS ainsi que les premiers éléments de syntaxe. Nous aborderons également la liaison entre les documents web et les CSS, la propriété de cascade des styles et l'adéquation des styles à l'appareil restituant la page web.

Règles syntaxiques de base

  • Les feuilles de styles CSS ne sont pas sensibles à la casse : elles ne tiennent pas compte des majuscules et minuscules. Exception faite pour les éléments n'obéissant pas directement aux règles de syntaxe CSS, notamment les attributs id et class (dont le nommage est assuré par le rédacteur : vous), les noms des polices de caractères (exemple : "Trebuchet MS"), et les URL ne répondant pas à ces règles.
  • Les feuilles de styles CSS ne tiennent pas compte des espaces et retour à la ligne.
  • Les indentifiants (nom, id et class) ne peuvent contenir que des caractères A-Z, a-z, 0-9 plus le tiret (-) et le caractère de soulignement (_). Il ne peuvent pas commencer par un nombre.

Structure générale

Syntaxe des règles de style

Une feuille de styles CSS fonctionne sous forme de déclarations. Une déclaration est composée au minimum de deux éléments : l'élément de la page auquel on souhaite appliquer un style, et le groupe de règles définissant le style. Analysons cette déclaration :

h1 { color: red }

Ici, l'élément à mettre en forme est h1 (titre de niveau 1) et le groupe de règles, délimité par les accolades, contient la règle « mettre cet élément en rouge ». Une règle consiste en une propriété (ici color), suivie par deux points (:), suivie enfin par la valeur associée à la propriété (ici rouge).

Il est bien évidemment possible de spécifier plusieurs règles, pour un même élément, en les séparant par des point-virgules (;) de cette façon :

h1 {
   color: red;
   font-weight: bold
}

On peut aussi spécifier le même jeu de règles pour plusieurs identifiants en les séparant par des virgules (,) :

h1, h2 {
   color: red;
   font-weight: bold
}

Remarque : la dernière règle du groupe ne comporte pas obligatoirement de point-virgule terminal. Toutefois le mettre systématiquement évite de l'oublier. Il faut savoir que les erreurs de syntaxes CSS ont pour effet d'interrompre dans le navigateur web l'interprétation des styles et donc la mise en forme. Contrairement au moteur d'interprétation du code Html des navigateurs, l'interprétation des CSS par les navigateurs ne tolère habituellement pas d'erreur de syntaxe.

Modularisation des styles

Il est possible d'importer les styles contenus dans des fichiers de styles différents afin de les organiser de façon modulaire. Une pratique courante consiste à scinder les styles relatifs à la mise en page, c'est-à-dire le placement des éléments de la page, et les styles relatifs au graphisme (couleurs, bordures, polices, etc.). Pour ce faire, il faut utiliser la syntaxe suivante :

@import "fichier.css";

fichier.css est le nom du fichier contenant les styles à importer. Cette mention doit être spécifiée au tout début de la feuille de style, avant d'éventuels styles de la feuille (déclarations). Elle doit aussi impérativement comporter un point-virgule (;) final.

Remarque : si le chemin du fichier à importer est relatif (pas de barre / devant ni de http://), il sera relatif au fichier contenant cette importation. Ici on a donc supposé qu'ils étaient dans le même répertoire.

Utiliser les styles CSS dans une page web

Dans une page Html

NB: l'annexe Le langage CSS/Interface HTML offre une vue synthétique des exemples exposés ci-après.

Déclaration de styles

Une première méthode pour utiliser des styles CSS consiste à intégrer les styles dans l'entête du fichier Html à l'aide d'une balise style. Le code CSS est alors simplement écrit entre la balise ouvrante et la balise fermante :

<html>
  <head>
   <style type="text/css">
      p {
        font-family: Bitstream Vera Sans;
        color: #666;
        line-height: 1.6em;
      }
    </style>
  </head>
  <body>
    <p>
      Exemple de page Html avec CSS intégrés
    </p>
  </body>
 </html>

Les styles CSS ainsi définis ne sont évidemment valides que pour la page en question, on réservera donc cette méthode à l'expérimentation ou à des styles vraiment particuliers. Pour plus de souplesse, on peut donc transférer le code CSS dans un fichier texte, par exemple styles.css, et appeler ces styles dans l'entête Html à l'aide d'une balise link. Ce fichier CSS peut alors être inclus dans toute page web de cette manière :

<html>
  <head>
    <link rel="stylesheet" type="text/css" href="styles.css">
  </head>
  <body>
    <p>
      Exemple de page Html avec CSS externes
    </p>
  </body>
 </html>

Le fichier styles.css contient alors simplement :

p {
   font-family: Bitstream Vera Sans;
   color: #666;
   line-height: 1.6em;
 }
 

Remarque : le chemin des fichiers CSS spécifiés peut être absolu ou relatif. Dans ce deuxième cas, il est relatif au fichier important la feuille de styles, en l'occurrence le document web. Exemple :

  • la page web est http://mon.site.org/index.html
  • la feuille de styles est http://mon.site.org/css/styles.css

On peut alors utiliser une des règles équivalentes suivantes :

<link rel="stylesheet" type="text/css" href="css/styles.css">
 <link rel="stylesheet" type="text/css" href="./css/styles.css">
 <link rel="stylesheet" type="text/css" href="http://mon.site.org/css/styles.css">
 <link rel="stylesheet" type="text/css" href="/css/styles.css">
 

Pour être exhaustif, signalons qu'il existe une autre méthode pour inclure du code CSS externe. Elle consiste à utiliser la règle CSS @import qui permet d'importer une feuille de style dans un code CSS :

<html>
  <head>
    <style type="text/css">
      @import "styles.css";
    </style>
  </head>
  <body>
    <p>
      Exemple de page Html avec CSS externes
    </p>
  </body>
 </html>

Cette règle a comme caractéristique de ne pas être comprise par les vieux navigateurs web, par exemple Netscape 4, il faut donc l'utiliser en toute connaissance de cause. Son avantage est que l'on peut facilement déclarer plusieurs feuilles de styles à importer sans multiplier les balises Html.

Adapter les styles au périphérique de sortie

Le périphérique de sortie de la page web n'est pas forcément l'écran de l'ordinateur. Il peut être simplement l'imprimante pour faire un tirage papier, mais aussi un équipement mobile ou adapté à des personnes présentant certains handicaps (de vue notamment !). Les styles définis pour l'écran peuvent donc ne pas convenir pour d'autres périphériques. L'exemple classique est le menu latéral de gauche : est-il vraiment utile à l'impression ? Généralement non, il faudrait donc le faire disparaître dans ce cas.

Ceci est possible dans les feuilles de styles grâce à la mention du media de sortie. On trouvera la liste des média possibles à la page Interface Html. Il existe à nouveau deux techniques : la mention directement dans la feuille ou la mention à l'importation d'une feuille externe. Dans le premier cas, les styles CSS contiennent un passage de ce type :

@media screen {
  /* règles de styles */
}

Ceci définit des styles spécifiques à la sortie écran. Dans le second cas, le plus courant, on définit des fichiers séparés par type de media. Il faut alors ajouter la mention du media dans la page web à l'aide d'un attribut de la balise link :

<html>
  <head>
    <link rel="stylesheet" type="text/css" href="styles.css" media="all" />
   <link rel="stylesheet" type="text/css" href="print.css" media="print" />
  </head>
  <body>
    <p>
      Exemple de page Html avec CSS intégrés
    </p>
  </body>
 </html>

Dans cet exemple, la feuille styles.css contient le style de base du site, celui qui est affiché à l'écran, et la feuille print.css modifie ce style pour l'impression.

Dans un document Xml

On peut importer une feuille de styles CSS dans un fichier Xml. Il faut utiliser la règle suivante :

<?xml-stylesheet type="text/css" href="styles.css"?>

L'inconvénient par rapport à l'utilisation d'une feuille de transformation XSL permettant de générer du Html à partir du Xml, est que tous les éléments Xml ont la même apparence par défaut. Il faut ainsi redéfinir le style de quasiment chaque élément. Au contraire une transformation en Html permet d'utiliser les éléments standards du Html comme les paragraphes, les titres, les listes, etc.

Ordre d'interprétation des styles et cascade

Cascade de styles

Dans le cas où plusieurs feuilles de styles sont utilisées dans la même page web, les règles CSS sont construites au fur et à mesure de la lecture de chacune d'entre elles, dans l'ordre mentionné des feuilles de styles. Ainsi si des règles contradictoires apparaissent dans les styles, c'est la dernière règle lue qui prime.

Considérons par exemple les scripts CSS styles.css et couleurs.css suivants :

/* styles.css */
p {
  color: black;
}
/* couleurs.css */
p {
  color: gray;
} 

Les textes des paragraphes seront de couleur grise si ces styles sont importés de cette manière :

@import "styles.css";
@import "couleurs.css";

alors qu'ils seraient noir en inversant l'ordre d'importation des feuilles de styles. Il faut donc veiller à ne pas dupliquer des règles dans des fichiers CSS différents sous risque de casse-tête par la suite. L'intérêt de cette spécificité de cascade est que les styles par défaut du navigateur sont toujours écrasés par les styles de la page web, lesquels peuvent à nouveau être écrasés par les styles de l'utilisateur lorsque le navigateur le permet. Ainsi si l'utilisateur visite régulièrement un site écrit trop petit, il peut définir une règle agrandissant la police pour ce site.

Remarques :

  • toutes les méthodes de déclaration des CSS interviennent dans la cascade lorsqu'elles sont mélangées dans la même page Html
  • la cascade ne s'applique que lorsque c'est exactement le même sélecteur qui est employé ou, bien sûr, un sélecteur de priorité supérieure (lire la suite).

Priorité des règles

Afin d'éviter que le style d'une partie précise du document (par exemple le menu) ne soit facilement modifié par une règle assez générale comme celle du paragraphe précédent, il existe la notion de priorité des règles. Ainsi dans la cascade, une règle apparaissant postérieurement ne peut modifier un style que si sa priorité est égale ou supérieure.

Considérons la feuille de styles suivante dans laquelle nous souhaitons que les titres du menu n'aient pas la même couleur que les titres du texte :

h1, h2, h3 {
  color: darkblue;
}
div#menu h1 {
  color: navy;
}

Le code Html correspondant serait :

<div id="page">
   <h1>Titre de la page</h1>
   <p>...</p>
 </div>
 <div id="menu">
   <h1>Section de menu</h1>
   <ul>
     <li>Entrée de menu 1</li>
     ...
   </ul>
 </div>

Nous supposons ici que les éléments du menu sont tous contenus dans un unique bloc parent, un élément div d'identifiant menu. Que se passerait-il si une feuille de styles importée par la suite modifiait à nouveau la couleur des éléments de titre Html par un « h1 {color: black} » ? Rien !

Ordre des spécificités des règles

Il est évident dans l'exemple précédent que les titres du menu ne doivent pas être traités comme les autres titres. Aussi, plus le sélecteur d'élément est en quelque sorte précis dans sa cible, plus sa priorité est importante. La précision du sélecteur est appelé spécificité dans le jargon CSS. L'ordre des spécificités est le suivant, de la moins prioritaire à la plus prioritaire :

  1. élément Html, par exemple « h1 {color: black} »
  2. imbrication d'éléments, par exemple « div h1 {color: black} »
  3. utilisation d'une classe, par exemple « h1.noir {color: black} »
  4. utilisation d'un identifiant, par exemple « h1#nom-du-site {color: black} »
  5. style dans la balise Html, par exemple « <h1 style="color: black">...</h1> »

Un style moins prioritaire ne peut jamais modifier un style plus prioritaire. Il existe cependant un moyen de déroger à cette règle : la mention !important. Cette mention s'insère juste derrière une valeur de propriété CSS et indique au navigateur qu'il ne faut pas tenir compte de styles contradictoires par la suite. Elle s'utilise de cette manière :

p {
  color: gray !important;
}

Cette mention n'est toutefois pas interprétée par les Internet Explorer 5.0, 5.5 et 6.0 de Microsoft, il ne faut donc pas compter sur elle pour contourner les règles de priorité !

Calcul de spécificité

Le calcul de la spécificité d'une règle se fait en partant des éléments les plus spécifiques au moins spécifiques. À chaque pas, le décompte du nombre de sélecteurs correspondant à la spécificité indique le niveau de priorité. En effet, il est normal que :

div#page p em

soit plus spécifique que :

div#page em

mais moins que :

div#page p em.rouge

Ainsi lorsqu'on parcoure les différentes spécificités dans l'ordre décroissant, on obtient :

  • « div#page » qui met tout le monde à égalité
  • « em.rouge » qui indique que la dernière règle est prioritaire
  • « p em » qui place la première en priorité 2
  • « em » qui place la deuxième en dernière priorité

En corrolaire, ceci signifie qu'il vaut toujours mieux utiliser le moins possible de sélecteurs pour simplifier l'ajout de règles plus spécifiques. Par exemple dans le code Html suivant :

<div id="page">
   <p> ...
      <ul>
        <li> <a>...</li>
        ...
      </ul>
   </p>
 </div>

le style des liens A doit vraisemblablement être spécifié en partant d'une règle simple comme « div#page a » plutôt que « div#page p ul li a » d'emblée. C'est seulement si d'autres liens apparaissent dans la page en dehors des listes que l'on utilisera « div#page li a », et ainsi de suite.