Styler le texte avec les propriétés CSS du texte

Introduction

Dans ce laboratoire, les étudiants exploreront les techniques essentielles de mise en forme du texte CSS pour améliorer la typographie et la lisibilité du web. Le laboratoire couvre cinq propriétés clés du texte : la hauteur de ligne, l'indentation de texte, l'alignement du texte, l'espacement entre lettres et la décoration du texte. Les participants apprendront à contrôler l'espace vertical entre les lignes, à créer des indentations de texte, à aligner le texte, à ajuster l'espacement entre les caractères et à appliquer des styles de texte décoratifs.

Grâce à des exemples pratiques et des démonstrations HTML/CSS pratiques, les apprenants acqueront des compétences pratiques dans la manipulation de l'apparence du texte et l'amélioration de la présentation visuelle du contenu web. Chaque étape fournit des instructions claires et des exemples de code qui illustrent la propriété spécifique de mise en forme du texte, permettant aux étudiants de comprendre et de mettre en œuvre efficacement ces techniques fondamentales de mise en forme du texte CSS.

Régler la hauteur de ligne avec la propriété line-height

Dans cette étape, vous allez apprendre à contrôler la hauteur de ligne du texte à l'aide de la propriété CSS line-height. La hauteur de ligne est l'espace vertical entre les lignes de texte, ce qui peut considérablement améliorer la lisibilité et l'apparence du texte.

Tout d'abord, créons un fichier HTML pour démontrer le style de hauteur de ligne. Ouvrez l'IDE Web et créez un nouveau fichier nommé text-style.html dans le répertoire ~/project.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Exemple de hauteur de ligne</title>
    <style>
      .default-text {
        /* Hauteur de ligne par défaut */
        line-height: normal;
      }

      .increased-line-height {
        /* Hauteur de ligne augmentée */
        line-height: 1.5;
      }

      .pixel-line-height {
        /* Hauteur de ligne fixe en pixels */
        line-height: 30px;
      }
    </style>
  </head>
  <body>
    <h1>Démonstration de la hauteur de ligne</h1>

    <h2>Hauteur de ligne par défaut</h2>
    <p class="default-text">
      Ceci est un paragraphe avec la hauteur de ligne par défaut. Remarquez
      comment les lignes sont espacées normalement.
    </p>

    <h2>Hauteur de ligne augmentée</h2>
    <p class="increased-line-height">
      Ce paragraphe utilise une hauteur de ligne de 1,5, ce qui fournit plus
      d'espace entre les lignes, rendant le texte plus facile à lire.
    </p>

    <h2>Hauteur de ligne fixe en pixels</h2>
    <p class="pixel-line-height">
      Ce paragraphe a une hauteur de ligne fixe de 30 pixels. L'espacement entre
      les lignes est constant et précisément contrôlé.
    </p>
  </body>
</html>

Analysons la propriété line-height :

normal : Hauteur de ligne par défaut du navigateur
Valeurs numériques (comme 1,5) : Multiplie la taille de la police
Valeurs en pixels (comme 30px) : Hauteur de ligne fixe en pixels

Contrôler l'indentation du texte avec text-indent

Dans cette étape, vous allez apprendre à contrôler l'indentation du texte à l'aide de la propriété CSS text-indent. L'indentation du texte vous permet de créer un espace visuel au début des paragraphes, ce qui peut améliorer la lisibilité et l'esthétique de la conception.

Continuons avec le fichier HTML précédent. Ouvrez le fichier text-style.html dans l'IDE Web et modifiez le contenu existant pour démontrer l'indentation du texte :

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Exemple d'indentation du texte</title>
    <style>
      .default-indent {
        /* Texte par défaut sans indentation */
        text-indent: 0;
      }

      .pixel-indent {
        /* Indentation fixe en pixels */
        text-indent: 20px;
      }

      .percentage-indent {
        /* Indentation basée sur un pourcentage */
        text-indent: 5%;
      }
    </style>
  </head>
  <body>
    <h1>Démonstration d'indentation du texte</h1>

    <h2>Texte par défaut (sans indentation)</h2>
    <p class="default-indent">
      Ce paragraphe commence au bord gauche sans aucune indentation. Remarquez
      comment il commence tout droit au bord de son conteneur.
    </p>

    <h2>Indentation basée sur les pixels</h2>
    <p class="pixel-indent">
      Ce paragraphe a une indentation fixe de 20 pixels. La première ligne est
      poussée de 20 pixels du bord gauche.
    </p>

    <h2>Indentation basée sur un pourcentage</h2>
    <p class="percentage-indent">
      Ce paragraphe utilise une indentation de 5%, ce qui signifie que la
      première ligne est indentée par rapport à la largeur de son conteneur.
    </p>
  </body>
