Introduction à la mise en forme du texte CSS
Les jours précédents, vous étiez contraint de représenter le texte en utilisant l'ancienne version de CSS. Vous aviez une balise pour modifier l'ombrage et la police de caractères du contenu, mais la mesure a été entravée en utilisant les dimensions du texte précaractérisées. Les différents impacts comme l'intensité et la traversée étaient concevables dans des structures juste fondamentales à l'aide d'étiquettes HTML. Actuellement, l'utilisateur peut utiliser une variété de propriétés de formatage de texte CSS pour organiser le texte sur les pages Web à sa manière.
Dans ce chapitre, vous allez voir de nombreuses propriétés de formatage de texte CSS. Les propriétés de formatage de texte CSS sont utilisées pour concevoir le texte, styliser le texte, décrire quelques styles de formatage, etc. Les propriétés vous fournissent la représentation visuelle des caractères, des espaces, des mots, des paragraphes et bien d'autres.
Liste des propriétés de formatage de texte CSS:
Détails des moyens de formatage de texte en CSS: -
1) Couleur du texte
Cette propriété peut être utilisée pour changer la couleur du texte. Il peut être défini à l'aide de la propriété color.
Exemple : illustration de la couleur du texte
CSS Text Color Property
Bonjour le monde….
Bienvenue à EDUCBA…
Il affichera la sortie suivante:
2) Alignement du texte
Cette propriété peut être utilisée pour modifier l'horizontale du texte. Il peut être défini en utilisant les propriétés gauche, droite, centre, justifier.
Exemple : illustration de l'alignement du texte
Text Alignment Property
Bonjour le monde…
Bienvenue à EDUCBA …
Conseillère pédagogique…
Il affichera la sortie suivante:
3) Décoration de texte
Cette propriété peut être utilisée pour décorer le texte. Il peut être défini à l'aide des propriétés de soulignement, de surlignage et de ligne directe.
Exemple : Illustration de texte-décoration
Text DecorationProperty
Bonjour le monde…
Bienvenue à EDUCBA …
Conseillère pédagogique…
Il affichera la sortie suivante:
4) Transformation du texte
Cette propriété peut être utilisée pour modifier la casse du texte. Il peut être défini en utilisant des propriétés majuscules, majuscules et minuscules.
Exemple : Illustration de la transformation de texte
Text Transformation Property
Bonjour le monde…
Bienvenue chez educba …
Conseillère pédagogique…
Il affichera la sortie suivante:
5) Retrait du texte
Cette propriété peut être utilisée pour mettre en retrait la première ligne du texte. Il peut être défini en utilisant les propriétés px, cm, pt.
Exemple : illustration de l'indentation du texte
Text Indentation Property
Bonjour le monde…
Bienvenue chez Educba …
Conseillère pédagogique…
Il affichera la sortie suivante:
6) Espacement des mots
Cette propriété peut être utilisée pour donner de l'espace entre les mots. Il peut être défini à l'aide de la propriété d'espacement des mots.
Exemple : illustration de l'espacement des mots
Word Spacing Property
Bonjour le monde…
Bienvenue chez Educba …
Conseillère pédagogique…
Il affichera la sortie suivante:
7) Espacement des lettres
Cette propriété peut être utilisée pour donner de l'espace entre les caractères. Il peut être défini à l'aide de la propriété d'espacement des lettres.
Exemple : illustration de l'espacement des lettres
Letter Spacing Property
Bonjour le monde…
Bienvenue chez Educba …
Conseillère pédagogique…
Il affichera la sortie suivante:
8) Hauteur de ligne
Cette propriété peut être utilisée pour donner de l'espace entre les lignes. Il peut être défini à l'aide de la propriété line-height.
Exemple : Illustration de la hauteur de ligne
Line Height Property
h3
(
line-height:2.5;
)
h4
(
line-height:150%;
)
EDUCBA (Corporate Bridge Consultancy Pvt Ltd) est un
leader mondial de la formation basée sur les compétences
À eduCBA, c'est une fierté pour nous de faire de l'emploi
des cours pratiques accessibles à tous, à tout moment et en tout lieu.
Il affichera la sortie suivante:
9) Direction du texte
Cette propriété peut être utilisée pour changer la direction du texte. Il peut être défini à l'aide de la propriété rtl. Il définit la direction de droite à gauche.
Exemple : illustration de la direction du texte
Text Direction Property
Bonjour tout le monde … Bienvenue à Educba …
Il affichera la sortie suivante:
10) Ombre du texte
Cette propriété peut être utilisée pour donner une ombre au texte. Il peut être défini à l'aide de la propriété text-shadow. Il utilise des composants tels que la position gauche, la position supérieure, la taille du flou, le nom de la couleur.
Exemple : illustration de text-shadow
Text Shadow Property
h3
(
text-shadow:3px 3px 2px lightblue;
)
h4
(
text-shadow:3px 3px 2px plum;
)
Bonjour tout le monde … Bienvenue à EDUCBA …
EDUCBA (Corporate Bridge Consultancy Pvt Ltd) est une éducation basée sur les compétences
Il affichera la sortie suivante:
11) Ems
Il s'agit d'une unité évolutive pour le dimensionnement. Cette propriété em peut être utilisée pour définir la taille du texte en fonction du texte environnant. La taille par défaut du texte est 1em, ce qui est égal à 12 pt. 2em est égal à 24 pt et ainsi de suite.
Exemple : illustration de la propriété ems
Ems Property
h3
(
font-size: 0.8em;
)
h4
(
font-size: 1.2em;
)
Bonjour tout le monde … Bienvenue à EDUCBA …
EDUCBA (Corporate Bridge Consultancy Pvt Ltd) est une éducation basée sur les compétences
Il affichera la sortie suivante:
12) famille de polices
Cette propriété est utilisée pour fournir différents types de noms de famille de polices pour le texte sélectionné. Par exemple, Helvetica, Calibri, Arial, Sans-serif, Times, Courier New, etc.
Exemple : illustration de la propriété font-family
Font Family Property
Bonjour le monde…
Bienvenue chez Educba …
Conseillère pédagogique…
Il affichera la sortie suivante:
Conclusion
Jusqu'à présent, nous avons étudié les méthodes de formatage de texte en CSS. Vous pouvez voir que le texte est présenté avec différents types de propriétés de mise en forme du texte. Ces propriétés sont des aspects très importants du CSS pour afficher le texte sur la page Web afin que les utilisateurs ou les lecteurs puissent être attirés en voyant votre texte sur le site Web. Utilisez ces propriétés de texte très facilement et efficacement sur les pages Web.
Articles recommandés
Cela a été un guide pour la mise en forme du texte CSS. Ici, nous avons discuté d'une introduction et d'une liste de propriétés de formatage de texte CSS en détail avec des exemples d'exemples de code et une sortie appropriée. Vous pouvez également consulter nos autres articles suggérés pour en savoir plus -
- Qu'est-ce que CSS?
- SASS vs CSS
- Commandes CSS
- Questions d'entretiens chez CSS3