Text Color

颜色属性被用来设置文字的颜色。

颜色是通过CSS最经常的指定：

十六进制值 - 如"＃FF0000"
一个RGB值 - "RGB（255,0,0）"
颜色的名称 - 如"红"

body {color:blue;} 
h1 {color:#00ff00;} 
h2 {color:rgb(255,0,0);}

文本的对齐方式

文本可居中或对齐到左或右,两端对齐.

当 text-align 设置为justify，每一行被展开为宽度相等，左，右外边距是对齐（如杂志和报纸）。

h1 {text-align:center;} 
p.date {text-align:right;} 
p.main {text-align:justify;}

提示：如果想把一个行内元素的第一行“缩进”，可以用左内边距或外边距创造这种效果。

文本修饰

text-decoration属性用来设置或删除文本的装饰。

从设计的角度看 text-decoration 属性主要是用来删除链接的下划线：

a {text-decoration:none;}  /*不要划线*/
h1 {text-decoration:overline;}  /*顶部划线*/
h2 {text-decoration:line-through;}  /*删除线*/
h3 {text-decoration:underline;} /*下划线*/

文本缩进

文本缩进属性是用来指定文本的第一行的缩进。

CSS 提供了 text-indent 属性，该属性可以方便地实现文本缩进。

通过使用 text-indent 属性，所有元素的第一行都可以缩进一个给定的长度。

p {text-indent:50px;}

文本间隔

word-spacing 属性可以改变字（单词）之间的标准间隔。其默认值 normal 与设置值为 0 是一样的。

p { word-spacing:30px;  }

注意：是单词之间的水平间隔。

文本间隔
指定字符之间的空间 
这个例子演示了如何增加或减少字符之间的空间。
h1 {letter-spacing:5px;}
h2 {letter-spacing:-3px;}
...
指定行与行之间的空间 
这个例子演示了如何指定在一个段落中行之间的空间
    p.small {line-height:70%;}
    p.big {line-height:200%;}
...
设置元素的文本方向 
这个例子演示了如何改变元素的文本方向。
<html>
<head>
<meta charset="utf-8"> 
<title>W3Cschool教程(w3cschool.cn)</title> 
<style type="text/css">
    div.ex1 {direction:rtl;}
</style>
</head>
<body>
    
    <div>一些文本。 默认书写方向</div>
    <div class="ex1">一些文本。从右到左的书写方向。</div>

</body>
</html>
...
增加单词之间的空白空间 
这个例子演示了如何增加一个段落中的单词之间的空白空间。
p{word-spacing:30px; }
h4{word-spacing: -0.5em;}
...
在元素内禁用文字环绕 
这个例子演示了如何禁用一个元素内的文字环绕。
p{white-space:nowrap;}
效果：一段文字时表现为不折行
...
垂直对齐图像 
这个例子演示了如何设置文本的垂直对齐图像。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>W3Cschool教程(w3cschool.cn)</title> 
<style>
    img.top {vertical-align:text-top;}
    img.bottom {vertical-align:text-bottom;}
</style>
</head>

<body>
    <p>一个 <img src="/statics/images/w3c/intro.png" alt="w3cschool" width="121" height="74" /> 具有默认对齐方式的图像.</p> 
    <p>一个 <img class="top" src="/statics/images/w3c/intro.png" alt="w3cschool" width="121" height="75" /> 文本顶部对齐的图像.</p> 
    <p>一个 <img class="bottom" src="/statics/images/w3c/intro.png" alt="w3cschool" width="121" height="75" /> 图像与文本底部对齐.</p>
</body>
</html>
...
添加文本阴影 
这个例子演示了如何设置文本阴影。
h1 {text-shadow:2px 2px #FF0000;}

所有CSS文本属性。

属性 | 描述

color | 设置文本颜色

direction | 设置文本方向。

letter-spacing | 设置字符间距

line-height | 设置行高

text-align | 对齐元素中的文本

text-decoration | 向文本添加修饰

text-indent | 缩进元素中文本的首行

text-shadow | 设置文本阴影

text-transform | 控制元素中的字母

unicode-bidi | 设置或返回文本是否被重写