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>


Formation continue
||
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>CSS控制文本</title> </head> <style type="text/css"> #one{text-indent:2em;} #two{text-align:center; white-space:pre; text-transform:uppercase;} span{vertical-align:super;} #t2{width:100px; vertical-align:middle;} </style> <body> <p id="one">0.5秒三分绝杀!波特兰上演波什时刻 第N次拯救热火</p> <h1 id="two">玩命暴扣扳平+助攻绝杀三分 <span>热火</span>太幸运有这fkasfjklas fklasdj颗队魂</h1> <p>热火今夜还一功臣必须赞 11分不多但却分分是金!</p> <p>詹波为小弟恶犯叫屈 当事人他都起飞了!肯定假摔</p> <p>斯帅称客战开拓者奥登不打 波什:他很快就可复出</p> <p id="t2"> 斯帅称客战开拓者奥登不打 波什:他很快就可复出 </p> </body> </html>
soumettreRéinitialiser le code