Langues

Ceci est une traduction. Elle peut avoir des erreurs ou être dépassée par rapport à la version anglaise. Traducteur(-trice): Anne-Marie Luigi

Chapitre 2
CSS

Ceci est le chapitre 2 du livre Cascading Style Sheets, designing for the Web par Håkon Wium Lie et Bert Bos (2e édition, 1999, Addison Wesley, ISBN 0-201-59625-3)

Comme nous l’avons expliqué dans le chapitre précédent, les éléments HTML permettent aux concepteurs de page Web d'annoter un document quant à sa structure. La spécification HTML répertorie les directives sur la façon dont les navigateurs doivent afficher ces éléments. Par exemple, vous pouvez être raisonnablement sûr que le contenu d'un élément strong sera affiché en gras. Vous pouvez également avoir la quasi-certitude que la plupart des navigateurs affichent le contenu d'un élément h1 en utilisant une police de grande taille... au moins plus grande que l'élément p et que l'élément h2. Mais par-delà la confiance et l'espoir, vous n'avez aucun contrôle sur l'apparence de votre texte.

CSS change cela. CSS met le concepteur dans le siège du conducteur. Nous consacrons une grande partie du reste de ce livre à expliquer ce que vous pouvez faire avec CSS. Dans ce chapitre, nous commençons par vous présenter les bases d'écriture des feuilles de style et ainsi que la façon dont CSS et HTML fonctionnent ensemble pour décrire à la fois la structure et l'apparence de votre document.

Règles et feuilles de style

Pour commencer à utiliser CSS, vous n'avez même pas besoin d'écrire des feuilles de style. Le chapitre 16 vous indiquera comment pointer vers les feuilles de style existantes sur le Web.

Il existe deux façons de créer des CSS. Vous pouvez soit utiliser un éditeur de texte normal et écrire les feuilles de style "à la main", soit utiliser un outil dédié - par exemple une application de conception de page Web - qui supporte le CSS. Les outils dédiés vous permettent de créer des feuilles de style sans avoir à apprendre la syntaxe du langage CSS. Cependant, dans de nombreux cas, le concepteur voudra modifier la feuille de style à la main par la suite. Nous vous recommandons donc d'apprendre à écrire et à modifier les feuilles de style à la main. Commençons ! 

H1 { color: green }

Ce que vous voyez ci-dessus est une règle CSS simple qui contient une seule règle. Une règle est un énoncé sur un aspect stylistique d'un ou de plusieurs éléments. Une feuille de style est l'ensemble d'une ou plusieurs règles qui s'appliquent à un document HTML. La règle ci-dessus définit la couleur de tous les titres de premier niveau (h1). Jetons un coup d'œil à ce que pourrait être le résultat visuel de la règle :

Figure 2.1

[image]

Nous allons maintenant commencer à disséquer la règle.

Anatomie d’une règle

Une règle se compose de deux parties :

  • Sélecteur - la partie avant l’accolade gauche
  • Déclaration - la partie à l'intérieur des accolades

    [image]

Le sélecteur est le lien entre le document HTML et le style. Il spécifie quels éléments sont affectés par la déclaration. La déclaration est la partie de la règle qui énonce ce que sera l’effet. Dans l’exemple ci-dessus, le sélecteur est h1 et la déclaration est "color : green." Par conséquent, tous les éléments h1 seront affectés par la déclaration, c'est-à-dire qu’ils seront activés en vert. (La propriété color n'affecte que la couleur du texte de premier plan, il y a d'autres propriétés pour l'arrière-plan, la bordure, etc.)

Le sélecteur ci-dessus est basé sur le type de l'élément : il sélectionne tous les éléments de type "h1." Ce genre de sélecteur s'appelle type selector. N’importe quel type d’élément HTML peut être utilisé comme sélecteur de type. Les sélecteurs de type sont les plus simples. Nous abordons d'autres types de sélecteurs dans la section CSS selectors.

Anatomie d'une déclaration

Une déclaration se compose de deux parties séparées par un signe deux-points :

  • Propriété - la partie avant le signe deux-points
  • Valeur - la partie après le signe deux-points

    [image]

La propriété est une qualité ou une caractéristique que possède quelque chose. Dans l'exemple précédent, c'est color. CSS2 (voir encadré séparé) définit environ 120 propriétés et nous pouvons assigner des valeurs à chacune d'entre elles.

Spécifications CSS

