Lisez-moi S.V.P. 

2 Introduction à CSS2

Contenu

2.1 Un bref tutoriel de CSS2 pour HTML

Nous allons montrer dans ce tutoriel combien il est facile de réaliser des feuilles de style simples. Pour cela, vous devrez connaître un peu HTML (voir [HTML40]) et une terminologie de base de l'impression numérique.

Commençons par un petit document HTML :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
  <HEAD>
  <TITLE>La page personnelle de Bach</TITLE>
  </HEAD>
  <BODY>
    <H1>La page personnelle de Bach</H1>
    <P>Jean-Sébastien Bach était un compositeur prolifique.
  </BODY>
</HTML>

Pour rendre la couleur du texte des éléments H1 bleu, vous pouvez écrire la règle de feuille de style suivante :

  H1 { color: blue }

Une règle CSS consiste en deux parties principales : un sélecteur ('H1') et une déclaration ('color: blue'). Celle-ci se compose à son tour de deux parties : une propriété ('color') et une valeur ('blue'). Bien que cet exemple n'agisse que sur une seule des propriétés nécessaires au rendu d'un document HTML, cela suffit pour qu'elle soit qualifiée de feuille de style. Combinée avec d'autres feuilles de styles (la combinaison de feuilles de style est une fonction fondamentale des CSS), elle agira sur la présentation finale du document.

La spécification HTML 4.0 définit la façon de relier les feuilles de style à un documents HTML : soit par incorporation dans celui-ci, soit par appel à une feuille de style externe. Pour l'incorporation, on utilise l'élément STYLE :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
  <HEAD>
  <TITLE>La page personnelle de Bach</TITLE>
  <STYLE type="text/css">
    H1 { color: blue }
  </STYLE>
  </HEAD>
  <BODY>
    <H1>La page personnelle de Bach</H1>
    <P>Jean-Sébastien Bach était un compositeur prolifique.
  </BODY>
</HTML>

Pour une souplesse d'utilisation maximale, on recommande aux auteurs l'usage de feuilles de style externes. On peut en changer sans modifier la source HTML du document et les partager entre plusieurs documents. Pour faire le lien vers une feuille de style externe, on emploie l'élément LINK :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
  <HEAD>
  <TITLE>La page personnelle de Bach</TITLE>
  <LINK rel="stylesheet" href="bach.css" type="text/css">
  </HEAD>
  <BODY>
    <H1>La page personnelle de Bach</H1>
    <P>Jean-Sébastien Bach était un compositeur prolifique.
  </BODY>
</HTML>

L'élément LINK spécifie :

Pour montrer la relation étroite entre feuille de style et balisage structuré, nous utiliserons l'élément STYLE pour ce tutoriel. Ajoutons des couleurs :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
  <HEAD>
  <TITLE>La page personnelle de Bach</TITLE>
  <STYLE type="text/css">
    BODY { color: red }
    H1 { color: blue }
  </STYLE>
  </HEAD>
  <BODY>
    <H1>La page personnelle de Bach</H1>
    <P>Jean-Sébastien Bach était un compositeur prolifique.
  </BODY>
</HTML>

Deux règles composent maintenant la feuille de style : la première spécifie la couleur rouge ('red') pour l'élément BODY et la seconde la couleur bleu ('blue') pour l'élément H1. Comme aucune valeur de couleur n'est spécifiée pour l'élément P, celui-ci hérite de la couleur de son élément parent, ici BODY. L'élément H1 est aussi un élément enfant de BODY, mais la seconde règle prévaut sur la valeur héritée. En CSS il y a souvent de tels conflits entre différentes valeurs, cette spécification décrit leur résolution.

CSS2 comporte plus de 100 propriétés différentes, dont 'color'. Voyons quelques-unes d'entre elles :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
  <HEAD>
  <TITLE>La page personnelle de Bach</TITLE>
  <STYLE type="text/css">
    BODY { 
      font-family: "Gill Sans", sans-serif;
      font-size: 12pt;
      margin: 3em; 
    }
  </STYLE>
  </HEAD>
  <BODY>
    <H1>La page personnelle de Bach</H1>
    <P>Jean-Sébastien Bach était un compositeur prolifique.
  </BODY>