</html>

La propriété text-indent permet trois principaux types d'indentation :

0 : Aucune indentation (par défaut)
Valeurs en pixels (comme 20px) : Indentation fixe
Valeurs en pourcentage (comme 5%) : Relative à la largeur du conteneur

Aligner le texte à l'aide de la propriété text-align

Dans cette étape, vous allez apprendre à contrôler l'alignement du texte à l'aide de la propriété CSS text-align. L'alignement du texte est crucial pour créer des maquettes visuellement attrayantes et lisibles.

Continuons à modifier le fichier text-style.html dans l'IDE Web pour démontrer différentes options d'alignement du texte :

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Exemple d'alignement du texte</title>
    <style>
      .left-align {
        /* Texte aligné à gauche (par défaut) */
        text-align: left;
      }

      .center-align {
        /* Texte centré */
        text-align: center;
      }

      .right-align {
        /* Texte aligné à droite */
        text-align: right;
      }

      .justify-align {
        /* Texte justifié */
        text-align: justify;
        width: 300px;
      }
    </style>
  </head>
  <body>
    <h1>Démonstration d'alignement du texte</h1>

    <h2>Texte aligné à gauche</h2>
    <p class="left-align">
      Ce paragraphe est aligné sur la marge gauche. C'est l'alignement par
      défaut de la plupart du texte.
    </p>

    <h2>Texte centré</h2>
    <p class="center-align">
      Ce paragraphe est centré horizontalement dans son conteneur.
    </p>

    <h2>Texte aligné à droite</h2>
    <p class="right-align">
      Ce paragraphe est aligné sur la marge droite. Remarquez comment il
      commence de l'autre côté.
    </p>

    <h2>Texte justifié</h2>
    <p class="justify-align">
      Le texte justifié s'étend pour remplir toute la largeur de son conteneur,
      créant des bords droits et gauche réguliers.
    </p>
  </body>
</html>

La propriété text-align offre quatre principales options d'alignement :

left : Aligne le texte à gauche (par défaut)
center : Centre le texte horizontalement
right : Aligne le texte à droite
justify : Étend le texte pour remplir la largeur du conteneur

Ajuster l'espacement entre les caractères avec letter-spacing

Dans cette étape, vous allez apprendre à contrôler l'espacement entre les caractères à l'aide de la propriété CSS letter-spacing. L'espacement entre les caractères vous permet d'ajuster la distance entre les caractères individuels dans un texte, ce qui peut créer des effets typographiques uniques.

Continuez à éditer le fichier text-style.html dans l'IDE Web pour démontrer différentes options d'espacement entre les caractères :

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Exemple d'espacement entre les caractères</title>
    <style>
      .default-spacing {
        /* Espacement entre les caractères par défaut */
        letter-spacing: normal;
      }

      .tight-spacing {
        /* Espacement entre les caractères négatif */
        letter-spacing: -1px;
      }

      .wide-spacing {
        /* Espacement entre les caractères positif */
        letter-spacing: 3px;
      }

      .heading-spacing {
        /* Espacement pour les titres */
        letter-spacing: 0, 1em;
      }
    </style>
  </head>
  <body>
    <h1>Démonstration d'espacement entre les caractères</h1>

    <h2>Espacement entre les caractères par défaut</h2>
    <p class="default-spacing">
      Ce paragraphe a un espacement entre les caractères normal. Chaque
      caractère est positionné à sa distance par défaut.
    </p>

    <h2>Espacement entre les caractères serré</h2>
    <p class="tight-spacing">
      Ce paragraphe utilise un espacement entre les caractères négatif,
      rapprochant les caractères les uns des autres.
    </p>

    <h2>Espacement entre les caractères large</h2>
    <p class="wide-spacing">
      Ce paragraphe a un espacement entre les caractères augmenté, éloignant les
      caractères les uns des autres.
    </p>

    <h2>Titre avec un espacement subtil</h2>
    <h3 class="heading-spacing">
      Titre stylé avec un espacement subtil entre les caractères
    </h3>
  </body>
