Technologie Internet: Les feuilles de style

Les feuilles de style

Pour utiliser une feuille de style, on peut ajouter
```
<link rel="StyleSheet" type="text/css" href="UrlDeLaFeuilleDeStyle">
```
dans la section <head>. Il y a aussi d'autres façons de donner des directives de style.
Une feuille de style permet de (re)définir certaines caractéristiques de marques prédéfinies. Par exemple:
```
h1,h2 {font-weight:bold;font-family:helvetica;font-style:normal }
```
En cas d'imbrication de marques dans le texte HTML, les caractéristiques qui sont définies pour la marque englobante mais qui ne sont pas redéfinies dans la marque englobée sont héritées dans la zône de la marque englobée. Par exemple, si l'on reprend la marque <h2> telle qu'elle est définie dans le paragraphe précédent et la marque <em> définie ainsi:
```
em {font-style: oblique; color: red }
```
l'imbrication de la marque <em> dans la marque <h2> fera que, dans l'exemple suivant:
```
<h2>Texte droit <em>texte italique</em></h2>
```
le texte en italique aura les mêmes attributs font-weight et font-family que le texte droit qui le précède.
Etant donné ce mécanisme d'imbrication, si on veut appliquer une caractéristique de style à l'ensemble d'un document, on peut attacher cette caractéristique à la marque <body>. Par exemple:
```
body {color: blue; background: yellow }
```
permet de définir que le texte du document devrait apparaître en bleu sur fond gris. Il est bien entendu que certaines portions du document pourront avoir leur couleur redéfinie si une marque imbriquée dans la section <body> ... </body> contient une redéfinition de couleur du texte.
Certaines propriétés peuvent être définies en terme de pourcentage d'une autre propriété. Dans un tel cas, la spécification "officielle" indique à quelle autre propriété ce pourcentage fait référence. Par exemple, line-height peut être définie en % de font-size.
La notion de classe permet de définir plusieurs groupes de propriétés (mutuellement exclusifs) pour la même marque. Par exemple, avec les définitions de style suivantes:
```
p.classique {color: black }
p.ecolo {color: green }
```
les deux paragraphes qui suivent n'auront pas la même apparence:
<p class="classique">Texte qui apparait en noir</p>
<p class="ecolo">Texte qui apparait en vert</p>
Dans la feuille de style, des marques différentes peuvent utiliser le même nom de classe. Par exemple:
```
  h1.ecolo {color: #00CC00 }
```
ou
```
  p.double {line-height: 200% }
```
On peut donc définir des caractéristiques communes à toute une classe, quelle que soit la marque. Par exemple:
```
.ecolo {color: #00CC00; font-family: helvetica }
.double {line-height: 200% }
```
On peut définir un identificateur pour désigner un paragraphe précis (et unique) avec, dans la feuille de style:
```
#premier {font-weight: bold }
```
et dans le document:
```
<p ID="premier">...</p>
```
Certaines propriétés peuvent être définies pour un contexte donné. Par exemple, si l'on veut définir une propriété de la marque <em> uniquement quand elle est imbriquée dans un en-tête de niveau 1, la feuille de style pourra contenir:
```
h1 em {color: fuchsia }
```
S'il y a ambiguïté, c'est la spécification la plus spécifique qui prend le dessus. Par exemple, avec:
```
ul li {font-size: 12pt }
ul ul li {font-size: 10pt }
```
les éléments d'une liste imbriquée dans une autre liste auront une fonte de taille 10, même si la première des deux règles pourrait s'appliquer, car la deuxième règle est plus spécifique (voir exemple).
Chaque item d'un contexte peut faire référence aussi bien à une marque qu'à une classe ou à un identificateur. Par exemple:
```
.ecolo #premier code { ... }
```
s'appliquera à une portion du document qui sera délimitée par la marque <code> ... </code> pour autant que celle-ci soit imbriquée dans une section portant l'identificateur premier et que cette section soit elle-même imbriquée dans une section ayant la classe ecolo.
Il existe des "pseudo-classes" prédéfinies portant sur la marque <a> pour faire référence à un lien non-visité (classe :link), un lien déjà visité (classe :visited) ou un lien actif, c'est-à-dire sur lequel l'utilisateur est en train de cliquer (classe :active). Ces pseudo-classes peuvent être combinées avec une classe normale:
```
p.ecolo:link {color: lime }
p.ecolo:visited {color: olive }
```
Ceci est un paragraphe de classe "ecolo" avec un lien vers la page d'accueil de mon groupe
Dans cet exemple qui précède, les liens non encore visités dans un paragraphe de classe "ecolo" auront la couleur fuchsia. Ces pseudo-classes peuvent aussi être combinées avec un contexte. Dans l'exemple qui suit, les images incluses dans un hyper-lien pas encore utilisé auront une bordure verte et celles incluses dans un hyper-lien déjà utilisé auront une bordure jaune:
```
a:link img { border: green; border-width:5 }
a:visited img { border: yellow; border-width:5 }
```
les pseudo-éléments :first-line et :first-letter permettent de redéfinir des attributs particuliers pour la première ligne et la première lettre d'un paragraphe. Par exemple, si la feuille de stype contient:
```
p.Newsweek:first-line { font-variant: small-caps }
```
un document utilisant ce style avec un paragraphe défini ainsi:
```
<p class="Newsweek">
Ceci est un texte dont la<br>
première ligne sera toute en majuscules.
</p>
```
l'apparence devrait être semblable à:
CECI EST UN TEXTE DONT LA
première ligne sera toute en
majuscules.

