Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Apprendre Techniques de Mise en Forme du Texte pour la Lisibilité | Mise en Forme du Texte en CSS
Fondamentaux De CSS

bookTechniques de Mise en Forme du Texte pour la Lisibilité

line-height

line-height contrôle l'espacement vertical entre les lignes de texte. Les navigateurs définissent une valeur par défaut basée sur la police, mais vous pouvez la personnaliser en utilisant plusieurs formats :

line-height: multiplier | value in px | value in em | percent
  • multiplier valeur sans unité comme 1.5 multiplie la font-size ;
  • value in px hauteur spécifique, par exemple, 24px ;
  • value in em valeur relative, similaire au multiplicateur (1.4em = font-size × 1.4) ;
  • percent fonctionne comme le multiplicateur (120% = font-size × 1.2).
index.html

index.html

styles.css

styles.css

copy

Résultat

letter-spacing

letter-spacing définit l'espacement horizontal entre les caractères.

letter-spacing: normal | value in px | value in em
  • normal : espacement par défaut ;
  • value in px : espacement supplémentaire fixe ;
  • value in em : espacement relatif à la font-size.
index.html

index.html

styles.css

styles.css

copy

Résultat

word-spacing

La propriété word-spacing ajuste la distance entre les mots.

word-spacing: value | inherit | normal
  • value : espacement personnalisé ;
  • inherit : utilise l'espacement de l’élément parent ;
  • normal : espacement par défaut.
index.html

index.html

styles.css

styles.css

copy

Résultat

text-shadow

text-shadow ajoute des ombres au texte. Cette propriété accepte quatre valeurs :

text-shadow: "X set" | "Y set" | "blur radius" | "color"
  • X set : décalage horizontal ;
  • Y set : décalage vertical ;
  • blur radius : douceur de l’ombre (0 = net) ;
  • color : toute couleur valide, par défaut la couleur actuelle du texte.
index.html

index.html

styles.css

styles.css

copy

Résultat

Note
Remarque

En matière de mise en forme du texte, il n’existe pas de règles strictes imposant l’utilisation de certaines valeurs dans des situations spécifiques. Le choix des propriétés et des valeurs de formatage du texte dépend des exigences particulières de chaque projet et de la vision du design.

1. Quelle propriété CSS est utilisée pour créer un effet visuel qui ajoute une ombre au texte ?

2. Quelle propriété CSS permet d’ajuster la distance entre les mots dans un texte ?

question mark

Quelle propriété CSS est utilisée pour créer un effet visuel qui ajoute une ombre au texte ?

Select the correct answer

question mark

Quelle propriété CSS permet d’ajuster la distance entre les mots dans un texte ?

Select the correct answer

Tout était clair ?

Comment pouvons-nous l'améliorer ?

Merci pour vos commentaires !

Section 2. Chapitre 2

Demandez à l'IA

expand

Demandez à l'IA

ChatGPT

Posez n'importe quelle question ou essayez l'une des questions suggérées pour commencer notre discussion

bookTechniques de Mise en Forme du Texte pour la Lisibilité

Glissez pour afficher le menu

line-height

line-height contrôle l'espacement vertical entre les lignes de texte. Les navigateurs définissent une valeur par défaut basée sur la police, mais vous pouvez la personnaliser en utilisant plusieurs formats :

line-height: multiplier | value in px | value in em | percent
  • multiplier valeur sans unité comme 1.5 multiplie la font-size ;
  • value in px hauteur spécifique, par exemple, 24px ;
  • value in em valeur relative, similaire au multiplicateur (1.4em = font-size × 1.4) ;
  • percent fonctionne comme le multiplicateur (120% = font-size × 1.2).
index.html

index.html

styles.css

styles.css

copy

Résultat

letter-spacing

letter-spacing définit l'espacement horizontal entre les caractères.

letter-spacing: normal | value in px | value in em
  • normal : espacement par défaut ;
  • value in px : espacement supplémentaire fixe ;
  • value in em : espacement relatif à la font-size.
index.html

index.html

styles.css

styles.css

copy

Résultat

word-spacing

La propriété word-spacing ajuste la distance entre les mots.

word-spacing: value | inherit | normal
  • value : espacement personnalisé ;
  • inherit : utilise l'espacement de l’élément parent ;
  • normal : espacement par défaut.
index.html

index.html

styles.css

styles.css

copy

Résultat

text-shadow

text-shadow ajoute des ombres au texte. Cette propriété accepte quatre valeurs :

text-shadow: "X set" | "Y set" | "blur radius" | "color"
  • X set : décalage horizontal ;
  • Y set : décalage vertical ;
  • blur radius : douceur de l’ombre (0 = net) ;
  • color : toute couleur valide, par défaut la couleur actuelle du texte.
index.html

index.html

styles.css

styles.css

copy

Résultat

Note
Remarque

En matière de mise en forme du texte, il n’existe pas de règles strictes imposant l’utilisation de certaines valeurs dans des situations spécifiques. Le choix des propriétés et des valeurs de formatage du texte dépend des exigences particulières de chaque projet et de la vision du design.

1. Quelle propriété CSS est utilisée pour créer un effet visuel qui ajoute une ombre au texte ?

2. Quelle propriété CSS permet d’ajuster la distance entre les mots dans un texte ?

question mark

Quelle propriété CSS est utilisée pour créer un effet visuel qui ajoute une ombre au texte ?

Select the correct answer

question mark

Quelle propriété CSS permet d’ajuster la distance entre les mots dans un texte ?

Select the correct answer

Tout était clair ?

Comment pouvons-nous l'améliorer ?

Merci pour vos commentaires !

Section 2. Chapitre 2
some-alt