Feuilles de style

Origine

Pour maîtriser la présentation, le créateur de la page peut être tenté de modifier certaines de ses caractéristiques : couleur de fond, taille des caractères, police, ... Le faire directement en utilisant des balises de formatage (comme FONT, B, BIG, ...) qui ont été rajoutées à la norme initiale, est un contre-sens absolu. Comme avec un traitement de texte, la police, la graisse, la couleur, ... font partie de la nature d'un paragraphe et ne doivent pas être modifiées directement. Tout comme Word et tous les traitements de texte évolués, HTML 4.0 possède une notion de style et de feuille de styles, apparue en 1997 avec le navigateur Internet Explorer 3.0, puis généralisé avec les versions 4.0 d'Internet Explorer et de Netscape Navigator. Elle permet d'attribuer des caractéristiques de mise en forme à tout un groupe d'éléments. On peut par exemple décider de mettre les titres en police Arial, en vert et en italique. On définit par un nom une caractéristique de mise en forme, il suffit ensuite de l'appeler pour l'appliquer à un texte.

On parle de feuilles de style en cascade ("Cascading Style Sheets") car on peut en définir plusieurs, et en cas de redondance de style un ordre de priorité est donné par le navigateur. Elles permettent :

· d'avoir une présentation homogène sur tout un site.

· de pouvoir changer l'aspect du site entier en modifiant quelques lignes.

· une plus grande lisibilité du HTML.

· le positionnement rigoureux des éléments.

· des chargements de page plus rapides

Création de styles

Définition d'un style

La définition d’un élément de style se fait sous la forme :

balise {propriété de style: Valeur; propriété de style: Valeur ...}

On peut ainsi modifier dans tout le document l'apparence d'une balise HTML prédéfinie. Par exemple :

H1 {font-family=Verdana; font-size=18px; font-style=bold; font-color=yellow}