Si la feuille de style contient:
```
p.GrandeInitiale:first-letter { font-size: 200%; float: left }
```
et que le document utilisant cette feuille de style contient:
```
<p class="GrandeInitiale">
To be or not to be,<br>
that is the question.
</p>
```
l'apparence devrait être semblable à:
```
___
 | o be or not to be,
 | that is the question.
```
Notes:
- s'il y a des guillemets au début du paragraphe, ils seront inclus avec la première lettre.
- :first-line et:first-letter sont cumulables
- actuellement, quasiment aucun butineur ne supporte les pseudo-éléments :first-line et :first-letter. Un moyen de remplacer :first-letter est d'utiliser la marque <span> de la façon suivante:
```
<p><span class="BigFirst">T</span>o be or not to be,<br>
that is the question.
```
  avec la classe BigFirst définie ainsi:
```
.BigFirst {float: left; font-size: 200% }
```
Pour documenter une feuille de style, on peut insérer des séquences du genre:
/* Ceci est un commentaire */

Autres façons de donner des directives de style

En plus de la marque <link rel="StyleSheet" ...> dans la section <head>, on peut donner des directives de style d'une des façons suivantes:

Dans la section <head>, on peut utiliser la marque <style type="text/css">. Par exemple:
```
<style type="text/css">
H1 {color: blue }
</style>
```
Dans la marque <style ...> de la section <head>, on peut importer une ou plusieurs feuilles de style avec @import. Par exemple:
```
<style type="text/css">
@import url(http://Un.Serveur/.../UnFichierDeStyle)
@import url(http://Un.Serveur/.../UnAutreFichierDeStyle)
</style>
```
Note: les façons 1. et 2. peuvent être utilisées simultanément. Dans un tel cas, les directives @importdoivent être au tout début.
Une feuille de style peut commencer par des directives @import.
Directement dans la section <body>, une marque de paragraphe peut porter l'attribut style="NomDePropriété: Valeur". Par exemple:
... <body> ...
<p style="color: aqua">Paragraphe bleu ciel
Via le butineur ("browser"), l'utilisateur peut éventuellement avoir la possibilité d'indiquer une feuille de style qui s'appliquera à tous les documents visualisés.
Le butineur a déjà un style par défaut.

Il peut y avoir conflit entre les directives fournies par ces différentes approches. La résolution de ces conflits est basée sur la pondération des directives:

La pondération des directives du lecteur/utilisateur sont plus faibles que celles de l'auteur du document.
La pondération de directives importées est inférieure à la pondération des directives du fichier courant (que ce soit le document HTML même ou une feuille de style).
Une directive peut voir sa pondération augmentée par l'utilisation du mot-clé important. Par exemple:
```
h1 {color: black ! important; background: white ! important }
```
Une directive du lecteur marquée important a une pondération plus élevée qu'une directive normale de l'auteur.

Modèle de mise en page

