Format de texte CSS

Couleur du texte

L'attribut color est utilisé pour définir la couleur du texte.

Les couleurs sont le plus souvent spécifiées via CSS :

Une valeur hexadécimale - telle que "#FF0000"

Une valeur RVB - "RGB (255,0,0)"

Le nom de la couleur - tel que "rouge"

La couleur d'arrière-plan d'une page Web fait référence à la sélection dans le corps :

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<style>
body {color:red;}
h1 {color:#00ff00;}
p.ex {color:rgb(0,0,255);}
</style>
</head>
<body>
<h1>多些书卷气 少些书生气</h1>
<p>人有书卷气,气质美如兰。有书卷气的人,身上有那么一股淡淡的书香,透着墨的芬芳,留着砚的韵味,带着纸的气息。
千百年来,那一缕缕飘逸的书香,把一批批文人志士熏陶和浸润得文雅儒雅、优雅高雅。</p>
<p class="ex">漫步历史长廊,洋溢书卷气的人不胜枚举</p>
</body>
</html>

du texte Alignement

La propriété d'alignement du texte est utilisée pour définir l'alignement horizontal du texte.

Le texte peut être centré ou aligné à gauche ou à droite, justifié aux deux extrémités

Lorsque text-align est défini sur "justifier", chaque ligne est étendue pour avoir une largeur égale et les marges gauche et droite sont alignées (comme celles des magazines et des journaux).

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style>
h1 {text-align:center;}
p.date {text-align:right;}
p.main {text-align:justify;}
</style>
</head>
<body>
<h1>CSS text-align 实例</h1>
<p class="date">xxxx 年 x 月 xx号</p>
<p class="main">有一个年轻人去买碗,来到店里他顺手拿起一只碗,然后依次与其它碗轻轻碰击,碗与碗之间相碰时立即发出沉闷、浑浊的声响,他失望地摇摇头。
然后去试下一只碗。。。他几乎挑遍了店里所有的碗,竟然没有一只满意的,就连老板捧出的自认为是店里碗中精品也被他摇着头失望地放回去了。</p>
<p><b>注意:</b> 重置浏览器窗口大小查看 &quot;justify&quot; 是如何工作的。</p>
</body>
</html>

Décoration de texte

L'attribut text-decoration est utilisé pour définir ou supprimer la décoration de texte.

D'un point de vue design, l'attribut text-decoration est principalement utilisé pour supprimer le soulignement des liens :

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<style>
a {text-decoration:none;}
</style>
</head>
<body>
<p>链接到: <a href="#">php.cn</a></p>
</body>
</html>

Vous pouvez également décorer du texte comme ceci :

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style>
h1 {text-decoration:overline;}
h2 {text-decoration:line-through;}
h3 {text-decoration:underline;}
</style>
</head>
<body>
<h1>好好学习</h1>
<h2>原价¥30</h2>
<h3>现价¥10</h3>

</body>
</html>

Conversion de texte

La propriété de conversion de texte est utilisée pour spécifier les lettres majuscules et minuscules dans un texte.

peut être utilisé pour mettre tous les mots en majuscules ou minuscules, ou pour mettre en majuscule la première lettre de chaque mot.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style>
p.uppercase {text-transform:uppercase;}
p.lowercase {text-transform:lowercase;}
p.capitalize {text-transform:capitalize;}
</style>
</head>
<body>
<p class="uppercase">This is some text.</p>
<p class="lowercase">This is some text.</p>
<p class="capitalize">This is some text.</p>
</body>
</html>

Text Indent

La propriété text indent est utilisée pour spécifier le retrait de la première ligne de texte.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<style>
p {text-indent:30px;}
</style>
</head>
<body>
<p>无疑的,这些人都在做着一个相同的动作:玩手机。
令人感到讽刺的是,尽管电视的广告里不断地重复着“不做低头族,出行更安全”的提醒,可这些聚精会神的“低头族们”压根就当没听见似的,
继续旁若无人地玩着手机不把自已的生命当回事儿。有些用微信在聊天,有些在玩手游,有些在看影视剧,有些打电话等等。</p>
</body>
</html>

Toutes les propriétés de texte CSS.


Propriétés                                                                                          Définir la couleur du texte                                                                                                Définir la couleur du texte

espacement des lettres                                                                                                                                                               Aligner le texte dans les éléments

text-decoration Ajouter au texte Modifier

text-indent Mettre en retrait la première ligne de texte de l'élément

text-shadow Définir l'ombre du texte

text-transform Contrôler les lettres dans l'élément

unicode-bidi Définir ou renvoyer si le texte est réécrit

vertical-align Définir le alignement vertical de l'élément

white-space Définir la méthode de traitement des espaces blancs dans l'élément

word-spacing Définir l'espacement des mots

Formation continue
||
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> <style> h1 {text-decoration:overline;} h2 {text-decoration:line-through;} h3 {text-decoration:underline;} </style> </head> <body> <h1>好好学习</h1> <h2>原价¥30</h2> <h3>现价¥10</h3> </body> </html>
soumettreRéinitialiser le code
  • Recommandations de cours
  • Téléchargement du didacticiel