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
Page précédente Les feuilles de style Page suivante
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:

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 :

Il existe cinq polices génériques :

Exemple :

<p><span style="font-family: serif">Police serif,</span> <span style="font-family: sans-serif">police sans-serif,</span> <span style="font-family: monospace">police monospace,</span> <span style="font-family: cursive">police cursive,</span> <span style="font-family: fantasy">police fantaisie</span></p>

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

Police serif, police sans-serif, police monospace, police cursive, police fantaisie

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 :

Exemple :

<p><span style="font-size: 60pt">A</span> <span style="font-size: 80px">A</span></p>

Ce code s'affiche ainsi :

A A

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 :

<p>Texte normal, <span style="font-style: italic">texte en italique</span>, <span style="font-style: oblique">texte en oblique</span></p>

Ce code s'affiche ainsi :

Texte normal, texte en italique, texte en oblique

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 :

Exemple :

<p style="font-size: 14pt; font-family: Comic Sans MS">NORMAL, <span style="font-weight: bold">GRAS</span>, <span style="font-weight: 900">TRÈS GRAS ?</span></p>

Ce code s'affiche ainsi :

NORMAL, GRAS, TRÈS GRAS ?

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 :

<p>Petites Majuscules, <span style="font-variant: small-caps">Petites Majuscules</span></p>

Ce code s'affiche ainsi :

Petites Majuscules, Petites Majuscules

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 :

Exemple :

<p style="font: italic small-caps bold 16pt Comic Sans MS">Texte d'essai</p>

Ce code s'affiche ainsi :

Texte d'essai
 

VII-3- Les propriétés TEXT

Il existe quatre propriétés TEXT :

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" :

Exemple :

<p style="text-align: left; margin: 5px">Texte aligné à gauche</p>
<p style="text-align: center; margin: 5px">Texte centré</p>
<p style="text-align: right; margin: 5px">Texte aligné à droite</p>
<p style="text-align: justify; margin: 5px">Texte justifié, assez long pour nécessiter un retour à la ligne</p>

Ce code s'affiche ainsi :

Texte aligné à gauche

Texte centré

Texte aligné à droite

Texte justifié, assez long pour nécessiter un retour à la ligne

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 :

<p style="text-align: center"><img border="0" src="images/ns_logo_128_fwmx.gif" width="32" height="32"></p>

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 :

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 :

<p style="text-decoration: underline overline line-through">Texte souligné, surligné et barré simultanément</p>

Ce code s'affiche ainsi :

Texte souligné, surligné et barré simultanément

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

Exemple :

<p>
<span style="text-transform: none">Texte non modifié</span><br>
<span style="text-transform: capitalize">une majuscule au début de chaque mot</span><br>
<span style="text-transform: uppercase">texte en majuscules</span><br>
<span style="text-transform: lowercase">TEXTE EN MINUSCULES</span>
</p>

Ce code s'affiche ainsi :

Texte non modifié
une majuscule au début de chaque mot
texte en majuscules
TEXTE EN MINUSCULES

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 :

<p style="text-indent: 0; text-align: justify">Ce paragraphe n'a pas de retrait de première ligne, la valeur de la propriété TEXT-INDENT est nulle.</p>
<p style="text-indent: 15px; text-align: justify">Ce paragraphe possède un retrait de première ligne, la valeur de la propriété TEXT-INDENT est 15 pixels.</p>
<p style="text-indent: -15px; text-align: justify; padding-left: 20px">Ce paragraphe possède un retrait négatif de première ligne, la valeur de la propriété TEXT-INDENT est -15 pixels.</p>

Ce code s'affiche ainsi :

Ce paragraphe n'a pas de retrait de première ligne, la valeur de la propriété TEXT-INDENT est nulle.
Ce paragraphe possède un retrait de première ligne, la valeur de la propriété TEXT-INDENT est 15 pixels.
Ce paragraphe possède un retrait négatif de première ligne, la valeur de la propriété TEXT-INDENT est -15 pixels.
 

VII-4- Les autres propriétés

Ce paragraphe regroupe trois propriétés :

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 :

<p style="color: red">Texte affiché en lettres rouges</p>

Ce code s'affiche ainsi :

Texte affiché en lettres rouges

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 :

<p style="line-height: normal">Ce paragraphe possède un interlignage standard</p>
<p style="line-height: 25px>Ce paragraphe possède un interlignage de 25 pixels</p>

Ce code s'affiche ainsi :

Ce paragraphe possède un interlignage standard
Ce paragraphe possède un interlignage de 25 pixels

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 :

<p style="font: italic small-caps bold 12pt/25px Comic Sans MS">Texte doté d'un style regroupant six propriétés en un seul raccourci</p>

Ce code s'affiche ainsi :

Texte doté d'un style regroupant six propriétés en un seul raccourci

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 :

<p>Texte normal <span style="vertical-align: 4px; font-size: 70%">en exposant</span> normal</p>
<p>Texte normal <span style="vertical-align: -3px; font-size :70%">en indice</span> normal</p>

Ce code s'affiche ainsi :

Texte normal en exposant normal
Texte normal en indice normal
 

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.

Propriété Effet
FONT-FAMILY Police
FONT-SIZE Corps (taille) des caractères
FONT-STYLE Texte normal ou en italique
FONT-WEIGHT Graisse
FONT-VARIANT Petites majuscules
FONT Raccourci regroupant les cinq propriétés FONT plus LINE-HEIGHT
TEXT-ALIGN Aligne le texte (à gauche, à droite, centré, justifié)
TEXT-DECORATION Texte souligné, surligné, barré
TEXT-TRANSFORM Tout en majuscules, tout en minuscules, première lettre en majuscules
TEXT-INDENT Retrait de première ligne (positif ou négatif)
COLOR Couleur du texte
LINE-HEIGHT Interlignage
VERTICAL-ALIGN Indice et exposant
Page précédente Retour au sommaire Page suivante
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