Le modèle de mise en page de CSS1 est basé sur la notion de boîte rectangulaire. Chaque élément du texte est contenu dans une ou plusieurs boîtes. Chaque boîte a une zône dans laquelle le texte apparaît et cette zône est optionnellement emboîtée dans une zône d'espacement, laquelle peut être entourée d'une bordure, qui peut être, elle-même entourée d'une marge:

rectangle de contenu
emboîté dans le rectangle d'espacement, qui est entouré d'une bordure,
elle-même entourée d'une marge transparente

Les dimensions de la marge, de la bordure (s'il y en a une pour l'élément en question) et de l'espacement sont données par les propriétés margin, border-width et padding qui prennent chacune jusqu'à quatre valeurs (séparées par des espaces) qui correspondent au haut, côté droit, bas et côté gauche.

<p style="border-width: 5px 5px 5px 5px;border-style: solid"> permet d'avoir une bordure autour du paragraphe.

<p style="border-width: 5px 5px 5px 5px;border-style: solid;padding:4px 5px 2px 10px"> permet d'avoir une bordure à une certaine distance autour du paragraphe.

<p style="border-width: 0 0 0 5px;border-style: solid;padding:0 0 0 2px"> devrait permettre d'avoir un trait sur le côté gauche du paragraphe.

Les marges de deux élément adjascents de texte ne s'additionnent pas, mais c'est la plus grande qui prime.

Utilisation abusive des feuilles de style

Etant donné que le support des feuilles de style n'est pas encore systématique dans tous les butineurs et qu'en plus l'utilisateur peut choisir de le désactiver lorsqu'il est disponible, il faut à tout prix éviter que la lecture d'un document dépende trop fortement de la feuille de style associée. Les feuilles de styles sont là pour améliorer la présentation d'un document et non pas pour la contrôler. Pour un exemple concret, voir "Style Sheet Dependence", un document du Web Design Group.

Note: il semble qu'avec Netscape (version 4 et précédentes), les feuilles de style ne fonctionnent que si JavaScript est activé.

Cascading Style Sheets, level 1 (copie locale au CUI)
Cascading Style Sheets, level 2
RichInStyle.com master class (tutoriel pour utilisateurs avancés)
Adding a touch of style, par Dave Raggett
Everything you ever wanted to know about Style, tutoriel par John Allsopp
CSS Pointers, liste de liens relatifs aux feuilles de style
Exemple de feuille de style: ma feuille de style personnelle
Web Style Sheets, liste de ressources du consortium W³
Effective Use of Style Sheets, par Jakob Nielsen
liste de documents sur les feuilles de style, du "Web Design Group".
Style Sheets vs. Frames as Web Extensions, par Jakob Nielsen
le logiciel Amaya est installé dans /user/ub2/bertrand/www/Amaya/Thot/solaris2/bin/amaya (version Solaris2)
Web Design - More than Meets the Eye, section Cascading Style Sheets
Why style sheets are harmful, par Jukka Korpela
La section "Cascading Style Sheets" du site Web design Group
Web Review's CSS list of safe properties
Web Review's CSS browser list of supported properties
CSS Bugs and Workarounds, par Sue Jordan
Style Sheets Compatibility Chart, comparaison des différents butineurs quant à l'étendue du support des feuilles de style
W2CSS: Translating MS Word Documents into CSS Compliant HTML

Outils d'édition de feuilles de style (Win'95). Pour plus de détails voir WinFiles.com

Balthisar Cascade (ne permet pas d'éditer des feuilles de style existantes)
StyleMaker (certaines propriétés manquent - p.ex. border-style; certaines propriétés ne sont pas faciles à éditer)
CoffeeCup StyleSheetMaker++
SheetStylist (une fenêtre "preview" permet de visualiser l'effet des règles de style définies)
Style Master (une aide contextuelle est disponible pour la plupart des éléments de l'interface, indiquant les différents choix possibles ainsi que les effets de chacun d'eux)

Sites de validation en-ligne de la syntaxe d'une feuille de style:

Résumé des propriétés utilisées dans des directives de style
Tests de conformité CSS2

Technologie Internet - Université de Genève, CUI ©

Les feuilles de style

Autres façons de donner des directives de style

Modèle de mise en page

Utilisation abusive des feuilles de style