</HTML>

En premier lieu, on remarque plusieurs déclarations qui sont réunies à l'intérieur d'un bloc délimité par des accolades ({...}), qu'elles sont séparées par des points-virgules (;), la dernière pouvant aussi se terminer par un point-virgule.

La première déclaration sur l'élément BODY spécifie la famille de police "Gill Sans". Si celle-ci n'était pas disponible, l'agent utilisateur (souvent un "navigateur") utilisera la famille de polices 'sans-serif' qui est l'une des cinq familles de polices génériques reconnues pour chacun des agents utilisateurs. Les éléments enfants de BODY héritent de la valeur de la propriété 'font-family'.

La seconde déclaration fixe la taille de la police de BODY à 12 points. L'unité "point" est couramment employée en typographie d'impression pour mesurer le corps d'une police et d'autres longueurs. C'est un exemple d'unité absolue qui ne varie pas en fonction de l'environnement.

La troisième déclaration s'appuie sur une unité relative qui varie en fonction de son entourage. L'unité "em" se réfère à la taille de la police de l'élément. Le résultat, dans ce cas, sera que les marges autour de l'élément BODY seront trois fois plus grandes que la taille de la police.

2.2 Un bref tutoriel de CSS2 pour XML

On peut utiliser CSS avec chaque format de document structuré, par exemple avec des applications de eXtensible Markup Language [XML10]. En fait, XML est plus dépendant des feuilles de style que HTML, car les auteurs peuvent introduire des éléments propres que les agents utilisateurs ne savent pas interpréter.

Voici un fragment XML simple :

<ARTICLE>
  <HEADLINE>La rencontre de Frédéric le Grand et de Bach</HEADLINE>
  <AUTHOR>Johann Nikolaus Forkel</AUTHOR>
  <PARA>
    Un soir, alors qu'il préparait sa
    <INSTRUMENT>flûte</INSTRUMENT> et que ses
    musiciens étaient réunis, un officier lui apporta
    la liste des étrangers qui venaient d'arriver.
  </PARA>
</ARTICLE>

Pour rendre ce fragment à la manière d'un document, nous devons d'abord déclarer lesquels de ces éléments sont de type en-ligne (c.-à-d. qui ne provoquent pas de fins de lignes) et de type bloc (c.-à-d. qui provoquent des fins de lignes).

INSTRUMENT { display: inline }
ARTICLE, HEADLINE, AUTHOR, PARA { display: block }

La première règle stipule que INSTRUMENT est de type en-ligne et la seconde, avec une liste de sélecteurs séparés par des virgules, que tous les autres éléments sont de type bloc.

Pour lier une feuille de style à un document XML, l'une des propositions consiste à utiliser une instruction de traitement :

<?XML:stylesheet <?xml-stylesheet type="text/css" href="bach.css"?>
<ARTICLE>
  <HEADLINE>La rencontre de Frédéric le Grand et de Bach</HEADLINE>
  <AUTHOR>Johann Nikolaus Forkel</AUTHOR>
  <PARA>
    Un soir, alors qu'il préparait sa
    <INSTRUMENT>flûte</INSTRUMENT> et que ses
    musiciens étaient réunis, un officier lui apporta
    la liste des étrangers qui venaient d'arriver.
  </PARA>
</ARTICLE>

Ce qu'un agent visuel pourrait rendre par :

Exemple de rendu.   [D]

Remarquer que le mot "flûte" reste dans le paragraphe puisqu'il s'agit du contenu de l'élément de type en-ligne INSTRUMENT.

Cependant, le texte n'est pas formaté de la façon souhaitée. Par exemple, le corps de la police du titre devrait être plus grand que celui du reste du texte et aussi le nom de l'auteur pourrait être en italique :