Les feuilles de style en cascade sont décrites formellement dans deux spécifications W3C : CSS1 et CSS2. CSS1 a été publié en décembre 1996 et décrit un modèle de formatage simple, principalement pour les présentations sur écran. CSS1 a environ 50 propriétés (par exemple la couleur et la taille) de la police. CSS2 a été finalisé en mai 1998 et s'appuie sur CSS1. CSS2 inclut toutes les propriétés CSS1 et apporte environ 70 propriétés qui lui sont propres, telles que les propriétés pour décrire les présentations orales et les sauts de page. Dans ce livre, nous n'essayons pas de distinguer entre CSS1 et CSS2 et nous utilisons le terme générique "CSS" à moins que la distinction ne soit importante. La plupart des fonctionnalités décrites dans les quatre premiers chapitres font partie de CSS1. Si vous souhaitez lire les spécifications CSS elles-mêmes, vous pouvez les trouver sur : 

http://www.w3.org/TR/REC-CSS1
      
http://www.w3.org/TR/REC-CSS2

La valeur est une spécification précise de la propriété. Dans l'exemple, c'est «green», mais cela pourrait tout aussi bien être bleu, rouge, jaune ou une autre couleur.

Le diagramme ci-dessous montre tous les ingrédients d'une règle. Les accolades ({ }) et le signe deux-points (:) permettent au navigateur de faire la distinction entre le sélecteur, la propriété et la valeur.

Figure 2.2 Diagramme d'une règle.

[image]

Regrouper les sélecteurs et les règles

Lors de la conception des CSS, la brièveté était un objectif. Nous avons pensé que si nous pouvions réduire la taille des feuilles de style, nous pourrions permettre aux concepteurs d'écrire et de modifier des feuilles de style «à la main.» De plus, les feuilles de style courtes se chargent plus vite que les feuilles plus longues. CSS comprend donc plusieurs mécanismes pour raccourcir les feuilles de style en regroupant les sélecteurs et les déclarations.

Par exemple, considérez ces trois règles : 

H1 { font-weight: bold }
H2 { font-weight: bold }
H3 { font-weight: bold }