</html>

La propriété letter-spacing offre trois principales options :

normal : Espacement entre les caractères par défaut
Valeurs négatives (comme -1px) : Resserre l'espacement entre les caractères
Valeurs positives (comme 3px) : Augmente l'espacement entre les caractères

Remarque : Dans la propriété CSS, 0,1em est utilisé pour les valeurs relatives. En HTML, il est recommandé d'utiliser des guillemets pour les attributs de style. J'ai corrigé 0.1em en 0,1em pour suivre la syntaxe française, mais dans un contexte HTML correct, il faudrait utiliser des guillemets autour des valeurs de style.

Orner le texte avec text-decoration

Dans cette étape, vous allez apprendre à ajouter des décorations visuelles au texte à l'aide de la propriété CSS text-decoration. La décoration du texte vous permet d'ajouter des soulignements, des surlignements et d'autres effets stylistiques à votre texte.

Continuez à éditer le fichier text-style.html dans l'IDE Web pour démontrer différentes options de décoration du texte :

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Exemple de décoration du texte</title>
    <style>
      .underline-text {
        /* Souligner le texte */
        text-decoration: underline;
      }

      .overline-text {
        /* Surligner le texte */
        text-decoration: overline;
      }

      .line-through-text {
        /* Barrer le texte */
        text-decoration: line-through;
      }

      .multiple-decorations {
        /* Plusieurs décorations de texte */
        text-decoration: underline overline;
      }

      .colored-decoration {
        /* Décoration de texte colorée */
        text-decoration: underline;
        text-decoration-color: red;
      }
    </style>
  </head>
  <body>
    <h1>Démonstration de la décoration du texte</h1>

    <h2>Texte souligné</h2>
    <p class="underline-text">
      Ce paragraphe a une décoration de soulignement.
    </p>

    <h2>Texte surligné</h2>
    <p class="overline-text">Ce paragraphe a une décoration de surlignement.</p>

    <h2>Texte barré</h2>
    <p class="line-through-text">Ce paragraphe a une décoration de barré.</p>

    <h2>Plusieurs décorations</h2>
    <p class="multiple-decorations">
      Ce paragraphe a à la fois des décorations de soulignement et de
      surlignement.
    </p>

    <h2>Décoration colorée</h2>
    <p class="colored-decoration">
      Ce paragraphe a une décoration de soulignement rouge.
    </p>
  </body>
</html>

La propriété text-decoration offre plusieurs options :

underline : Ajoute une ligne sous le texte
overline : Ajoute une ligne au-dessus du texte
line-through : Ajoute une ligne à travers le texte
Plusieurs décorations peuvent être combinées
Couleur de la décoration peut être personnalisée

Sommaire

Dans ce laboratoire, les participants ont appris à améliorer la mise en forme du texte à l'aide de diverses propriétés CSS du texte. La première étape a porté sur le contrôle de la hauteur de ligne avec la propriété line-height, en démontrant différentes techniques telles que l'utilisation de valeurs normales, de multiplicateurs numériques et de valeurs en pixels pour améliorer la lisibilité et l'apparence du texte.

Le laboratoire a exploré de multiples façons de manipuler la présentation du texte, y compris la définition de l'espacement entre les lignes, le contrôle de l'indentation du texte, l'alignement du texte, l'ajustement de l'espacement entre les caractères et l'ajout de décorations au texte. En pratiquant ces propriétés CSS du texte, les apprenants ont acquis des compétences pratiques pour créer une typographie web plus attrayante et lisible visuellement.