Accueil				Recherche | Plan				Technique | Liens | Actualités | Formation | Emploi | Forums | Base

			dossier			cerig.efpg.inpg.fr

Vous êtes ici : Accueil > La technique > Internet et le Web > Les feuilles de style > Le texte dans la boîte

Révision : 01 juin 2004

	Les feuilles de style
Page précédente		Page suivante
Jean-Claude SOHM - CERIG / EFPG (01 juin 2004)

VII - Le texte dans la boîte

VII-1- Introduction

Régler la police, le corps, la graisse, la couleur, etc. des caractères utilisés dans un texte est sans doute l'application la plus courante des feuilles de style. C'est d'ailleurs ce qu'il y a de plus simple à faire, et c'est aussi ce qui marche le plus sûrement. Dans les débuts des feuilles de style, c'est à peu près tout ce que l'on osait utiliser. En effet, les propriétés correspondantes étaient déjà implémentées dans les versions 4 des navigateurs de Microsoft et de Netscape.

Donc un chapitre sans histoires, ou presque...

VII-2- Les propriétés FONT

Il existe cinq propriétés FONT:

• FONT-FAMILY
• FONT-SIZE
• FONT-STYLE
• FONT-WEIGHT
• FONT-VARIANT

pour lesquelles on peut utiliser le raccourci FONT. Nous les passons en revue dans cet ordre. On notera que la propriété FONT-STRETCH, qui permet de modifier la distance entre caractères, n'est pas implémentée dans les navigateurs courants.

La propriété FONT-FAMILY. Cette propriété permet de définir la police utilisée. On peut :

• soit utiliser un nom de police générique ;
• soit désigner une police précise par son nom. Dans ce cas, la police doit résider sur la machine de l'internaute, sinon le navigateur utilisera une police voisine par défaut.

Il existe cinq polices génériques :

• "serif" définit une police dont les caractères possèdent des empattements. L'exemple le plus répandu est celui de la police Times New Roman ;
• "sans-serif" définit une police dont les caractères ne possèdent pas d'empattements. L'exemple le plus répandu est celui de la police Arial ;
• "monospace" définit une police non proportionnelle, c'est à dire dont tous les caractères occupent la même largeur. L'exemple le plus répandu est celui de la police Courrier New ;
• "cursive" définit une police imitant l'écriture cursive, telle qu'on la pratique en écrivant avec une plume. Les navigateurs rendent très mal ce type de police ;
• "fantasy" définit, comme son nom l'indique, une police amusante. Ce que fournissent les navigateurs manque généralement de fantaisie...

Exemple :

Ce code s'affiche ainsi (avec des variations suivants les navigateurs et les plates-formes) :

L'usage des noms de police génériques est à déconseiller, car certains navigateurs affichent parfois des horreurs. Mieux vaut s'en tenir à la dizaine de polices que l'on est pratiquement certain de trouver sur toutes les machines.

La propriété FONT-SIZE. Cette propriété permet de définir le corps (la taille) de la police utilisée. L'unité la plus utilisée est le point (pt), que les navigateurs interprètent ainsi (sur PC) : 1 point = 4/3 pixel. On peut également utiliser :

• une valeur exprimée directement en pixels
• un pourcentage
• "medium", "smaller" ou "larger"
• "xx-small", "x-small" ou "small"
• "xx-large", "x-large" ou "large"

Exemple :

Ce code s'affiche ainsi :

La propriété FONT-STYLE. Cette propriété permet de préciser si le texte est en italique ou non. La recommandation CSS prévoit également la valeur "oblique", mais cette dernière est implémentée comme la valeur italique par les navigateurs courants.

Exemple :

Ce code s'affiche ainsi :

La propriété FONT-WEIGHT. Cette propriété permet de définir la graisse des caractères. Neuf valeurs sont prévues dans les recommandations CSS, numérotées de 100 à 900. Une telle subtilité peut se concevoir pour l'imprimé (si la police utilisée le prévoit), mais pour l'affiché, c'est hors de question. En pratique, les navigateurs affichent :

• soit le texte normal (valeur "normal", par défaut) ;
• soit le texte en caractères gras (valeur "bold"), équivalent de <b> en HTML ;
• soit (rarement) en caractères très gras (valeur 900). En général, les valeurs supérieures à 600 sont toutes interprétées de la même façon (gras).

Exemple :

Ce code s'affiche ainsi :

Remarque : les valeurs "bolder" et "lighter" conduisent généralement au même affichage que "bold" et "normal".

La propriété FONT-VARIANT. Cette propriété permet de transformer les minuscules en petites majuscules (valeur "small-caps"). Les majuscules ne sont pas modifiées.

Exemple :

Ce code s'affiche ainsi :

Le raccourci FONT. On peut regrouper les cinq propriétés énoncées ci-dessus en une seule (propriété FONT), à condition de respecter les règles suivantes, et de fournir les informations dans cet ordre :

• D'abord, l'indication du style (STYLE, normal ou italique), celle de la graisse (WEIGHT) et celle concernant l'écriture en petites majuscules (VARIANT). Elles sont facultatives, et peuvent être écrites dans un ordre quelconque ;
• Ensuite, le corps (la taille) des caractères (SIZE) doit obligatoirement être précisée ;
• Enfin, la nature de la police (FAMILY) doit obligatoirement être précisée, elle aussi.

