Django - 3.4 Style du texte en CSS : police, taille et alignement

Les propriétés de texte en CSS se répartissent en deux familles. Le style de police agit sur l'apparence des lettres, et la mise en page agit sur l'espacement et l'alignement. Cette leçon présente les propriétés les plus courantes et montre comment les tester dans une page.

Le style de police

La propriété font-style accepte normal, italic ou oblique. La valeur oblique peut recevoir un second paramètre, l'inclinaison du texte en degrés.

Dans l'exemple, un texte est incliné de 30 degrés. La taille du texte se règle aussi avec une propriété dédiée, que la vidéo ajuste de quelques pixels.

Le style de police regroupe la famille de police, la taille, le poids, c'est-à-dire l'épaisseur du texte, et le style. Ces propriétés changent l'apparence des lettres sans modifier la structure de la page.

p {
  font-style: oblique 30deg;
}

L'alignement du texte

La propriété text-align permet d'aligner un texte. Elle accepte quatre valeurs : left pour la gauche, right pour la droite, center pour le centre et justify pour une justification.

Après chaque modification, il suffit d'enregistrer le fichier et d'actualiser la page. La vidéo montre ainsi le texte centré, puis justifié, puis décalé à droite.

L'alignement agit sur la position du texte dans la zone de contenu. Le texte peut se placer au centre, revenir à gauche ou se décaler vers la droite, selon la valeur choisie.

p {
  text-align: center;
}

Aller plus loin

Ces propriétés sont les plus utilisées, mais beaucoup d'autres existent. La documentation de CSS les présente en détail, avec des exemples pour chacune.

D'autres propriétés affectent l'espacement entre les lignes et entre les lettres. Elles font partie de la mise en page du texte, au même titre que l'alignement.

En résumé

La police se règle avec font-style, qui accepte une inclinaison pour oblique. L'alignement se règle avec text-align. Chaque modification se vérifie en actualisant la page dans le navigateur.

Points clés

  • Le style de police se règle avec font-style.
  • La valeur oblique peut recevoir une inclinaison en degrés.
  • La propriété text-align accepte left, right, center et justify.
  • Une modification se vérifie en actualisant la page.
  • La documentation de CSS liste d'autres propriétés de texte.

Questions fréquentes

Que signifie oblique ?

C'est un texte incliné. Une valeur d'inclinaison en degrés peut être ajoutée, comme 30deg.

Quelle valeur utiliser pour aligner un texte à droite ?

Utilisez right dans la propriété text-align.

Faut-il recharger la page pour voir les changements ?

Oui. Enregistrez le fichier, puis actualisez la page dans le navigateur pour voir le résultat.