définit les titres de niveau 1 comme ayant une police Verdana, en gras, de taille 18 pixels, et de couleur jaune (noter la syntaxe d'une déclaration CSS : nom : valeur, les déclarations de propriétés sont séparées entre elles par des points-virgules).

Pour plus de détails sur les possibilités offertes, on se reportera au tableau des propriétés disponibles (notons que tous les outils de création de page un peu évolués contiennent aussi un éditeur de feuilles de style).

On peut aussi affecter des styles différents à des balises grâce au concept de classe (ce qui permet de distinguer plusieurs types de paragraphes, de titres, .... La définition des classes est aussi simple que celles des styles, le nom étant choisi par l'utilisateur (on notera bien le . au début) :

.maclasse {propriété de style: Valeur; propriété de style: Valeur ...}

L'ensemble des styles définis pour une page HTML peut être rassemblé de deux façons :

· Dans l’en-tête du document (avec l'inconvénient de ne s'appliquer qu'à ce document)

· Dans un fichier externe externe au document, la feuille de style (seule manière de créer un site ayant un aspect uniforme).

Remarque : on peut aussi définir un style en ligne, c’est à dire directement à proximité de l’élément auquel il s’applique. Cette méthode est à proscrire et ne sera pas décrite ici !

En-têtes de style: L'élément STYLE

La balise STYLE permet de rassembler des règles stylistiques dans l'en-tête d'un document. Le HTML autorise la présence d'un nombre quelconque d'éléments STYLE dans la section HEAD d'un document.

Ainsi, la déclaration CSS suivante de STYLE active une bordure autour de chaque élément H1 du document, et le place au centre de la page. Elle redéfinit aussi la balise A et crée un style utilisateur de nom .maclasse.

<HEAD>

<!--

H1 {border-width: 1; border: solid; text-align: center}

   a { TEXT-DECORATION: none;font-face:sans-serif; font-size:12px; color:black; ; font-style: italic}
   a:link { font-face:sans-serif; font-size:12px; color:black ; font-style: italic; text-decoration: none}
   a:active { font-face:sans-serif; font-size:12pt; color: black ; text-decoration: none}
   a:visited { font-face:sans-serif; font-size:10pt; color: black ; font-style: italic;text-decoration: none}
   a:hover { font-face:sans-serif; font-size:14px; color:red ; font-weight: bold; font-style: normal; text-decoration: none}

.myclass {border-width: 1; border: solid; text-align: center}

-->

</STYLE>

</HEAD>

L'attribut type="text/css" prévient qu'il s'agit de feuilles de style en cascade. La balise de commentaire <--! ... --> évite que des navigateurs peu récents lisent ces informations. Le langage de feuille de style est indiqué sous la forme d'un code MIME (ex., "text/css").

Feuilles de style externes

Les feuilles de style peuvent être définies séparément du document HTML qui les applique, dans un fichier externe dont l'extension est .css . Ceci présente des avantages majeurs et offre la possibilité de :

· partager des ensembles de définitions de styles entre plusieurs documents (voire serveurs)

· modifier les style de présentation d'un document sans changer le document lui-même

Il faut d'abord créer un fichier texte contenant les feuilles de style et dont l'extension est .css par exemple style.css:, puis créer le raccourci vers cette page dans la(les) page(s) web, selon une syntaxe simple : La balise <LINK> avertit le navigateur qu'il doit établir un lien, rel=stylesheet précise qu'il s'agit d'une feuille externe, type="text/css" avertit (une fois de plus) qu'il s'agit de feuilles de style en cascade et enfin, href=" ... " définit l'emplacement de la feuille de style :

<HTML>

<HEAD>

</HEAD>

A titre d'exemple, la fenêtre présente la feuille de style utilisée par l'ensemble de ce site. L'affichage du source de cette page montre bien comment sont utilisés les divers styles dans la page, pour distinguer par exemple les titres, les paragraphes de texte normal ou ceux décrivant des lignes de code.

Utilisation d'un style : CLASS, ID et SPAN

L'application d'un style associée à une balise HTML prédéfinie se fait automatiquement, dès lors que le style a été inséré dans la page ou que le lien avec la feuille de style externe a été créé. Par contre, l'utilisation d'un style utilisateur se fait de façon explicite :

<H1 class="maclass"> Cet titre est affecté par le style utilisateur .maclasse</H1>

<H1> celui-là ne l'est pas et reçoit le style standard </H1>

Les ID servent à remplacer les classes lorsqu'il y a du JavaScript dans la page, car celui-ci emploie aussi la syntaxe nom.nom. La syntaxe est alors: #nom_ID { propriété de style: Valeur; propriété de style: Valeur ...}. On l'appellera de la manière suivante:

La balise <SPAN> sert à appliquer des styles à des morceaux de paragraphe. Elle s'utilise aussi bien avec ID qu'avec CLASS. Sa syntaxe est la suivante:

<SPAN class=important> Texte </SPAN>

L'idée est la même pour la balise DIV, cependant au lieu de s'appliquer à quelques mots dans un paragraphe, elle s'applique sur plusieurs paragraphes. Sa syntaxe est la suivante:

<DIV class=important> paragraphes </DIV>

Dans l'exemple suivant, l'élément SPAN permet d’écrire les quelques premiers mots d'un paragraphe en petites capitales.

<HEAD>

SPAN.sc-ex { font-variant: small-caps }

</STYLE>

</HEAD>

<BODY>

<P><SPAN class="sc-ex">Les quelques premiers</SPAN> mots de ce paragraphe sont écrits en petites capitales.

</BODY>

Dans l'exemple suivant, on utilise un élément DIV et son attribut class pour régler la justification de texte d'une série de paragraphes constituant le résumé d'un article scientifique. Cette information de style pourrait être réutilisée pour toute autre section de résumé en assignant l'attribut class d'un élément DIV à cet endroit.

<HEAD>

DIV.Abstract { text-align: justify }

</STYLE>

</HEAD>

<BODY>

<P>Premier paragraphe.

<P>Second paragraphe.

</DIV>

</BODY>

Compléments

Types de média

HTML permet aux auteurs de concevoir des documents qui ne dépendent pas d'un support particulier. De ce fait, les utilisateurs finaux pourront naviguer sur le Web en utilisant une grande variété d'agents utilisateurs : programmes multi-fenêtrés pour micro ordinateurs et stations de travail, boîtiers de réception pour téléviseurs, navigateurs à synthèse vocale, ou afficheurs tactiles en braille, etc.

L'attribut media spécifie le médium pour lequel cette information de style est applicable. Il peut s'agir d'un simple type MIME, ou d'une liste de types MIME séparés par des virgule. Type de médium possibles :

· screen : La sortie visée se fait sur des écrans informatiques non paginés. C'est la valeur par défaut.

· print : La sortie visée se fait par impression sur matériau opaque. Est aussi valable pour des affichage d'aperçu avant d'impression.

· projection : La sortie visée se fait par projection optique.

· braille : La sortie visée sont des transcripteurs en braille pour malvoyants ou non voyants

· speech : La sortie se fait par synthèse vocale.

· all : Applicable à toutes les interfaces.

Les exemples de déclarations suivants s'appliquent tous à un élément H1. Lorsqu'ils seront rendus sur un écran informatique, toutes les instances seront écrites en bleu et centrées. Imprimées, les mêmes instances seront simplement centrées. Nous y spécifions un style particulier pour les navigateurs vocaux.

<HEAD>

H1 { color: blue}

</STYLE>

H1 { text-align: center }

</STYLE>

H1 { cue-before: url(bell.aiff); cue-after: url(dong.wav)}

</STYLE>

</HEAD>

Le contrôle du médium est particulièrement intéressant lorsqu'il s'applique à des feuilles de style externes car les agents utilisateurs pourront alors gagner du temps en ne récupérant du réseau que les feuilles de style qui les concernent.

L'exemple précédent peut être réécrit pour se référer à des feuilles de style externes (plutôt qu'à des éléments STYLE inscrits dans l'en-tête de fichier) contrôlés par un attribut media. Les agents utilisateurs pourront consulter l'attribut media et ne requérir les seules feuilles de style appropriées au médium utilisé.

<HEAD>

<LINK href="doc1-screen.css" rel="stylesheet"

type="text/css" media="screen">

<LINK href="doc1-print.css" rel="stylesheet"

type="text/css" media="print">

<LINK href="doc1-speech.css" rel="stylesheet"

type="text/css" media="speech">

</HEAD>

Caractéristiques du style

La définition du langage de feuille de style par défaut pour le document se fait par un élément META. Par exemple, si l'on souhaite que ce langage soit le CSS (en l'absence de déclaration explicite, le langage de style par défaut est le CSS seule possibilité acturellement), on utilise la déclaration suivante dans la section HEAD de votre document :

Le langage de style par défaut peut aussi être fixé par le biais de champs d'en-tête HTTP. La déclaration précédente META est équivalente au champ d'en-tête HTTP suivant :

Content-Style-Type: text/css

Un nouvel élément META permettra de définir le style nommé par défaut pour le document. Par exemple, pour fixer le style par défaut à la valeur "compact", on inclut la ligne suivante dans la section HEAD du document (le style par défaut peut aussi être défini par des en-têtes http) :

Si plusieurs déclarations de style par défaut sont mentionnées, soit sous forme d'éléments META ou de champs HTTP, c'est la dernière qui est prédominante

Héritage et cascade

Lorsqu'un agent utilisateur doit visualiser un document, il doit tout d'abord déterminer des valeurs pour les diverses propriétés stylistiques, par exemple, la famille de polices, le style de caractères, leur taille, la hauteur de ligne, la couleur du texte, etc. :

· Le mécanisme de cascade est utilisé lorsqu'un certain nombre de feuilles de style s'appliquent directement à une instance. Le mécanisme permet à l'agent utilisateur de trier les règles par spécificité, et de déterminer quelles règles sont à appliquer. Si aucun règle ne répond à ce choix, l'étape suivante consiste à déterminer les propriétés de style qui peuvent être héritées. Toutes les propriétés ne peuvent pas être héritées. Pour ces dernières, le langage de feuille de style procurera des valeurs par défaut à utiliser lorsque aucune règle ne vient donner une valeur explicite pour l'élément.

· S'il est possible d'hériter de la propriété, l'agent utilisateur examine l'élément directement englobant pour voir si une règle lui est appliquée, et qu'il faudrait transmettre à l'élément inclus. Ce processus continue jusqu'à ce qu'une règle applicable soit trouvée. Ce mécanisme permet de définir des feuilles style de façon très compacte.