Exemple :

Ce code s'affiche ainsi :

VII-3- Les propriétés TEXT

Il existe quatre propriétés TEXT :

• TEXT-ALIGN
• TEXT-DECORATION
• TEXT-TRANSFORM
• TEXT-INDENT

que nous allons étudier dans cet ordre. Il n'existe pas de raccourci regroupant ces quatre propriétés. On notera que la propriété TEXT-SHADOW, prévue dans la recommandation CSS2, n'est pas implémentée dans les navigateurs courants.

La propriété TEXT-ALIGN. Cette propriété permet, dans une boîte de type "bloc" :

• de caler le texte à gauche ("left"). C'est la valeur par défaut ;
• de caler le texte à droite ("right") ;
• de centrer le texte ("center") ;
• de justifier le texte ("justify").

Exemple :

Ce code s'affiche ainsi :

Rappelons qu'un texte justifié est en fait aligné à gauche lorsqu'il ne peut pas raisonnablement remplir toute la largeur de la page. Certains navigateurs affichent parfois des horreurs en pareil cas.

Remarque : la propriété TEXT-ALIGN peut être utilisée pour effectuer du positionnement. Nous reviendrons sur ce point au chapitre XV, lorsque nous aborderons le problème du centrage d'éléments emboîtés. Précisons dès maintenant que tout se passe généralement bien si l'élément contenu est du type "en-ligne". C'est le cas du centrage d'une image, comme le montre l'exemple suivant :

L'image s'affiche effectivement centrée dans les versions récentes des navigateurs, comme on peut le constater ci-dessous.

La propriété TEXT-DECORATION. Cette propriété permet de :

• souligner le texte ("underline") ;
• surligner le texte ("overline") ;
• de barrer le texte ("line-through") ;
• de faire clignoter le texte ("blink"). Le navigateur de Microsoft n'implémente pas cette valeur, et c'est fort bien ainsi : il n'y a rien de plus pénible à observer qu'un texte qui clignote. Une affaire qui a fait couler beaucoup d'encre...

Remarque : on peut à la fois souligner, surligner et barrer un texte. Le résultat n'est pas très esthétique, comme le montre l'exemple suivant :

Ce code s'affiche ainsi :

La propriété TEXT-TRANSFORM. Cette propriété permet, quelle que soit l'écriture du texte :

• de ne pas modifier le texte ("none"). C'est la valeur par défaut ;
• de commencer chaque mot par une majuscule ("capitalize") ;
• de tout écrire en majuscules ("uppercase") ;
• de tout écrire en minuscules ("lowercase").

Exemple :

Ce code s'affiche ainsi :

La propriété TEXT-INDENT. Cette propriété permet de gérer le retrait de la première ligne d'un paragraphe. Une valeur négative implique le retrait du reste du paragraphe par rapport à la première ligne. Dans ce cas, il faut prévoir une marge interne gauche suffisante, sinon IE tronque le début de la première ligne, et Gecko le fait sortir de la boîte. Le retrait peut être exprimé en pixels ou en pourcentage.

Exemple :

Ce code s'affiche ainsi :

VII-4- Les autres propriétés

Ce paragraphe regroupe trois propriétés :

• COLOR
• LINE-HEIGHT
• VERTICAL-ALIGN

que nous allons étudier dans cet ordre.

La propriété COLOR. Cette propriété permet de définir la couleur du texte (encore appelée couleur de premier plan, pour la distinguer de la couleur de fond). Cette couleur peut être désignée par son nom, ou par son code en hexadécimal (précédé du signe dièse).

Exemple :

Ce code s'affiche ainsi :

La propriété LINE-HEIGHT. Cette propriété, qui n'a pas son équivalent en HTML, permet de définir l'interlignage dans les boîtes de type bloc. Les valeurs négatives ne sont pas prises en compte. La valeur "normal" laisse le navigateur libre de faire au mieux ; c'est la valeur par défaut. L'interlignage peut être exprimé en pixels ou en pourcentage.

Exemple :

Ce code s'affiche ainsi :

La valeur de la propriété LINE-HEIGHT peut être introduite dans le raccourci FONT, en la regroupant avec celle relative au corps, et en séparant les deux valeurs par une barre oblique.

Exemple :

Ce code s'affiche ainsi :

Remarque : la propriété LINE-HEIGHT joue un rôle particulier dans les boîtes de type "en-ligne", comme nous le verrons au chapitre XI.

La propriété VERTICAL-ALIGN. Cette propriété permet de placer du texte en indice (une valeur ou "sub") ou en exposant (une valeur ou "super"). Elle est également utilisée en positionnement, comme nous le verrons au chapitre XV.

Exemple :

Ce code s'affiche ainsi :

VII-5- Conclusion

Le tableau ci-dessous dresse la liste des treize propriétés utilisables pour mettre en forme le texte contenu dans une boîte.

Page précédente	Retour au sommaire	Page suivante
Accueil | Technique | Liens | Actualités | Formation | Emploi | Forums | Base
Copyright © CERIG/EFPG 1996-2004
Mise en page : J.C. Sohm