CSS - Text

Bonjour là-bas, futurs développeurs web ! Aujourd'hui, nous plongeons dans le monde merveilleux des propriétés de texte CSS. En tant qu'enseignant informatique de votre quartier, je suis excité de vous guider dans ce voyage. Souvenez-vous, comme apprendre à faire du vélo, maîtriser le CSS nécessite de la pratique, mais je promets que ce sera amusant !

Propriétés de texte CSS - Couleur du texte

Commençons par quelque chose de coloré ! En CSS, nous pouvons facilement changer la couleur de notre texte en utilisant la propriété color. C'est comme avoir un pinceau magique pour vos mots !

p {
color: blue;
}

Cette ligne simple transforme tout votre texte de paragraphe en bleu. Mais attendez, il y a plus ! Vous pouvez utiliser des noms de couleurs, des codes HEX ou des valeurs RGB :

h1 {
color: #FF5733; /* Code HEX pour un orange vibrant */
}

span {
color: rgb(50, 205, 50); /* Valeur RGB pour le vert clair */
}

Propriétés de texte CSS - Alignement du texte

Passons à l'alignement du texte. C'est comme ranger des livres sur une étagère - vous pouvez les placer à gauche, à droite, ou les centrer joliment.

.left-align {
text-align: left;
}

.right-align {
text-align: right;
}

.center-align {
text-align: center;
}

.justify-align {
text-align: justify;
}

La valeur justify est particulièrement intéressante. Elle répartit le texte uniformément sur la ligne, comme les journaux arrange leurs colonnes.

Propriétés de texte CSS - Alignement vertical

L'alignement vertical est un peu plus complexe, mais ne vous inquiétez pas ! Il est le plus souvent utilisé avec des éléments en ligne ou en cellule de tableau.

img {
vertical-align: middle;
}

td {
vertical-align: top;
}

Cette propriété peut prendre des valeurs comme top, middle, bottom, sub, super, et même des valeurs de longueur spécifiques !

Propriétés de texte CSS - Direction

Dans notre village global, nous avons souvent besoin de travailler avec des langues qui lisent de droite à gauche. C'est là que la propriété direction devient pratique :

.arabic-text {
direction: rtl; /* Droite à gauche */
}

.english-text {
direction: ltr; /* Gauche à droite */
}

Propriétés de texte CSS - Décoration du texte

Vous voulez ajouter un peu de style à votre texte ? La décoration du texte est votre ami ! C'est comme ajouter des bijoux à vos mots.

.underline {
text-decoration: underline;
}

.overline {
text-decoration: overline;
}

.line-through {
text-decoration: line-through;
}

.no-decoration {
text-decoration: none;
}

Astuce pro : Utilisez text-decoration: none; pour supprimer le soulignement par défaut des liens !

Propriétés de texte CSS - Décoration du texte à sauter

Cette propriété détermine quelles parties du texte doivent être ignorées lors de l'application de la décoration du texte.

p {
text-decoration: underline;
text-decoration-skip: spaces;
}

Cela soulignera le texte mais ignorera les espaces, créant un aspect plus soigné.

Propriétés de texte CSS - Décoration du texte et l'encre

C'est fun ! Elle décide si la décoration du texte doit être dessinée par-dessus ou sous "l'encre" (c'est-à-dire le texte lui-même).

p {
text-decoration: underline;
text-decoration-skip-ink: auto;
}

Avec auto, le navigateur ignorera intelligemment les descendeurs de lettres comme 'g' ou 'y'.

Propriétés de texte CSS - Transformation du texte

Vous voulez crier en TOUTES CAPITALES ou chuchoter en minuscules ? La transformation du texte est votre propriété de choix !

.uppercase {
text-transform: uppercase;
}

.lowercase {
text-transform: lowercase;
}

.capitalize {
text-transform: capitalize;
}

La valeur capitalize est particulièrement sympa - elle transforme la première lettre de chaque mot en majuscule.

Propriétés de texte CSS - Emphase du texte

L'emphase du texte vous permet d'ajouter des marques d'emphase à votre texte. C'est comme ajouter de petits points ou des cercles au-dessus ou en dessous de votre texte.

