1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
|
---
title: Styles de texte
slug: CSS/Premiers_pas/Styles_de_texte
tags:
- CSS
- 'CSS:Premiers_pas'
translation_of: Learn/CSS/Styling_text/Fundamentals
translation_of_original: Web/Guide/CSS/Getting_started/Text_styles
---
<p> </p>
<p>Cette page vous donne plus d'exemples de styles de texte.</p>
<p>Vous modifierez votre feuille de style pour utiliser différentes polices.</p>
<h3 id="Information_:_les_styles_de_texte" name="Information_:_les_styles_de_texte">Information : les styles de texte</h3>
<p>CSS dispose de plusieurs propriétés pour les styles de texte.</p>
<p>Il existe une propriété raccourcie pratique, <code>font</code>, que vous pouvez utiliser pour spécifier plusieurs choses à la fois — par exemple :</p>
<ul> <li>Les styles gras, italique et petites majuscules (petites capitales)</li> <li>La taille du texte</li> <li>La hauteur de ligne</li> <li>La police utilisée</li>
</ul>
<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;"> <caption>Exemple </caption> <tbody> <tr> <td> <div style="width: 40em;"> <pre class="eval">
p {font: italic 75%/125% "Comic Sans MS", cursive;}
</pre> </div> <p>Cette règle change plusieurs propriétés de la police, et rend tous les paragraphes en italique.</p> <p>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).</p> <p>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.</p> <p>La règle a un effet de bord qui est de désactiver le gras et les petites majuscules (en les définissant à <code>normal</code>).</p> </td> </tr> </tbody>
</table>
<h4 id="Polices" name="Polices">Polices</h4>
<p>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.</p>
<p>À la fin de la liste, indiquez l'un des types de polices génériques par défaut : <code>serif</code>, <code>sans-serif</code>, <code>cursive</code>, <code>fantasy</code> ou <code>monospace</code>. (Celles-ci correspondent souvent à des paramètres définis dans les options de votre navigateur.)</p>
<p>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.</p>
<p>Pour spécifier une police particulière, utilisez la propriété <code>font-face</code>.</p>
<h4 id="Taille_de_police" name="Taille_de_police">Taille de police</h4>
<p>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.</p>
<p>Vous pouvez utiliser certaines valeurs prédéfinies pour la taille, comme <code>small</code>, <code>medium</code> et <code>large</code>. Vous pouvez également utiliser des valeurs relatives à la taille de police de l'élément parent, comme ceci : <code>smaller</code>, <code>larger</code>, <code>150%</code> ou <code>1.5</code>.</p>
<p>Si nécessaire, vous pouvez spécifier une taille précise, comme : <code>12px</code> (12 pixels) pour un dispositif d'affichage ou <code>12pt</code> (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.</p>
<p>Pour spécifier une taille de police particulière, utilisez la propriété <code>font-size</code>.</p>
<h4 id="Hauteur_de_ligne" name="Hauteur_de_ligne">Hauteur de ligne</h4>
<p>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.</p>
<p>Pour spécifier une hauteur de ligne particulière, utilisez la propriété <code>line-height</code>.</p>
<h4 id="D.C3.A9coration" name="D.C3.A9coration">Décoration</h4>
<p>La propriété séparée <code>text-decoration</code> permet de spécifier d'autres styles, comme <code>underline</code> (souligné), ou <code>line-through</code> (barré). Vous pouvez la définir à <code>normal</code> pour enlever explicitement toute décoration.</p>
<h4 id="Autres_propri.C3.A9t.C3.A9s" name="Autres_propri.C3.A9t.C3.A9s">Autres propriétés</h4>
<p>Pour spécifier l'italique, utilisez <code>font-style: italic;</code><br>
Pour spécifier le gras, utilisez <code>font-weight: bold;</code><br>
Pour spécifier de petites majuscules, utilisez <code>font-variant: small-caps;</code></p>
<p>Pour désactiver individuellement chacune de ces propriétés, vous pouvez spécifier la valeur <code>normal</code> ou <code>inherit</code>.</p>
<table style="border: 1px solid #36b; padding: 1em; background-color: #f4f4f4; margin-bottom: 1em;"> <caption>Plus de détails </caption> <tbody> <tr> <td>Vous pouvez spécifier des styles de texte de bien d'autres manières. <p>Par exemple, certaines des propriétés mentionnées ici disposent d'autres valeurs possibles.</p> <p>Dans une feuille de style complexe, évitez d'utiliser la propriété raccourcie <code>font</code>, à cause de ses effets de bord (mise à zéro des autres propriétés).</p> <p>Pour plus de détails sur l'ensemble des propriétés liées aux polices, consultez <a class="external" href="http://www.w3.org/TR/CSS21/fonts.html">Fonts</a> dans la spécification CSS. Pour plus de détails sur la décoration du texte, consultez-y la section <a class="external" href="http://www.w3.org/TR/CSS21/text.html">Text</a>.</p> </td> </tr> </tbody>
</table>
<h3 id="Action_:_sp.C3.A9cification_de_polices" name="Action_:_sp.C3.A9cification_de_polices">Action : spécification de polices</h3>
<p>Pour un document simple, vous pouvez définir la police sur l'élément <small>BODY</small>, et tout le reste du document en héritera.</p>
<p>É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 :</p>
<div style="width: 40em;">
<pre class="eval">body {font: 16px "Comic Sans MS", cursive;}
</pre>
</div>
<p>Ajoutez un commentaire expliquant la règle, et des espaces pour respecter la mise en page choisie.</p>
<p>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 :</p>
<table style="border: 2px outset #36b; padding: 1em;"> <tbody> <tr> <td style="font: italic 16px 'Comic Sams MS', cursive; color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: green;">S</strong>tyle <strong style="color: green;">S</strong>heets</td> </tr> <tr> <td style="font: 16px 'Comic Sams MS', cursive; color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td> </tr> </tbody>
</table>
<p>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.</p>
<p> </p>
<table style="border: 1px solid #36b; padding: 1em; background-color: #ffe;"> <caption>Challenge </caption> <tbody> <tr> <td>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 : <table> <tbody> <tr> <td style="font: italic 16px 'Comic Sams MS', cursive; color: blue;"><strong style="color: red; font: 200% serif;">C</strong>ascading <strong style="color: green; font: 200% serif;">S</strong>tyle <strong style="color: green; font: 200% serif;">S</strong>heets</td> </tr> <tr> <td style="font: 16px 'Comic Sams MS', cursive; color: blue;"><strong style="color: red; font: 200% serif;">C</strong>ascading <strong style="color: red; font: 200% serif;">S</strong>tyle <strong style="color: red; font: 200% serif;">S</strong>heets</td> </tr> </tbody> </table> </td> </tr> </tbody>
</table>
<p> </p>
<h4 id="Pour_continuer" name="Pour_continuer">Pour continuer</h4>
<p>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 : <strong><a href="/fr/CSS/Premiers_pas/Couleurs" title="fr/CSS/Premiers_pas/Couleurs">Couleurs</a></strong></p>
<p>{{ languages( { "en": "en/CSS/Getting_Started/Text_styles", "it": "it/Conoscere_i_CSS/Stili_del_testo", "ja": "ja/CSS/Getting_Started/Text_styles", "pl": "pl/CSS/Na_pocz\u0105tek/Style_tekstowe", "pt": "pt/CSS/Como_come\u00e7ar/Estilos_de_texto" } ) }}</p>
|
