Format de texte CSS
Couleur du texte
La propriété color est utilisée 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"
Instance
La couleur de fond d'une page Web fait référence à la sélection dans le corps :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
body {color:red;}
h1 {color:#00ff00;}
p.ex {color:rgb(0,0,255);}
</style>
</head>
<body>
<h1>这是标题</h1>
<p>这是一个普通的段落。请注意,本文是红色的。页面中定义的默认文本颜色选择器。</p>
<p class="ex">这是一段使用class选择器定义的p。这段文字是蓝色的。</p>
</body>
</html>Exécutez le programme pour l'essayer
Alignement du texte
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 les magazines et les 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">2015 年 3 月 14 号</p>
<p class="main">“当我年轻的时候，我梦想改变这个世界；当我成熟以后，我发现我不能够改变这个世界，我将目光缩短了些，决定只改变我的国家；当我进入暮年以后，我发现我不能够改变我们的国家，我的最后愿望仅仅是改变一下我的家庭，但是，这也不可能。当我现在躺在床上，行将就木时，我突然意识到：如果一开始我仅仅去改变我自己，然后，我可能改变我的家庭；在家人的帮助和鼓励下，我可能为国家做一些事情；然后，谁知道呢?我甚至可能改变这个世界。”</p>
<p><b>注意：</b> 重置浏览器窗口大小查看 "justify" 是如何工作的。</p>
</body>
</html>Exécutez le programme pour l'essayer
Texte-décoration
Les propriétés text-decoration sont utilisées pour définir ou supprimer la décoration du 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">
<title>php中文网(php.cn)</title>
<style>
a {text-decoration:none;}
</style>
</head>
<body>
<p>链接到: <a href="http://php.cn">链接到: php中文网</a></p>
</body>
</html>Exécutez le programme et essayez-le
Transformation de texte
La propriété de transformation 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>Exécutez le programme et essayez-le
Indentation du texte
L'attribut d'indentation du texte est utilisé pour spécifier le texte L'indentation de la première ligne.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
p {text-indent:50px;}
</style>
</head>
<body>
<p> php中文网(www.php.cn)提供了最全的编程技术基础教程, 介绍了HTML、CSS、Javascript、Python，Java，Ruby，C，PHP , MySQL等各种编程语言的基础知识。同时本站中
也提供了大量的在线实例，通过实例，您可以更好的学习编程。..</p>
</body>
</html>Exécutez le programme et essayez-le
Exemple
Augmentez l'espace blanc entre les mots
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style type="text/css">
p
{
word-spacing:30px;
}
</style>
</head>
<body>
<p>
This is some text. This is some text.
</p>
</body>
</html> Exécutez le programme et essayez-le
Propriétés du texte CSS
| 属性 | 描述 |
|---|
| color | 设置文本颜色 |
| direction | 设置文本方向。 |
| letter-spacing | 设置字符间距 |
| line-height | 设置行高 |
| text-align | 对齐元素中的文本 |
| text-decoration | 向文本添加修饰 |
| text-indent | 缩进元素中文本的首行 |
| text-shadow | 设置文本阴影 |
| text-transform | 控制元素中的字母 |
| unicode-bidi | 设置或返回文本是否被重写 |
| vertical-align | 设置元素的垂直对齐 |
| white-space | 设置元素中空白的处理方式 |
| word-spacing | 设置字间距 |
section suivante