Blog ENI : Toute la veille numérique !
-25€ dès 75€ sur les livres en ligne, vidéos... avec le code FUSEE25. J'en profite !
Accès illimité 24h/24 à tous nos livres & vidéos ! 
Découvrez la Bibliothèque Numérique ENI. Cliquez ici
  1. Livres et vidéos
  2. HTML5 et CSS3
  3. Les styles pour le texte
Extrait - HTML5 et CSS3 Maîtrisez les standards de la création de sites web (2e édition)
Extraits du livre
HTML5 et CSS3 Maîtrisez les standards de la création de sites web (2e édition) Revenir à la page d'achat du livre

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 13 août 2019 : 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 encore en Working Draft, au 29 avril 2020, au moment de l’écriture de ce livre : 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 :

images/C19-005.png

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"> 
   <title>Titre de la page</title> ...

D’autres propriétés pour le texte

1. L’interligne

La hauteur de l’interligne fait 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/#font-prop, 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 13 novembre 2019 : https://www.w3.org/TR/css-text-4/