Apprendre Techniques de mise en forme du texte pour la lisibilité

line-height

La propriété line-height définit la hauteur d'une ligne et est souvent utilisée pour ajuster l'espacement entre les lignes de texte. Par défaut, line-height dépend de la police du texte et est déterminée par le navigateur.

line-height: multiplier | value in px | value in em | percent

multiplier est une valeur sans unité (par exemple, 1.5). Dans ce cas, la hauteur de ligne sera la valeur qui est 1.5 fois supérieure à la valeur de font-size ;
value in px est une valeur spécifique (par exemple, 24px) à laquelle la hauteur de ligne sera égale ;
value in em est une valeur (par exemple, 1.4em) qui fonctionne de manière similaire au multiplier. Le navigateur vérifiera la valeur de font-size, multipliera cette valeur par 1.4, et ce résultat sera la hauteur de ligne ;
percent est une valeur (par exemple, 120%) qui fonctionne comme un multiplier. La valeur de font-size sera multipliée par 1.2, déterminant ainsi la hauteur de ligne.

index.html

styles.css

Résultat

letter-spacing

La propriété letter-spacing définit l'espacement horizontal entre les caractères du texte.

letter-spacing: normal | value in px | value in em

normal correspond à l'espacement par défaut entre les caractères ;
value in px est une valeur spécifique qui ajoute un espace supplémentaire entre les caractères ;
value in em fonctionne de manière similaire à px, mais l'espacement est relatif à la font-size.

index.html

styles.css

Résultat

word-spacing

La propriété word-spacing définit la distance entre les mots dans le texte. Elle augmente l'espace entre les mots. Si le texte contient des signes de ponctuation accolés aux mots, ils resteront attachés, car aucun espace n'est ajouté entre eux.

word-spacing: value | inherit | normal

value : valeur spécifique définissant l'espacement entre les mots ;
inherit : hérite l'espacement des mots de l’élément parent ;
normal : espacement par défaut entre les mots.

index.html

styles.css

Résultat

text-shadow

La propriété text-shadow ajoute une ombre au texte.

text-shadow: "X set" | "Y set" | "blur radius" | "color"

X set ajuste la position horizontale de l’ombre. Les valeurs positives déplacent l’ombre vers la droite, et les valeurs négatives vers la gauche ;
Y set ajuste la position verticale de l’ombre. Les valeurs positives déplacent l’ombre vers le bas, et les valeurs négatives vers le haut ;
blur radius définit le niveau de flou de l’ombre. Des valeurs plus élevées rendent l’ombre plus douce et diffuse. La valeur par défaut est 0 si elle n’est pas spécifiée ;
color spécifie la couleur de l’ombre dans n’importe quel format de couleur valide. Si elle n’est pas spécifiée, la couleur du texte est utilisée par défaut.

index.html

styles.css

Résultat

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 uniques 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 ajuste la distance entre les mots dans un texte ?

Tout était clair ?

Merci pour vos commentaires !

Section 2. Chapitre 2

Demandez à l'IA

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

Awesome!

Completion rate improved to 2.56

Glissez pour afficher le menu

line-height

line-height: multiplier | value in px | value in em | percent

multiplier est une valeur sans unité (par exemple, 1.5). Dans ce cas, la hauteur de ligne sera la valeur qui est 1.5 fois supérieure à la valeur de font-size ;
value in px est une valeur spécifique (par exemple, 24px) à laquelle la hauteur de ligne sera égale ;
value in em est une valeur (par exemple, 1.4em) qui fonctionne de manière similaire au multiplier. Le navigateur vérifiera la valeur de font-size, multipliera cette valeur par 1.4, et ce résultat sera la hauteur de ligne ;
percent est une valeur (par exemple, 120%) qui fonctionne comme un multiplier. La valeur de font-size sera multipliée par 1.2, déterminant ainsi la hauteur de ligne.

index.html

styles.css

Résultat

letter-spacing

La propriété letter-spacing définit l'espacement horizontal entre les caractères du texte.

letter-spacing: normal | value in px | value in em

normal correspond à l'espacement par défaut entre les caractères ;
value in px est une valeur spécifique qui ajoute un espace supplémentaire entre les caractères ;
value in em fonctionne de manière similaire à px, mais l'espacement est relatif à la font-size.

index.html

styles.css

Résultat

word-spacing

word-spacing: value | inherit | normal

value : valeur spécifique définissant l'espacement entre les mots ;
inherit : hérite l'espacement des mots de l’élément parent ;
normal : espacement par défaut entre les mots.

index.html

styles.css

Résultat

text-shadow

La propriété text-shadow ajoute une ombre au texte.

text-shadow: "X set" | "Y set" | "blur radius" | "color"

X set ajuste la position horizontale de l’ombre. Les valeurs positives déplacent l’ombre vers la droite, et les valeurs négatives vers la gauche ;
Y set ajuste la position verticale de l’ombre. Les valeurs positives déplacent l’ombre vers le bas, et les valeurs négatives vers le haut ;
blur radius définit le niveau de flou de l’ombre. Des valeurs plus élevées rendent l’ombre plus douce et diffuse. La valeur par défaut est 0 si elle n’est pas spécifiée ;
color spécifie la couleur de l’ombre dans n’importe quel format de couleur valide. Si elle n’est pas spécifiée, la couleur du texte est utilisée par défaut.

index.html

styles.css

Résultat

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 uniques 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 ajuste la distance entre les mots dans un texte ?

Tout était clair ?

Merci pour vos commentaires !

Section 2. Chapitre 2