INSTRUMENT { display: inline }
ARTICLE, HEADLINE, AUTHOR, PARA { display: block }
HEADLINE { font-size: 1.3em }
AUTHOR { font-style: italic }
ARTICLE, HEADLINE, AUTHOR, PARA { margin: 0.5em }

Ce qu'un agent visuel pourrait rendre ainsi :

Exemple de rendu.   [D]

Plus on ajoute de règles à la feuille de style, plus on peut améliorer la présentation du document.

2.3 Le modèle de traitement de CSS2

Ce chapitre présente un modèle de fonctionnement possible pour un agent supportant CSS. Ce n'est qu'un modèle conceptuel, les implémentations effectives pouvant varier.

Dans ce modèle l'agent utilisateur traite une source en parcourant les étapes suivantes :

  1. Parcourir le document source en créant un arbre de ce document.
  2. Identifier le type de média cible.
  3. Rechercher toutes les feuilles de style associées au document et spécifiées pour le type de média cible.
  4. Annoter chacun des éléments de l'arbre du document et assigner une valeur unique à chacune des propriétés en rapport avec le type de média cible. On assigne des valeurs aux propriétés selon le mécanisme décrit dans le chapitre sur la cascade et l'héritage.

    Le calcul de ces valeurs dépend en partie du choix de l'algorithme de formatage approprié au type de média cible. Par exemple, si le média cible est un écran, les agents utilisateurs appliquent le modèle de formatage visuel. Si le média de destination est une page à imprimer, ils appliquent le modèle de la page. S'il s'agit d'un appareil de rendu auditif (ex. synthétiseur de parole), ils appliquent alors le modèle pour un rendu auditif.

  5. Générer une structure de formatage à partir de l'arbre annoté du document. Souvent, la structure de formatage ressemble beaucoup à celle de l'arbre du document, mais elle peut aussi en différer de façon significative, notamment quand les auteurs font usage de pseudo-éléments et de contenu généré. Premièrement, il n'est pas indispensable que la structure de formatage revête "l'aspect d'un arbre", la nature de la structure dépendant de l'implémentation. Deuxièmement, la structure de formatage peut contenir plus ou moins d'informations que l'arbre du document. Par exemple, si la propriété 'display' d'un élément de l'arbre a la valeur 'none', cet élément ne génèrera rien dans la structure de formatage. À l'inverse, un élément de liste peut générer plus d'informations : le contenu de l'élément de liste et l'information de son style (ex. une puce, une image).

    Noter que le client CSS ne modifie pas l'arbre du document pendant cette phase. En particulier, le contenu généré par les feuilles de styles ne repasse pas dans le processeur du langage du document (ex. pour un nouveau traitement).

  6. Transférer la structure de formatage vers le média cible (ex. imprimer le résultat, l'afficher sur un écran, le transformer en parole, etc.).

L'étape 1 n'entre pas dans le cadre de cette spécification (voir, par exemple, [DOM]).

Les étapes 2 à 5 constituent le principal objet de cette spécification.

L'étape 6 n'entre pas non plus dans ce cadre.

2.3.1 Le canevas

Quel que soit le média, le terme canevas désigne "l'espace dans lequel s'inscrit la structure de formatage". Le canevas est infini pour chacune des dimensions de cet espace, mais le rendu a lieu généralement dans une région finie du canevas. Celle-ci est établie par l'agent utilisateur selon le média cible. Ainsi, un rendu sur écran impose en général aux agents utilisateurs une largeur minimum qui est initialement déterminée à partir de la zone de visualisation. Un rendu sur une page leur impose des contraintes de largeur et de hauteur. Les agents utilisateurs auditifs peuvent imposer des limites dans un espace sonore mais pas dans le temps.

2.3.2 Le modèle d'adressage de CSS2

Grâce aux sélecteurs et propriétés de CSS2, les feuilles de style permettent une référence aux parties d'un document ou d'un agent utilisateur, soit :

2.4 Les principes de construction de CSS

CSS2, comme CSS1 avant lui, est fondé sur un ensemble de principes de construction :