Styles de texte

 

Cette page vous donne plus d'exemples de styles de texte.

Vous modifierez votre feuille de style pour utiliser différentes polices.

Information : les styles de texte

CSS dispose de plusieurs propriétés pour les styles de texte.

Il existe une propri√©t√© raccourcie pratique, font, que vous pouvez utiliser pour sp√©cifier plusieurs choses √† la fois ‚ÄĒ par exemple :

  • Les styles gras, italique et petites majuscules (petites capitales)
  • La taille du texte
  • La hauteur de ligne
  • La police utilis√©e
Exemple
p {font: italic 75%/125% "Comic Sans MS", cursive;}

Cette règle change plusieurs propriétés de la police, et rend tous les paragraphes en italique.

La taille du texte est définie aux trois quarts de la taille dans l'élément parent de chaque paragraphe, et la hauteur de ligne à 125% (un petit peu plus espacé qu'habituellement).

La police choisie est Comic Sans MS, mais si celle-ci n'est pas disponible le navigateur utilisera sa police cursive (écriture à la main) par défaut.

La règle a un effet de bord qui est de désactiver le gras et les petites majuscules (en les définissant à normal).

Polices

Il n'est pas possible de prédire les polices que les lecteurs de votre document auront. C'est pourquoi, lorsque vous spécifiez une police, il est utile de donner une liste d'alternatives, dans l'ordre de préférence.

√Ä la fin de la liste, indiquez l'un des types de polices g√©n√©riques par d√©faut : serif, sans-serif, cursive, fantasy ou monospace. (Celles-ci correspondent souvent √† des param√®tres d√©finis dans les options de votre navigateur.)

Si la police ne permet pas d'afficher certaines parties du document, le navigateur peut lui substituer une autre police. Par exemple, le document peut contenir des caractères spéciaux qui ne sont pas définis dans la police. Si le navigateur arrive à trouver une autre police qui dispose de ces caractères, il utilisera celle-ci.

Pour spécifier une police particulière, utilisez la propriété font-face.

Taille de police

Les lecteurs utilisant des navigateurs Mozilla peuvent choisir la taille de police par d√©faut dans les options et changer la taille du texte pendant la lecture d'une page, il est donc recommand√© d'utiliser des tailles de police relatives o√Ļ c'est possible.

Vous pouvez utiliser certaines valeurs pr√©d√©finies pour la taille, comme small, medium et large. Vous pouvez √©galement utiliser des valeurs relatives √† la taille de police de l'√©l√©ment parent, comme ceci : smaller, larger, 150% ou 1.5.

Si n√©cessaire, vous pouvez sp√©cifier une taille pr√©cise, comme : 12px (12 pixels) pour un dispositif d'affichage ou 12pt (12 points) pour une imprimante. Cette taille est th√©oriquement la largeur d'une lettre m, mais la mani√®re dont la taille visible est li√©e √† la taille sp√©cifi√©e d√©pend d'une police √† l'autre.

Pour spécifier une taille de police particulière, utilisez la propriété font-size.

Hauteur de ligne

La hauteur de ligne spécifie l'espacement entre les lignes. Si votre document dispose de longs paragraphes s'étalant sur de nombreuses lignes, un espacement plus grand que d'habitude peut le rendre plus facile à lire, particulièrement si la taille de police est petite.

Pour spécifier une hauteur de ligne particulière, utilisez la propriété line-height.

Décoration

La propriété séparée text-decoration permet de spécifier d'autres styles, comme underline (souligné), ou line-through (barré). Vous pouvez la définir à normal pour enlever explicitement toute décoration.

Autres propriétés

Pour spécifier l'italique, utilisez font-style: italic;
Pour spécifier le gras, utilisez font-weight: bold;
Pour spécifier de petites majuscules, utilisez font-variant: small-caps;

Pour désactiver individuellement chacune de ces propriétés, vous pouvez spécifier la valeur normal ou inherit.

Plus de détails
Vous pouvez spécifier des styles de texte de bien d'autres manières.

Par exemple, certaines des propriétés mentionnées ici disposent d'autres valeurs possibles.

Dans une feuille de style complexe, évitez d'utiliser la propriété raccourcie font, à cause de ses effets de bord (mise à zéro des autres propriétés).

Pour plus de détails sur l'ensemble des propriétés liées aux polices, consultez Fonts dans la spécification CSS. Pour plus de détails sur la décoration du texte, consultez-y la section Text.

Action : sp√©cification de polices

Pour un document simple, vous pouvez définir la police sur l'élément BODY, et tout le reste du document en héritera.

√Čditez votre fichier CSS. Ajoutez cette r√®gle pour changer la police globale. Le haut du fichier CSS est un endroit logique pour ce faire, mais la r√®gle a le m√™me effet o√Ļ qu'elle soit plac√©e :

body {font: 16px "Comic Sans MS", cursive;}

Ajoutez un commentaire expliquant la règle, et des espaces pour respecter la mise en page choisie.

Actualisez dans votre navigateur pour en voir l'effet. Si votre syst√®me dispose de Comic Sans MS, ou d'une autre police cursive qui ne supporte pas l'italique, votre navigateur choisira une police diff√©rente pour le texte en italique √† la premi√®re ligne :

Cascading Style Sheets
Cascading Style Sheets

Depuis la barre de menus, choisissez Affichage ‚Äď Taille du texte ‚Äď Plus grande. Bien que vous ayez sp√©cifi√© pr√©cis√©ment 16 pixels dans le style, un utilisateur lisant le document peut en changer la taille.

 

Challenge
Sans rien changer d'autre, rendez les six lettres initiales deux fois plus grandes que la taille normale dans la police serif par d√©faut du navigateur :
Cascading Style Sheets
Cascading Style Sheets

 

Pour continuer

Votre document d'exemple utilise d√©j√† plusieurs noms de couleurs. La page suivante liste les noms des couleurs standard et explique comment en sp√©cifier d'autres : Couleurs