Grâce à plusieurs propriétés fournies par CSS, différents styles de texte peuvent être définis très facilement et efficacement, comme la couleur, l'alignement, l'espacement, la décoration, la transformation, etc.
Les attributs de texte couramment utilisés incluent : l'alignement du texte, la décoration du texte, la transformation du texte, l'indentation du texte, la hauteur de la ligne, l'espacement des lettres, l'espacement des mots, etc. Ces propriétés vous donnent un contrôle précis sur l’apparence visuelle des caractères, des mots, des espaces, etc.
Examinons de plus près comment définir ces propriétés de texte pour les éléments.
1.alignement du texte par alignement du texte
L'attribut text-align est utilisé pour définir l'alignement horizontal du texte dans un élément. Les valeurs facultatives de l'attribut sont les suivantes :
Exemple:
<!DOCTYPEhtml><html><head><style>p{border:1pxsolidblack;/*Afin de refléter plus intuitivement l'alignement du texte, voici un ensemble de bordures pour la balise p*/}.text1{text- aligner : gauche ;}.text2{text-align :right;}.text3{text-align:center;}</style></head><body><pclass=text1>Aligner à gauche</p><pclass=text2>Aligner à droite</p><pclass= text3>Alignement centré</p></body></html>Les résultats affichés sont les suivants :
2. décoration de texte
L'attribut text-decoration est utilisé pour définir ou supprimer la décoration du texte. La méthode la plus courante consiste à utiliser l'attribut text-decoration pour supprimer le soulignement par défaut de la balise <a>. Bien entendu, vous pouvez également utiliser l'attribut text-decoration pour ajouter une décoration au texte de l'élément si nécessaire afin d'obtenir un effet de surbrillance.
Les valeurs facultatives pour l'attribut text-decoration sont les suivantes :
Exemple:
<!DOCTYPEhtml><html><head><metacharset=utf-8><title>text-decoration</title><style>h1.under{text-decoration:underline;}h1.over{text-decoration:overline ;}p.line{text-decoration:line-through;}p.blink{text-decoration:blink;}a.none{text-de coration:none;}p.underover{text-decoration:underlineoverline;}</style></head><body><h1class=under>underline</h1><pclass=lin e>Barré</p><pclass=blink>Effet Flash, mais le navigateur ne l'affichera pas</p><h1class=over>Souligné</h1><p>Ceci est un lien <aclass=nonehref=#> </a>, par défaut le lien est souligné, ici on le supprime. </p><pclass=underover>Surligner et souligner</p></body></html>Les résultats affichés sont les suivants :
3.text-transformation
L'attribut text-transform est utilisé pour contrôler la casse des lettres anglaises dans le texte. Grâce à cet attribut, vous pouvez changer uniformément les lettres anglaises du texte en lettres minuscules, majuscules ou premières lettres majuscules sans modifier le texte original.
4.text-indent
L'attribut text-indent est utilisé pour ajouter l'effet d'indentation de première ligne au texte de l'élément. Les valeurs facultatives de l'attribut sont les suivantes :
5. hauteur de ligne
Cette propriété affecte la disposition de la zone de ligne. Lorsqu'il est appliqué à un élément de niveau bloc, il définit la distance minimale entre les lignes de base dans cet élément plutôt que la distance maximale.
La différence calculée entre la hauteur de ligne et la taille de police (espacement des lignes) est divisée en deux moitiés et ajoutée en haut et en bas d'une ligne de contenu textuel. La plus petite boîte pouvant contenir ce contenu est une boîte de ligne.
Exemple:
<!DOCTYPEhtml><html><head><style>p.small{line-height:0.8;}p.big{line-height:200%;}</style></head><body><p> Il s'agit de la hauteur de ligne standard par défaut<br>Il s'agit de la hauteur de ligne standard par défaut<br>Il s'agit de la hauteur de ligne standard par défaut<br></p><pclas s=small>Utilisez des nombres pour définir une hauteur de ligne plus petite<br>Utilisez des nombres pour définir une hauteur de ligne plus petite<br>Utilisez des nombres pour définir une hauteur de ligne plus petite<br></p><pclass=big>Utiliser Utiliser le formulaire de pourcentage pour définir une hauteur de ligne plus grande<br>Utilisez la forme de pourcentage pour définir une hauteur de ligne plus grande<br>Utilisez la forme de pourcentage pour définir une hauteur de ligne plus grande<br></p></body>< /html >Les résultats affichés sont les suivants :
6.espacement des lettres
L'espacement entre le texte. La valeur peut être négative. La valeur par défaut est normale. Tous les navigateurs prennent en charge l'attribut d'espacement des lettres.
Exemple:
<!DOCTYPEhtml><html><head><metahttp-equiv=Content-Typecontent=text/html;charset=gbk2312/><title>attribut d'espacement des lettres de CSS</title><style>*{margin:0; rembourrage : 0 ;}body{width:1000px;margin:200pxauto;}p{font-size:18px;}.p01{letter-spacing:2px;}.p02{letter-spacing:10px}</style></head>< body><pclass=p01>texte de test d'espacement de texte CSS ! </p><pclass=p02>Texte de test d'espacement du texte CSS ! </p></body></html>Les résultats affichés sont les suivants :
7.espacement des mots
L'attribut word-spacing est utilisé pour définir l'espacement entre les mots, mais il n'est pas valide pour le chinois. Les valeurs facultatives de l'attribut sont les suivantes :
8.text-shadow ombre du texte
text-shadow ajoute une ombre au texte. Vous pouvez ajouter plusieurs ombres au texte et à la décoration. Les valeurs des ombres sont séparées par des virgules. Chaque valeur d'ombre comprend le décalage de l'élément dans les directions X et Y, le rayon de flou et la valeur de couleur.
9.alignement vertical
L'attribut vertical-align définit l'alignement vertical d'un élément.
L'attribut vertical-align en CSS ne peut être utilisé que pour les éléments en ligne et les éléments déplacés (tels que les images et les zones de saisie de formulaire). Cet attribut n'est pas hérité.
Tout d’abord, regardons une image. La ligne supérieure, la ligne médiane et la ligne de base du texte. La ligne de base est le bord inférieur de la lettre x.
Des concepts tels que la ligne de base, la ligne du bas, la ligne du haut et la ligne médiane sont mentionnés. Que signifient-ils ?
(1) Ligne supérieure : le bord supérieur des caractères chinois ;
(2) Ligne centrale : la ligne passant par le milieu de la lettre anglaise minuscule x ;
(3) Ligne de base : le bord inférieur de la lettre minuscule x ;
(4) Conclusion : le bord inférieur des caractères chinois ;
(5) Zone de contenu : fait référence à la zone entourée par la ligne du bas et la ligne du haut ;
(6) Hauteur de ligne : elle comprend la zone de contenu et la zone vide qui est développée symétriquement en fonction de la zone de contenu. Nous l'appelons la hauteur de ligne, qui peut également être considérée comme la distance entre les lignes de base des lignes de texte adjacentes ;
(7) Espacement des lignes : désigne la distance entre les lignes de texte adjacentes entre la ligne inférieure de la ligne de texte précédente et la ligne supérieure de la ligne de texte suivante ;
(8) Boîte en ligne : il s'agit d'un concept dans le modèle de rendu du navigateur et ne peut pas être affiché, mais elle existe et sa hauteur est la même que la hauteur de la ligne ;
(9) Boîte de ligne : Un concept similaire à la boîte intérieure de la même ligne. La boîte de ligne fait référence à une boîte rectangulaire virtuelle de cette ligne et est également un concept dans le mode de rendu du navigateur. La hauteur de la zone de ligne est égale à la plus grande valeur de la zone en ligne parmi tous les éléments de cette ligne (la zone en ligne avec la plus grande valeur de hauteur de ligne est utilisée comme référence, et les autres zones en ligne sont alignées sur la référence en utilisant leur propre méthodes d'alignement et la hauteur de la boîte de ligne est finalement calculée).
10.white-space gère les caractères d'espacement
Le tableau suivant résume le comportement de l'attribut white-space :
11.direction direction du texte