Styles de texte CSS
Le style de texte CSS est une modification de style relative au contenu. Car dans la relation en cascade, le contenu est supérieur à l’arrière-plan. Le style du texte est donc relativement plus important.
Propriétés du texte de contrôle CSS :
1. Définir l'indentation du texte : text-indent:length (unité de longueur) peut être négatif
2. Alignement horizontal du texte : alignement du texte : gauche, centre, droite
3. Traitement des blancs : white-space:nowrap (nowrap est forcé d'être affiché sur une seule ligne, les pré-nouvelles lignes et les espaces sont conservés, la normale s'enroule automatiquement)
4 , Contrôle de la casse : transformation de texte : (mettre en majuscule la première lettre de chaque mot en majuscule, chaque lettre en majuscule en majuscule, chaque lettre en minuscule en minuscule, aucune taille normale)
5. Alignement vertical du texte : alignement vertical : (sub définit le texte en indice, super définit le texte en exposant, le haut est aligné avec le haut, le texte en bas est aligné avec le bas)
6, couleur du texte : la couleur définit la couleur du texte
Indentation de première ligne
Définition : L'indentation de première ligne consiste à mettre en retrait la première ligne d'un paragraphe, ce qui est un effet de formatage de texte courant. Généralement, lorsque l’on écrit en chinois, il y a deux espaces vides au début, semblables à celui-ci.
[Note] Cet attribut peut être négatif
text-indent
Valeur : <length> pourcentage> | hériter
Valeur initiale : 0
S'applique à : les éléments de niveau bloc (y compris le bloc et le bloc en ligne)
Héritage : Oui
Pourcentage : par rapport à la largeur du bloc contenant
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> <style> p {text-indent:50px;} </style> </head> <body> <p>亚冠联赛是亚洲最高等级的俱乐部赛事,相当于欧洲的欧洲冠军联赛及南美洲的南美解放者杯,高于亚足联杯和亚足联主席杯, 获得冠军的球队将代表亚洲参加当年12月举行的国际足联世界俱乐部杯。期待恒大在世俱杯中为中国足球争光添彩。</p> </body> </html>
Alignement horizontal
Définition : L'alignement horizontal est l'alignement horizontal qui affecte le texte dans un élément.
text-align
Valeurs : gauche | centre droite | justifier
Valeur initiale : gauche
S'applique aux : éléments de niveau bloc (y compris le bloc et le bloc en ligne)
Héritage : Oui
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>格式</title> <style> .center { margin:auto; width:70%; background-color:#b0e0e6; } </style> </head> <body> <div class="center"> <p>亚冠联赛是亚洲最高等级的俱乐部赛事,相当于欧洲的欧洲冠军联赛及南美洲的南美解放者杯,高于亚足联杯和亚足联主席杯,</p> <p>获得冠军的球队将代表亚洲参加当年12月举行的国际足联世界俱乐部杯。期待恒大在世俱杯中为中国足球争光添彩。</p> </div> </body> </html>
Conversion de texte
Text-transform est utilisé pour gérer la conversion de la casse en anglais
text-transform
Valeur : majuscules (toutes en majuscules) | majuscule) minuscule) | majuscule (mettre la première lettre en majuscule) | aucun | hériter
Valeur initiale : aucun
S'applique à : tous les éléments
Héritage : oui
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>转换</title> <style> p.uppercase {text-transform:uppercase;} p.lowercase {text-transform:lowercase;} p.capitalize {text-transform:capitalize;} </style> </head> <body> <p class="uppercase">hello css</p> <p class="lowercase">hello css</p> <p class="capitalize">hello css</p> </html>
Modification du texte
Définition : La modification du texte est utilisée pour fournir des lignes de modification pour le texte
[Remarque] La couleur de la modification du texte la ligne est la même que la couleur du texte
text-decoration
Valeur : none | centerline)] | hériter
Valeur initiale : aucune
S'applique à : tous les éléments
Héritage : aucun
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>文本修饰</title> <style> h1 {text-decoration:overline;} h2 {text-decoration:line-through;} h3 {text-decoration:underline;} </style> </head> <body> <h1>这是用来进行文本修饰的</h1> <h2>这是用来进行文本修饰的</h2> <h3>这是用来进行文本修饰的</h3> </body> </html>