Editions ENI Livres | Vidéos | e-Formations
Les styles pour le texte
L’application des styles
Dans ce chapitre, nous allons parcourir les principales propriétés CSS qui permettent d’appliquer des mises en forme aux textes. Nous pourrons appliquer ces styles à des éléments HTML très différents. Pour application des styles à une sélection de texte, nous allons utiliser des éléments HTML de type inline, comme <span>, <a>, <code>... Pour une application à l’ensemble du texte d’un élément HTML, nous allons utiliser des éléments de type block, comme <p>, <h1> à <h6>, <blockquote>... Vous pourrez aussi appliquer ces styles aux textes placés dans les listes, les tableaux et les formulaires.
Les styles que nous allons étudier appliquent une couleur et des décorations au texte, changent la casse des caractères…
La couleur du texte
C’est la propriété color qui permet de modifier la couleur du texte. Reportez-vous au chapitre Définir les styles CSS, à la section La notation des couleurs, pour revoir les notations utilisables pour les couleurs.
Dans cet exemple très simple, nous appliquons deux couleurs, avec deux notations différentes, à deux éléments <span> :
<!doctype html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Titre de la page</title>
<style>
.bleu {
color: blue ;
}
.bleu-fonce {
color: rgb(10,21,252) ;
}
</style>
</head>
<body>
<p>Aenean lacinia <span class="bleu">bibendum nulla</span> sed
consectetur. Curabitur <span class="bleu-fonce">blandit tempus
</span> porttitor.</p>
</body>
</html> Les décorations
1. Le module CSS
Les décorations de texte font partie du module Text Decoration Module Level 3, qui est en Candidate Recommendation au 5 mai 2022 : https://www.w3.org/TR/css-text-decor-3/
2. Les lignes pour le texte
Les décorations permettent d’appliquer une ligne, au-dessus, en-dessous ou en travers du texte, et nous pouvons ajouter une couleur et un type à ces lignes.
Voici les trois propriétés à utiliser :
-
text-decoration-line pour définir la position de la ligne. Les valeurs possibles sont : none, underline, overline, line-through, underline overline et underline line-through.
-
text-decoration-color pour choisir la couleur de la ligne.
-
text-decoration-style pour appliquer un type de ligne (pointillée, hachurée…). Voici les valeurs que vous pouvez exploiter : solid, double, dotted, dashed et wavy.
Vous pouvez aussi utiliser la syntaxe raccourcie : text-decoration. Les valeurs sont à indiquer dans cet ordre : text-decoration-line text-decoration-style text-decoration-color. Les valeurs sont simplement séparées par un espace.
Voici un exemple simple :
<!doctype html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Titre de la page</title>
<style>
.important...La mise en forme du texte
1. Le module CSS
Toute la mise en forme du texte que nous allons voir dans ce titre fait partie du module Text Module Level 3, qui est en Candidate Recommendation Draft au 3 septembre 2023, au moment de l’écriture de ce livre en novembre 2023 : https://www.w3.org/TR/css-text-3/
2. Le changement de casse
La propriété text-transform permet de changer la casse des caractères. Ce changement se fait quelle que soit la saisie initiale du texte. Cette propriété accepte plusieurs valeurs :
-
capitalize pour passer chaque première lettre de chaque mot en majuscule.
-
uppercase pour transformer tous les caractères en majuscule.
-
lowercase pour passer tous les caractères en minuscule.
-
none pour supprimer tout changement de casse déjà appliqué.
Voici un exemple simple :
<!doctype html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Titre de la page</title>
<style>
.majuscules {
text-transform: uppercase ;
}
.majuscules-mots {
text-transform: capitalize ;
}
</style>
</head>
<body>
<p>Aenean lacinia <span class="majuscules">bibendum nulla
</span> sed consectetur. <span class="majuscules-mots">Curabitur
blandit tempus porttitor</span>.</p>
</body>
</html> Voici l’affichage obtenu :
3. Les espaces entre les caractères et les mots
La propriété letter-spacing permet de modifier l’espace entre les caractères et la propriété word-spacing l’applique au niveau des mots. Vous pouvez utiliser des valeurs positives pour espacer les lettres ou les mots ou utiliser des valeurs négatives pour les rapprocher. Notez que vous ne pouvez utiliser que des valeurs absolues.
Voici des exemples simples :
<!doctype html>
<html lang="fr">
<head>
<meta charset="UTF-8"> ...D’autres propriétés pour le texte
1. L’interligne
La hauteur de l’interligne faisait déjà partie de la définition des CSS 2.1 (https://www.w3.org/TR/CSS21/visudet.html#propdef-line-height). Cette propriété peut s’intégrer dans la syntaxe raccourcie de font : https://www.w3.org/TR/css-fonts-3, dans le module Fonts Module Level 3.
Voici la syntaxe du raccourci : font: font-style font-variant font-weight font-size/line-height font-family.
Cette propriété line-height accepte de nombreuses valeurs :
-
valeur numérique sans unité : cela définit la valeur multiplicatrice de la taille de caractères utilisée dans le texte.
-
valeur numérique fixe en px par exemple : cela indique un interligne fixe.
-
valeur numérique relative en em par exemple : cela détermine l’interligne proportionnel à la taille de caractères utilisée dans le texte.
Voici un exemple simple :
<!doctype html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Titre de la page</title>
<style>
.interligne-fixe {
line-height: 14px ;
}
.interligne-multi...Le module CSS 4 pour la mise en forme du texte
La prochaine version des CSS pour la mise en forme du texte est déjà en prépa-ration. Le module CSS Text Module Level 4 est en Working Draft à la date du 20 octobre 2023 : https://www.w3.org/TR/css-text-4/