Leçon 5 : Le texte
Formater et ajouter du style au texte est primordial pour tout concepteur Web. Cette leçon vous introduira aux possibilités étonnantes offertes par CSS pour la présentation du texte. Les propriétés suivantes seront décrites :
L'indentation du texte [text-indent]
La propriété text-indent permet d'ajouter une touche d'élégance aux paragraphes de texte en appliquant une indentation
à la première ligne du paragraphe. Dans l'exemple suivant, un alinéa de 30px est appliqué à tous les paragraphes
balisés par un élément <p> :
p {
text-indent: 30px;
}
L'alignement du texte [text-align]
La propriété CSS text-align correspond à l'attribut align utilisé dans les versions anciennes de HTML. Le texte
peut être aligné à gauche (left), à droite (right) ou centré (center).
Outre cela, la valeur justify étirera chaque ligne de sorte que les marges à gauche et à droite soient droites
toutes les deux. Cette mise en page est courante, par exemple, dans les journaux et les magazines.
Dans l'exemple suivant, le texte des titres du tableau <th> est aligné à droite, tandis que les
données du tableau <td> sont centrées. Enfin, les paragraphes de texte normaux sont justifiés :
th {
text-align: right;
}
td {
text-align: center;
}
p {
text-align: justify;
}
La décoration du texte [text-decoration]
La propriété text-decoration permet d'ajouter des « décorations » ou « effets » différents au texte. Par exemple,
on peut souligner le texte, le barrer, ou tracer un trait au-dessus, etc. Dans l'exemple suivant, les éléments <h1>
sont des titres soulignés, les éléments <h2> sont des titres avec un trait au-dessus et les éléments <h3>
des titres barrés.
h1 {
text-decoration: underline;
}
h2 {
text-decoration: overline;
}
h3 {
text-decoration: line-through;
}
L'espacement des lettres [letter-spacing]
L'espacement entre les caractères du texte peut être défini avec la propriété letter-spacing. La valeur de la
propriété est simplement celle de l'espacement désiré. Par exemple, si vous voulez un espacement de 3px entre
les lettres d'un paragraphe de texte <p>, et de 6px entre les lettres des titres <h1>,
voici le code à utiliser :
h1 {
letter-spacing: 6px;
}
p {
letter-spacing: 3px;
}
La transformation du texte [text-transform]
La propriété text-transform contrôle la capitalisation du texte. On peut choisir une capitalisation initiale,
une mise en majuscules ou une mise en minuscules, indépendamment de l'aspect du texte original
dans le code HTML.
Voici un exemple avec le mot « titre » que l'on peut présenter à l'utilisateur comme « TITRE » ou « Titre ».
La propriété text-transform admet quatre valeurs possibles :
- capitalize
- Elle capitalise la première lettre de chaque mot. Par exemple, « marcel dupond » deviendra « Marcel Dupond ».
- uppercase
- Elle convertit toutes les lettres en majuscules. Par exemple, « marcel dupond » deviendra « MARCEL DUPOND ».
- lowercase
- Elle convertit toutes les lettres en minuscules. Par exemple, « MARCEL DUPOND » deviendra « marcel dupond ».
- none
- Aucune transformation, et le texte se présente tel qu'il apparaît dans le code HTML.
Pour exemple, nous utiliserons une liste de noms, balisés avec des éléments <li> (list-item).
Disons que nous voulons que les noms soient capitalisés et les titres soient en lettres majuscules.
Examinez le code HTML de cet exemple et vous constaterez que le texte est en fait en minuscules.
h1 {
text-transform: uppercase;
}
li {
text-transform: capitalize;
}
Résumé
Avec les trois dernières leçons, nous avons déjà appris beaucoup de propriétés CSS, mais il y a plus encore. Dans la leçon suivante, nous aborderons les liens.