Le formatage du texte dans CSS expliqué
Le formatage du texte comprend des propriétés telles que la couleur, l'alignement, la décoration, l'indentation, l'espacement et bien d'autres. Le but de ce guide est d'éclairer l'importance de la mise en forme du texte dans CSS et d'explorer les propriétés qui peuvent être utilisées pour la mise en forme du texte.
Quel type de formatage de texte dans CSS est pris en charge?
Le formatage du texte est assisté par plusieurs propriétés décrites ici et la syntaxe de ces propriétés est également définie.
Alignement: Il aligne le texte en utilisant la syntaxe écrite ci-dessous.
sélecteur text-align: valeur;La valeur du texte-aligne peut être:
- À droite: le texte serait sur le côté droit de l'élément
- Gauche: la marge gauche des lignes est droite
- Centre: Le texte serait en centre et des marges gauche / droite
- Justifier: le texte est organisé de manière à ce que les marges gauche et droite soient maintenues droites et égales
Exemple:
Le texte est aligné à gauche
Le texte est centré sur
Le texte est aligné droit
Le texte est justifié
Quatre classes CSS sont créées, la classe «gauche» représente l'alignement gauche du texte. De même, le «droit», le «cent» et le «juste» sont utilisés pour aligner le texte à droite, centrée et justifiée.
Sortir
L'espacement des lettres: Il est utilisé pour définir l'espace entre les lettres d'un mot en PX, EM, MM ou CM.
sélecteur Espacement des lettres: valeur;Exemple: Pour vérifier la fonctionnalité de la propriété d'espacement des lettres, nous avons utilisé le code suivant.
L'espacement des lettres est de 5px
L'espacement des lettres est 0.5EM
L'espacement des lettres est de 1 mm
Dans le code ci-dessus, les classes CSS sont créées pour définir l'espacement des lettres en PX, EM et MM.
Sortir
Espacement des mots: Cette propriété est utilisée pour ajouter de l'espace entre les mots d'une ligne.
Sélecteur Word-Espacement: valeur;Exemple: La propriété d'espacement des mots est fournie en utilisant les lignes de code suivantes.
Chaque mot sera séparé par 10px
Une classe CSS est créée pour créer un espace 10px entre les mots.
Sortir
Couleur: Cela définit la couleur du texte utilisé à l'aide de la syntaxe suivante.
sélecteur couleur: valeur;La valeur de la propriété couleur peut être,
- Nom de la couleur I.e., rouge orange
- Valeur hexadécimale de la couleur (# 00000)
Exemple: Le fourni ci-dessous est exercé pour définir la couleur du
texte à rouge.
Bienvenue à Linuxhint
Sortir
Décoration: La décoration est effectuée pour effectuer des actions sur un texte comme un souligne.
sélecteur text-décoration: valeur;La valeur peut être l'une des éléments suivants
- ligne à throuple: une ligne horizontale est placée sur le texte
- TRIDLINE: Une ligne est tirée au-dessus du texte
- souligne: la ligne horizontale est placée sous la ligne
- Aucun: aucune ligne ne serait placée
Exemple:
texte souligné
se glisser dans le texte
text
Le code ci-dessus comprend trois classes CSS et trois paragraphes. Les classes CSS «Un», «LT» et «OV» représentent le style de décoration et sont utilisés dans trois paragraphes différents.
Sortir
Échancrure: L'indentation CSS est effectuée à un retrait (en gardant le texte à un espace spécifique de la marge) la première ligne de paragraphe.
sélecteur text-indent: valeur;La valeur peut être dans MM, CM, EM, PX.
Exemple: Ici, nous avons appliqué la propriété d'indentation (en PX, EM et CM) sur divers paragraphes du code.
L'indentation est définie sur 25px
L'indentation est définie sur 1EM
L'indentation est définie sur 1 cm
Le code ci-dessus contient trois classes CSS, et chaque classe invente le texte dans une unité de mesure différente.
Sortir
Transformation: Le cas du texte est géré à l'aide d'une propriété de transformation suivie de la syntaxe donnée ici.
sélecteur Text-transform: valeur;La valeur peut être l'une des éléments suivants
- majuscule: pour changer les lettres en majuscules
- minuscules: change les lettres en minuscules
- capitaliser: il est utilisé pour capitaliser la première lettre de chaque mot
Exemple: Vous pouvez vérifier la fonctionnalité de la transformation de texte à partir du code indiqué ci-dessous.
Conversion en cas inférieur
Conversion en majuscules
Le premier mot sera captiel
Le code indiqué ci-dessus contient trois classes CSS qui sont censées transformer le texte du paragraphe en cas inférieur, au niveau supérieur et capitaliser.
Sortir
Hauteur de la ligne: La hauteur des lignes de texte peut être définie à l'aide de la propriété de hauteur de ligne dans PX, CM, EM et MM.
sélecteur line-height: valeur;Exemple: Les lignes de code suivantes montrent l'utilisation de la propriété de hauteur de ligne pour ajuster la hauteur des lignes de texte.
La hauteur de la ligne est de 25px
La hauteur de la ligne est 2EM
La hauteur de la ligne est de 1 cm
Le code ci-dessus utilise la hauteur de ligne en PX, EM et CM. De plus, le style frontalier des paragraphes est solide (pour mieux comprendre le concept de hauteur de ligne).
Sortir
Direction du texte: La direction d'écriture du texte dans CSS peut être gérée en utilisant la propriété de direction.
sélecteur direction: valeur;La valeur peut être RTL (de droite à gauche), LTR (de gauche à droite), initiale () et hériter (récupéré à partir de l'élément parent).
Exemple:
La direction du texte est droite à gauche
Une classe CSS est créée qui vous permet de définir la direction de droite à gauche.
Sortir
Ombre de texte: L'ombre du texte est pratiquée en ajoutant de l'ombre avec diverses propriétés.
Sélecteur Text-Shadow: Value1 Value2 Value3;Les valeurs sont décrites comme suit
- Value1 représente la taille horizontale de l'ombre
- Value2 définit la taille verticale de l'ombre
- Value3 est utilisé pour les couleurs de l'ombre et il peut être le nom exact de la couleur, la combinaison RGB / RGBA d'une couleur, la valeur hexagonale d'une couleur.
Exemple: Le code suivant définit une ombre verticale et horizontale colorée.
Une ombre rouge de 1px est donnée
Une classe CSS nommée «Sh» est créée qui crée une ombre rouge d'épaisseur de 1px sur le texte fourni.
Sortir
Après avoir parcouru cette section, vous auriez obtenu la compréhension de diverses propriétés de format de texte fournies par CSS.
Conclusion
Le formatage du texte dans CSS vous permet d'embellir le texte en utilisant les propriétés. Cet article fournit le fonctionnement et l'utilisation de toutes les propriétés de formatage du texte soutenues par CSS. Chaque propriété est guidée par la syntaxe qu'il suit et un exemple est également fourni pour comprendre son utilisation. Ce guide complet vous permettrait d'appliquer toutes sortes de formats de texte possibles dans CSS.
Restez connecté avec Linuxhint pour des guides plus informatifs sur CSS et HTML.