Quels sont les attributs du texte CSS ?

Les attributs de texte CSS incluent : 1. Attribut de couleur ; 2. Direction du texte ; 3. Hauteur de la ligne ; 4. Espacement des lettres 5. Ombre du texte ;

attribut de texte CSS :

(Partage de vidéos d'apprentissage : tutoriel vidéo Java)

color    设置文本颜色    
direction    设置文本方向。    
line-height    设置行高。    
letter-spacing    设置字符间距。    
text-align    对齐元素中的文本。    
text-decoration    向文本添加修饰。    
text-indent    缩进元素中文本的首行。    
text-shadow    设置文本阴影。CSS2 包含该属性，但是 CSS2.1 没有保留该属性。    
text-transform    控制元素中的字母。    
unicode-bidi    设置文本方向。    
white-space    设置元素中空白的处理方式。    
word-spacing    设置字间距。

Les propriétés de texte CSS définissent l'apparence du texte.

Avec les propriétés du texte, vous pouvez modifier la couleur du texte, l'espacement des caractères, aligner le texte, décorer le texte, mettre le texte en retrait, etc.

1. Indenter le texte

CSS fournit l'attribut text-indent, qui peut facilement implémenter l'indentation de texte.

En utilisant l'attribut text-indent, la première ligne de tous les éléments peut être indentée d'une longueur donnée, même une valeur négative.

L'utilisation la plus courante de cet attribut est de mettre en retrait la première ligne d'un paragraphe. La règle suivante indentera la première ligne de tous les paragraphes de 5 em :

p {text-indent: 5em;}

Remarque : de manière générale, vous pouvez Text-indent est appliqué à tous les éléments de niveau bloc, mais l'attribut ne peut pas être appliqué aux éléments en ligne, ni aux éléments de remplacement tels que les images. Cependant, si un élément de niveau bloc (comme un paragraphe) a une image sur la première ligne, elle se déplacera avec le reste du texte de cette ligne.

Astuce : Si vous souhaitez « mettre en retrait » la première ligne d'un élément en ligne, vous pouvez utiliser un remplissage ou une marge gauche pour créer cet effet.

2. Alignement horizontal

text-align est un attribut de base qui affecte l'alignement des lignes de texte d'un élément les unes par rapport aux autres. Les 3 premières valeurs sont assez simples, mais les 4ème et 5ème sont un peu plus compliquées.

Les valeurs gauche, droite et centre entraînent que le texte de l'élément soit respectivement aligné à gauche, aligné à droite et centré.

Astuce : Centrez les éléments au niveau du bloc ou les éléments du tableau en définissant les marges gauche et droite de manière appropriée sur ces éléments.

3. Espacement des mots

L'attribut word-spacing peut modifier l'espacement standard entre les mots (mots). Sa valeur par défaut, normale, équivaut à la définir sur 0.

L'attribut word-spacing accepte une valeur de longueur positive ou négative. Si une valeur de longueur positive est fournie, l'espacement entre les mots augmente. Définir une valeur négative pour l'espacement des mots le rapprochera :

p.spread {word-spacing: 30px;}
p.tight {word-spacing: -0.5em;}

<p class="spread">
This is a paragraph. The spaces between words will be increased.
</p>

<p class="tight">
This is a paragraph. The spaces between words will be decreased.
</p>

4. Espacement des lettres

La différence entre l'attribut d'espacement des lettres et l'espacement des mots est que l'espacement des lettres modifie les caractères Ou l'espace entre les lettres.

Comme l'attribut word-spacing, les valeurs possibles pour l'attribut letter-spacing incluent toutes les longueurs. Le mot-clé par défaut est normal (qui est identique à letter-spacing:0). La valeur de longueur saisie augmentera ou diminuera l'espace entre les lettres du montant spécifié :

h1 {letter-spacing: -0.5em}
h4 {letter-spacing: 20px}

<h1>This is header 1</h1>
<h4>This is header 4</h4>

Recommandations associées : Tutoriel CSS

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!