Les trois règles ont exactement la même déclaration - elles définissent la police en caractères gras. (Ceci est fait à l'aide de la propriété font-weight, que nous abordons dans Polices de caractères.) Puisque les trois déclarations sont identiques, nous pouvons regrouper les sélecteurs dans une liste séparés par des virgules et ne lister la déclaration qu'une seule fois, comme ceci : 

H1, H2, H3 { font-style: bold }

Cette règle produira le même résultat que les trois premières.

Un sélecteur peut avoir plus d'une déclaration. Par exemple, nous pourrions écrire une feuille de style avec ces deux règles : 

H1 { color: green }
H1 { text-align: center }

Dans ce cas, nous définissons tous les h1 comme devant être verts et centrés sur la toile. (Ceci est fait en utilisant la propriété text-align, abordée au chapitre 5.)

Mais nous pouvons obtenir le même effet plus vite en groupant les déclarations se rapportant à la même sélection dans une liste séparées par des points-virgules, comme ceci : 

H1 {
  color: green;
  text-align: center;
}

Toutes les déclarations doivent être contenues à l'intérieur de la paire d'accolades. Un point-virgule sépare les déclarations et peut - mais ce n'est pas obligé - apparaître également à la fin de la dernière déclaration. Aussi, pour faciliter la lecture de votre code, nous vous suggérons de placer chaque déclaration sur sa propre ligne, comme nous l'avons fait ici. (Les navigateurs ne s'en soucieront pas, ils ignorent simplement tous les espaces blancs et les sauts de ligne supplémentaires.)

Vous avez maintenant les bases de la création de règles CSS et des feuilles de style. Cependant, vous n'avez pas encore fini. Pour que la feuille de style soit efficace, vous devez "coller" votre feuille de style sur votre document HTML.

"Coller" des feuilles de style sur le document

Pour qu'une feuille de style affecte le document HTML, elle doit être "collée" au document. C'est-à-dire que la feuille de style et le document HTML doivent être combinés de manière à pouvoir travailler ensemble pour présenter le document. Cela peut être fait de l'une des quatre façons suivantes :

  1. Appliquer la feuille de style de base pour l'ensemble du document en utilisant l'élément style.
  2. Appliquer une feuille de style à un élément individuel en utilisant l'attribut style.
  3. Lier une feuille de style externe au document à l’aide de l’élément link.
  4. Importez une feuille de style en utilisant la notation CSS @import.

Dans la section suivante, nous discutons de la première méthode : utiliser l'élément style. Nous abordons l'utilisation de l'attribut style dans le chapitre 4, "CSS selectors" et utiliser l'élément link ainsi que la notation @import dans le chapitre 16, "Feuilles de style externes".

Coller en utilisant l'élément STYLE

Vous pouvez coller la feuille de style et le document HTML ensemble en mettant la feuille de style à l’intérieur d’un élément style en haut de votre document. L'élément style a été introduit en HTML spécifiquement pour permettre l'insertion de feuilles de style dans des documents HTML. Voici une feuille de style (ici en gras) collée à un document exemple en utilisant l'élément style . Le résultat est montré sur la figure 2.3. 

<HTML>
  <TITLE>Bach's home page</TITLE>
  <STYLE>
    H1, H2 { color: green }
  </STYLE>
  <BODY>
    <H1>Bach's home page</H1>
    <P>Johann Sebastian Bach was a prolific
        composer. Among his works are:
    <UL>
      <LI>the Goldberg Variations
      <LI>the Brandenburg Concertos
      <LI>the Christmas Oratorio
    </UL>
    <H2>Historical perspective</H2>
    <P>Bach composed in what has been referred to as
      the Baroque period.
  </BODY>
</HTML>

Figure 2.3 L’ajout d'une règle à une feuille de style pour activer h1 en vert et ensuite coller la feuille de style au document en utilisant les éléments style. (essayez-le)

[image]

Notez que l'élément style est placé après l'élément title et avant l'élément body. Le titre d'un document n'apparaît pas sur la toile, il n'est donc pas affecté par les styles CSS.

Le contenu d'un élément style est une feuille de style. Cependant, alors que le contenu d'éléments tels que h1, p, et ul apparaît sur la toile, le contenu d'un élément style n'apparaît pas sur la toile. C’est plutôt l' effect du contenu de l’élément style - la feuille de style - qui apparaît sur la toile. Vous ne voyez donc pas "{color: green}" affiché sur votre écran : à la place vous voyez deux éléments h1 de couleur verte. Aucune règle n'a été ajoutée qui affecte les autres éléments, de sorte que ces éléments apparaissent dans la couleur par défaut du navigateur.

Navigateurs et CSS

Pour un aperçu actualisé des navigateurs disponibles, voir la page de présentation W3C

Pour que le CSS fonctionne comme décrit dans ce livre, vous devez utiliser un navigateur optimisé pour CSS, c'est-à-dire un navigateur qui supporte CSS. Un navigateur CSS optimisé reconnaîtra l'élément style comme un conteneur pour une feuille de style et présentera le document en conséquence. La plupart des navigateurs qui sont distribués aujourd'hui supportent CSS, par exemple Microsoft Internet Explorer 4 (IE4), Netscape Navigator 4 (NS4) et Opera 3.5 (O3.5). Les estimations conservatrices indiquent que plus de la moitié des personnes sur le Web utilisent un navigateur optimisé pour CSS, et les chiffres augmentent régulièrement. Il y a de fortes chances que les personnes avec lesquelles vous communiquez aient des navigateurs CSS optimisés. Si ce n’est pas le cas, donnez-leur une raison pour se mettre à niveau !

La meilleure source d'information sur la façon dont les différents navigateurs supportent les CSS est les graphiques de WebReview.

Hélas, toutes les implémentations CSS ne sont pas parfaites. Lorsque vous commencez à expérimenter avec les feuilles de style, vous remarquerez rapidement que chaque navigateur est accompagné d'un ensemble de problèmes et de limitations. En général, les nouveaux navigateurs se comportent mieux que les anciens. IE4 et O3.5 sont parmi les meilleurs, et la prochaine offre de Netscape - nom de code Gecko - promet également une meilleure prise en charge de CSS.

Ceux qui n'utilisent pas les navigateurs optimisés pour CSS peuvent quand même lire les pages qui utilisent des feuilles de style. CSS a été soigneusement conçu pour que tout le contenu reste visible même si le navigateur ne sait rien sur CSS. Certains navigateurs, tels que Navigator version 2 et 3 de Netscape, ne prennent pas en charge les feuilles de style, mais ils en connaissent suffisamment sur l'élément style pour l'ignorer complètement. A part supporter les feuilles de style, ce comportement est correct.

Cependant, d'autres navigateurs qui ne connaissent pas l'élément style, tels que Netscape Navigator 1 et Microsoft Internet Explorer 2, ignoreront les balises style mais afficheront le contenu de l'élément style. Ainsi, l'utilisateur se retrouvera avec la feuille de style imprimée sur le dessus de la toile. Au moment de la rédaction du présent rapport, seuls quelques pour cent des utilisateurs du Web seront confrontés à ce problème. Pour éviter cela, vous pouvez mettre votre feuille de style dans un commentaire HTML, ce que nous avons vu dans le chapitre 1. Comme les commentaires ne s'affichent pas à l'écran, en plaçant votre feuille de style dans un commentaire HTML, vous empêchez les navigateurs les plus anciens d'afficher le contenu de l'élément style. Les navigateurs optimisés pour CSS sont conscients de cette astuce et traiteront le contenu de l'élément style en tant que feuille de style.

Rappelez-vous que les commentaires HTML commencent par < !-- et se terminent par ->. Voici un extrait de l'exemple de code précédent qui montre comment écrire une feuille de style dans un commentaire HTML. Le commentaire contient seulement le contenu de l'élément style : 

<HTML>
  <TITLE>Bach's home page</TITLE>
  <STYLE>
    <!--
      H1 { color: green }
    -->
  </STYLE>
  <BODY>
    ..
  </BODY> 
</HTML>

CSS a également son propre ensemble de commentaires que vous pouvez utiliser dans la feuille de style. Un commentaire CSS commence par "/ *" et se termine par "* /." (Ceux qui sont familiers avec le langage de programmation C les reconnaîtront.) Les règles CSS dans un commentaire CSS n'auront aucun effet sur la présentation du document.

Vous devez également indiquer au navigateur que vous travaillez avec des feuilles de style CSS. CSS est actuellement le seul langage de feuille de style utilisé avec les documents HTML et nous ne nous attendons pas à ce que cela change. Pour XML, la situation pourrait être différente. Mais tout comme il y a plus d'un format d'image (GIF, JPEG et PNG viennent à l'esprit), il pourrait y avoir plus d'un langage de feuille de style. C'est donc une bonne idée de dire aux navigateurs qu'ils ont affaire à CSS. (En fait, HTML vous oblige à le faire.) Cela se fait avec l’attribut type de l’élément style . La valeur type indique quel type de feuille de style est utilisé. Pour CSS, cette valeur est « text/css. » Ce qui suit est un extrait de notre exemple de document précédent qui vous montre comment vous l'écrivez (en combinaison avec l'utilisation du commentaire HTML) : 

<HTML>
  <TITLE>Bach's home page</TITLE>
  <STYLE TYPE="text/css">
    <!--
      H1 { color: green }
    -->
  </STYLE>
  <BODY>
    ..
  </BODY>
</HTML>

Lorsque le navigateur charge un document, il vérifie s'il comprend le langage de la feuille de style. Dans l’affirmative, il va essayer de lire la feuille, dans le cas contraire, il l'ignore. L'attribut type (voir le chapitre 1 pour les attributs HTML) de l'élément style est un moyen de permettre au navigateur de savoir quel langage de feuille de style est utilisé. L'attribut type doit être inclus.

Pour faciliter la lecture des exemples, nous avons choisi de ne pas inclure les feuilles de style dans les commentaires HTML, mais nous utilisons l'attribut type tout au long de ce livre.

Structures arborescentes et héritage

Rappelez-vous la section du chapitre 1 abordant le sujet d'HTML représentant un document avec une structure arborescente et la façon dont les éléments HTML ont des enfants et des parents. Il y a de nombreuses raisons qui justifient l'utilisation de documents arborescents. Pour les feuilles de style, il y a une très bonne raison : l'héritage. Tout comme les enfants héritent de leurs parents, il en va de même pour les éléments HTML. Au lieu d'hériter des gènes et de l'argent, les éléments HTML héritent des propriétés stylistiques.

Commençons par jeter un coup d'œil au document modèle : 

<HTML>
  <TITLE>Bach's home page</TITLE>
  <BODY>
    <H1>Bach's home page</H1>
    <P>Johann Sebastian Bach was a 
      <STRONG>prolific</STRONG> composer. Among his
        works are:
    <UL>
      <LI>the Goldberg Variations
      <LI>the Brandenburg Concertos
      <LI>the Christmas Oratorio
    </UL>
  </BODY>
</HTML>

La structure arborescente de ce document est :

[image]

Grâce à l'héritage, les valeurs des propriétés CSS définies sur un élément seront transférées à ses descendants. Par exemple, jusqu'à présent nos exemples ont défini la couleur verte pour les éléments h1 et h2 . Maintenant, imaginons que vous souhaitez définir la même couleur sur tous les éléments de votre document. Vous pouvez le faire en listant tous les types d'éléments dans le sélecteur : 

<STYLE TYPE="text/css">
  H1, H2, P, LI { color: green }
</STYLE>

Cependant, la plupart des documents HTML sont plus complexes que notre exemple de document, et votre feuille de style sera bientôt bien longue. Il y a une meilleure façon de le faire - et plus courte -. Au lieu de définir le style sur chaque élément type, nous l'avons défini sur leur ancêtre commun, l'élément body : 

<STYLE TYPE="text/css">
  BODY { color: green } 
</STYLE>

Puisque les autres éléments héritent des propriétés de l'élément body , ils hériteront tous la couleur verte (Figure 2.4).

Figure 2.4 Le résultat de l'héritage. (essayez-le)

[image]

Comme vous l'avez vu plus haut, l'héritage est un véhicule qui va distribuer des propriétés stylistiques aux descendants d'un élément. Puisque l'élément body est un ancêtre commun pour tous les éléments visibles, body est un sélecteur pratique lorsque vous souhaitez définir des règles de style pour l'ensemble du document.

Héritage dérogatoire

Dans l'exemple précédent, tous les éléments ont reçu la même couleur par héritage. Parfois, cependant, les enfants ne ressemblent pas à leurs parents. Sans surprise, CSS le prend également en compte. Supposons que vous aimeriez que les éléments h1 soient bleus alors que les autres devraient être verts. Ceci est facilement exprimé en CSS : 

<STYLE TYPE="text/css">
  BODY { color: green }
  H1 { color: navy }
</STYLE>

Puisque h1 est un élément enfant de body (et hérite ainsi de body), les deux règles de la feuille de style ci-dessus sont contradictoires. La première définit la couleur de l’élément body - et donc aussi la couleur de h1 par voie d’héritage - tandis que le deuxième définit la couleur spécifiquement sur l’élément h1 . Quelle règle va gagner ? Découvrons-le :

(essayez-le)

[image]

La raison pour laquelle la seconde règle gagne est qu'elle est plus spécifique que la première. La première règle est très générale - elle affecte tous les éléments de la toile. La deuxième règle n'affecte que les éléments h1 du document et est donc plus spécifique.

Si CSS avait été un langage de programmation, l'ordre dans lequel les règles sont spécifiées déterminerait laquelle d'entre elles gagnerait. CSS n'est pas un langage de programmation, et dans l'exemple ci-dessus, l'ordre n'est pas pertinent. Le résultat est exactement le même si nous utilisons cette feuille de style : 

<STYLE TYPE="text/css">
  H1 { color: navy }
  BODY { color: green }
</STYLE>

CSS a été conçu pour résoudre les conflits entre les règles de feuille de style comme celui ci-dessus. La spécificité en est un aspect. Vous pouvez trouver les détails dans le chapitre 15, "Cascading and inheritance."

Propriétés qui n'héritent pas

En règle générale, les propriétés CSS héritent des éléments parents vers les éléments enfants, comme décrit dans les exemples précédents. Certaines propriétés, cependant, n'héritent pas et il y a toujours une bonne raison pour cela. Nous utiliserons la propriété background (décrite au chapitre 11) comme exemple d'une propriété qui n'hérite pas.

Supposons que vous souhaitez définir une image d'arrière-plan pour une page. Il s’agit d’un effet courant sur le Web. En CSS, vous pouvez écrire : 

<HTML>
  <TITLE>Bach's home page</TITLE>
  <STYLE TYPE="text/css">
    BODY { 
      background: url(texture.gif) white;
      color: black;
    }
  </STYLE>
  <BODY>
    <H1>Bach's <EM>home</EM> page</H1>
    <P>Johann Sebastian Bach was a prolific
      composer.
  </BODY>
</HTML>

La propriété background a une URL ("texture.gif") qui pointe vers une image d'arrière-plan comme valeur. Lorsque l'image est chargée, la toile ressemble à :

(essayez-le)

[image]

Il y a quelques éléments dignes de mention dans l'exemple ci-dessus :

Alors, pourquoi la propriété background n'hérite-t-elle pas ? Visuellement, l'effet de transparence est similaire à l'héritage : on peut voir que tous les éléments ont le même arrière-plan. Il y a deux raisons pour cela : premièrement, les arrière-plans transparents sont plus rapides à afficher (il n'y a rien à afficher !) que les autres arrière-plans. Deuxièmement, puisque les images d'arrière-plan sont alignées par rapport à l'élément auquel elles appartiennent, vous n'auriez pas obtenu une surface d'arrière-plan lisse.

Tâches les plus courantes avec CSS

Le réglage des couleurs et des arrière-plans - comme décrit ci-dessus - sont parmi les tâches les plus courantes effectuées par CSS. D'autres tâches courantes incluent la définition des polices et l'espace blanc autour des éléments. Dans cette section, vous trouverez une présentation des propriétés les plus couramment utilisées avec CSS.

Tâches courantes : polices

Nous allons commencer avec les polices. Si vous avez déjà utilisé des applications de publication assistée par ordinateur, vous devriez être capable de lire cette petite feuille de style : 

H1 { font: 36pt serif }

La règle ci-dessus définit la police pour les éléments h1 . La première partie de la valeur - 36pt - définit la taille de police à 36 points. Un "point" est une ancienne unité typographique de mesure qui a survécu à l’ère numérique. Dans le chapitre suivant, nous vous dirons pourquoi vous devriez utiliser l'unité "em" au lieu de "pt", mais pour l'instant, nous nous en tiendrons aux points. La deuxième partie de la valeur - serif - indique au navigateur d’utiliser une police à empattements (les petits crochets aux extrémités des traits, chapitre 5 vous expliquera tout ça). Les polices serif plus décorées conviennent bien à la page d'accueil de Bach puisque les polices sans empattement modernes (polices sans empattement) n'étaient pas utilisées à son époque. Voici le résultat :

(essayez-le)

[image]

La propriété font est une propriété abrégée permettant de définir plusieurs autres propriétés à la fois. En l’utilisant, vous pouvez raccourcir vos feuilles de style et définir des valeurs sur toutes les propriétés qu’elle remplace. Si vous choisissez d'utiliser la version longue, vous devez définir tous ces éléments pour remplacer l'exemple ci-dessus : 

H1 {
  font-size: 36pt;
  font-family: serif;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  line-height: normal;
}

Parfois, vous voulez seulement définir l’un d'entre eux. Par exemple, vous pouvez vouloir utiliser l'italique pour certains éléments. Voici un exemple : 

UL { font-style: italic }

La propriété font-style ne changera pas la taille de police ou la famille de police, elle ne modifiera que l'oblique de la police présente. Lorsqu'il définit l'élément ul , les éléments li à l'intérieur vont être inclinés, puisque le font-style est hérité. Voici le résultat lorsqu'il est appliqué à la page test que vous connaissez maintenant :

(essayez-le)

[image]

De même, la propriété font-weight est utilisée pour changer le poids - l'épaisseur - des lettres. Vous pouvez mettre davantage l'accent sur les éléments de la liste en mettant leur ancêtre en gras : 

UL { 
  font-style: italic;
  font-weight: bold;
}

Ce qui donne :

(essayez-le)

[image]

Jusqu'à présent, les dernières propriétés, font-variant et line-height, n'ont pas été suffisamment prises en charge par les navigateurs et ne sont donc pas encore aussi couramment utilisées.

Tâches courantes : les marges

Définir l'espace autour des éléments est un outil de base en typographie. Le titre au-dessus de ce paragraphe a de l'espace au-dessus et (un peu moins) de l'espace en dessous. Ce paragraphe, imprimé dans le livre, dispose d’espace sur la gauche et (un peu moins) sur la droite. CSS peut être utilisé pour exprimer la quantité d'espace qu'il devrait y avoir autour de différents types d'éléments.

Par défaut, votre navigateur en sait beaucoup sur la façon d'afficher les différents types d'éléments en HTML. Par exemple, il sait que les éléments list et blockquote devraient être mis en retrait pour les distinguer du reste du texte. En tant que concepteur, vous pouvez vous appuyer sur ces paramètres tout en apportant vos propres perfectionnements. Utilisons l'élément blockquote comme exemple. Voici un document test : 

<HTML>
  <TITLE>Fredrick the Great meets Bach</TITLE>
  <BODY>
    <P>One evening, just as Fredrick the Great was 
      getting his flute ready, and his musicians 
      were assembled, an officer brought him a 
      list of the strangers who had arrived. With
      his flute in his hand he ran over the list,
      but immediately turned to the assembled 
      musicians, and said, with a kind of 
      agitation:
    <BLOCKQUOTE>"Gentlemen, old Bach is come."
    </BLOCKQUOTE>
    <P>The flute was now laid aside, and old Bach, who
      had alighted at his son's lodgings, was immediately
      summoned to the Palace.
  </BODY>
</HTML>

La capture d'écran ci-dessous montre comment un navigateur HTML typique afficherait le document :

(essayez-le)

[image]

Comme vous pouvez le voir, le navigateur a ajouté de l'espace sur tous les côtés du texte cité. En CSS, cet espace est appelé "marges" et tous les éléments ont des marges sur les quatre côtés. Les propriétés sont appelées : margin-top, margin-right, margin-bottom, et margin-left. Vous pouvez changer la façon dont l'élément blockquote est affiché en écrivant une courte feuille de style : 

BLOCKQUOTE {
  margin-top: 1em;
  margin-right: 0em;
  margin-bottom: 1em;
  margin-left: 0em;
  font-style: italic;
}

L'unité "em" sera traitée en détail dans le chapitre suivant, mais nous pouvons d'ores et déjà révéler son secret : elle se dimensionne en fonction de la taille de la police. Ainsi, l'exemple ci-dessus aura pour résultat que les marges verticales seront aussi élevées que la taille de police (1em) de l'élément blockquote, et les marges horizontales auront une largeur nulle. Pour s'assurer que le texte cité peut toujours être distingué, on lui a donné une inclinaison en italique. Le résultat est :

(essayez-le)

[image]

Tout comme font est une propriété abrégée pour définir plusieurs propriétés liées à la police à la fois, margin est une propriété abrégée qui définit toutes les propriétés de la marge. L'exemple ci-dessus peut donc être écrit ainsi : 

BLOCKQUOTE { 
  margin: 1em 0em 1em 0em;
  font-style: italic;
}

La première partie de la valeur - 1em - est assignée à margin-top. A partir de ce point, dans le sens horaire : 0em est assigné à margin-right, 1em est assigné à margin-bottom , et 0em est assigné à margin-left.

Avec la marge gauche à zéro, le texte cité a besoin de plus de style pour se démarquer du reste du texte. Régler font-style sur italic est utile, et l'ajout d'une couleur de fond fait encore plus ressortir la citation : 

BLOCKQUOTE { 
  margin: 1em 0em 1em 0em;
  font-style: italic;
  background: #EDB;
}

Le résultat est :

(essayez-le)

[image]

Comme prévu, la couleur de fond derrière la citation a changé. Contrairement aux exemples précédents, la couleur a été spécifiée dans les composants red/green/blue (RGB). Les couleurs RGB sont décrites en détail dans le chapitre 11.

Un problème stylistique dans l'exemple ci-dessus est que la couleur de fond couvre à peine le texte cité. L'espace autour de la citation - la zone de marge - n'inclue pas la couleur d'arrière-plan de l'élément. CSS a un autre type d’espace, appelé padding (garnissage), qui utilise la couleur d’arrière-plan de l’élément. À d'autres égards, les propriétés de garnissage sont similaires aux propriétés de marge : elles ajoutent de l'espace autour d'un élément. Ajoutons un peu de garnissage à la citation : 

BLOCKQUOTE { 
  margin: 1em 0em 1em 0em;
  font-style: italic;
  background: #EDB;
  padding: 0.5em;
}

Le résultat de la mise en place du garnissage est l'ajout d'un espace entre le texte et le rectangle qui l'entoure :

(essayez-le)

[image]

Notez que la propriété padding n'a reçu qu'une seule valeur (0.5em). Tout comme la propriété margin, padding aurait pu prendre 4 valeurs qui auraient été assignées aux padding supérieur, droit, inférieur et gauche respectivement. Cependant, lorsque la même valeur doit être définie sur tous les côtés, la répertorier une fois suffira. Ceci est vrai à la fois pour padding et margin (ainsi que d'autres propriétés border, décrites dans Space around boxes).

Tâches courantes : liens

Pour faciliter la navigation des utilisateurs dans des documents hypertexte, les liens doivent avoir un style qui les distingue du texte normal. Les navigateurs HTML ont souvent souligné le texte d'un lien hypertexte. En outre, divers schémas de couleurs ont été utilisés pour indiquer si l'utilisateur a déjà visité le lien ou non. Puisque les hyperliens sont une partie fondamentale du Web, CSS a un moyen spécial pour les styler. Voici un exemple très simple : 

A:link { text-decoration: underline }

L’exemple ci-dessus indique qu’il convient de souligner les liens non visités :

(essayez-le)

[image]

Les liens sont soulignés, comme nous l'avons précisé, mais ils sont également bleus, ce que nous n'avons pas spécifié. Lorsque les auteurs ne spécifient pas tous les styles, les navigateurs utilisent les styles par défaut pour combler les lacunes. L’interaction entre les styles de l’auteur, les styles de navigateur par défaut et les styles utilisateur (les préférences de l’utilisateur) est un autre exemple des règles de résolution de conflit CSS. C'est ce qu'on appelle la cascade (le "C" de CSS). Nous aborderons la cascade ci-dessous.

Le sélecteur (A:link) mérite une mention spéciale. Vous reconnaissez probablement "A" comme étant un élément HTML, mais la dernière partie est nouvelle. ":link" est l'une des pseudo-classes CSS. Les pseudo-classes sont utilisées pour donner du style à des éléments basé sur des informations extérieures au document lui-même. Par exemple, l'auteur du document ne peut pas savoir si un certain lien sera visité ou non. Les pseudo-classes sont décrites en détail au chapitre 4, et nous donnerons seulement quelques exemples supplémentaires ici : 

A:visited { text-decoration: none }

Cette règle donne du style aux liens visités, tout comme A:link a donné du style à des liens non visités. Voici un exemple légèrement plus complexe : 

A:link, A:visited { text-decoration: none }
A:hover { background: cyan }

La dernière règle introduit une nouvelle pseudo-classe :hover. En supposant que l'utilisateur déplace un dispositif de pointage (comme une souris), le style spécifié sera appliqué à l'élément lorsque l'utilisateur survole ("hovers"over) le lien. L'effet le plus courant est de changer la couleur de fond. Voici à quoi cela ressemble :

(essayez-le)

[image]

La pseudo-classe :hover a une histoire intéressante. Elle a été introduite dans CSS2 après que l'effet de survol soit devenu populaire parmi les programmeurs JavaScript. La solution JavaScript nécessite un code compliqué par rapport à la pseudo-classe CSS et ceci est un exemple d'effets CSS qui sont devenus populaires parmi les concepteurs Web.

Un mot sur Cascading

Une caractéristique fondamentale de CSS est que plus d'une feuille de style peut influencer la présentation d'un document. Cette caractéristique est connue sous le nom de cascading parce que les différentes feuilles de style sont considérées comme faisant partie d'une série. La mise en cascade est une caractéristique fondamentale de CSS, car nous avons réalisé que n'importe quel document pourrait très probablement se retrouver avec des feuilles de style provenant de sources multiples : le navigateur, le concepteur et peut-être même l'utilisateur.

Dans la dernière série d'exemples, vous avez vu que la couleur du texte des liens est devenue bleue sans que cela soit spécifié dans la feuille de style. En outre, le navigateur a su comment formater les éléments blockquote et h1 sans qu'on le lui dise explicitement. Tout ce que le navigateur sait sur le formatage est stocké dans la default style sheet du navigateur et est fusionnée avec les feuilles de style de l'auteur et de l'utilisateur lorsque le document est affiché.

Nous savons depuis des années que les concepteurs veulent développer leurs propres feuilles de style. Cependant, nous avons découvert que les utilisateurs veulent aussi avoir la possibilité d'influencer la présentation de leurs documents. Avec CSS, ils peuvent le faire en fournissant une feuille de style personnelle qui sera fusionnée avec les feuilles de style du navigateur et du concepteur. Tous les conflits entre les différentes feuilles de style sont résolus par le navigateur. Habituellement, la feuille de style du concepteur aura la plus forte revendication sur le document, suivi par celle de l'utilisateur, puis par défaut celle du navigateur. Cependant, l'utilisateur peut décider qu'une règle est très importante et qu'elle l'emportera sur n'importe quel style d'auteur ou de navigateur.

Nous abordons les détails de la cascade dans le chapitre 15, "Cascading et inheritance." Avant d'en arriver là, il y a beaucoup à apprendre sur les polices, l'espace et les couleurs.

Langues

À propos des traductions