.emphasis {
text-emphasis: filled;
text-emphasis-position: over right;
}

Cela ajoute des cercles pleins au-dessus et à droite de chaque caractère.

Propriétés de texte CSS - Indentation du texte

Souvenez-vous lorsque votre enseignant vous demandait de reculer la première ligne de chaque paragraphe ? CSS peut le faire automatiquement !

p {
text-indent: 50px;
}

Cela recule la première ligne de chaque paragraphe de 50 pixels.

Propriétés de texte CSS - Espacement entre les lettres

L'espacement entre les lettres vous permet d'ajuster l'espace entre les caractères. C'est comme donner à vos lettres un peu d'espace personnel !

h1 {
letter-spacing: 5px;
}

Cela ajoute 5 pixels d'espace entre chaque lettre dans votre titre.

Propriétés de texte CSS - Espacement entre les mots

Similaire à l'espacement entre les lettres, mais pour des mots entiers :

p {
word-spacing: 10px;
}

Cela ajoute 10 pixels d'espace supplémentaire entre chaque mot.

Propriétés de texte CSS - Espace blanc

La propriété white-space détermine comment l'espace blanc à l'intérieur d'un élément est géré.

.nowrap {
white-space: nowrap;
}

.pre {
white-space: pre;
}

.pre-wrap {
white-space: pre-wrap;
}

nowrap empêche le texte de passer à la ligne suivante, pre preserve l'espace comme écrit dans le HTML, et pre-wrap preserve l'espace mais permet le passage à la ligne.

Propriétés de texte CSS - Collapsage de l'espace blanc

Cette propriété fait partie de la propriété white-space que nous avons刚刚 discutée. Elle détermine comment l'espace blanc est réduit.

Propriétés de texte CSS - Ombre du texte

Vous voulez ajouter un peu de profondeur à votre texte ? L'ombre du texte est là pour vous aider !

h1 {
text-shadow: 2px 2px 5px red;
}

Cela ajoute une ombre rouge 2 pixels à droite, 2 pixels en bas, avec un flou de 5 pixels.

Propriétés de texte CSS - Cassure de ligne

La propriété line-break spécifie comment les lignes sont cassées à l'intérieur des mots.

p {
line-break: strict;
}

Cela impose des règles de cassure de ligne plus strictes.

Propriétés de texte CSS - Cassure de mot

Similaire à line-break, mais pour casser les mots à la fin des lignes :

p {
word-break: break-all;
}

Cela permet de casser les mots à n'importe quel caractère.

Propriétés de texte CSS - Propriétés apparentées

Voici un tableau de référence rapide de toutes les propriétés que nous avons discutées :

Propriété	Description
color	Définit la couleur du texte
text-align	Spécifie l'alignement horizontal du texte
vertical-align	Définit l'alignement vertical d'une boîte en ligne ou en cellule de tableau
direction	Spécifie la direction du texte/écriture
text-decoration	Spécifie la décoration ajoutée au texte
text-decoration-skip	Spécifie quelles parties du contenu de l'élément toute décoration de texte affectant l'élément doit ignorer
text-decoration-skip-ink	Spécifie comment les overlines et les sous-lignes sont dessinées lorsqu'elles passent sur les ascendeurs et les descendeurs de glyphes
text-transform	Contrôle la capitalisation du texte
text-emphasis	Applique des marques d'emphase au texte
text-indent	Spécifie l'indentation de la première ligne dans un bloc de texte
letter-spacing	Augmente ou diminue l'espace entre les caractères dans un texte
word-spacing	Augmente ou diminue l'espace blanc entre les mots
white-space	Spécifie comment l'espace blanc à l'intérieur d'un élément est géré
text-shadow	Ajoute une ombre au texte
line-break	Spécifie comment les lignes sont cassées à l'intérieur des mots
word-break	Spécifie les règles de cassure des mots à la fin des lignes

Et voilà ! Vous êtes maintenant armé des connaissances pour styliser votre texte de multiples manières. Souvenez-vous, la clé pour maîtriser le CSS est la pratique. Alors, allez-y, expérimentez, et créez de magnifiques pages web lisibles. Bon codage !

Credits: Image by storyset