CSS（5）文本
上一篇文章学习了CSS背景，本篇来学习CSS文本。背景（background）和文本（text）一后一前，相互渲染，从而呈现出页面内容。背景就像是画布，而文本就是我们在画布上绘制的文字线条。CSS 文本属性主要包括文本颜色（color）、字符间距（letter- spacing）、对齐文本（text-align）、装饰文本（text-decoration)和文本缩进（text-indent）等，下面分别学习。
一、文本颜色
CSS使用color 属性设置文本颜色（前景色）。color属性设置了一个元素的前景色（在 HTML 表现中，就是元素文本的颜色）；光栅图像不受 color 影响。color属性还会应用到元素的所有边框（border），除非被 border-color 或另外某个边框颜色属性覆盖。color属性的取值可以为颜色名、十六进制的颜色值或rgb值。 以下是一个color属性的示例：
/*设置整个body的文本颜色为红色（颜色名）*/ body { color:red; } /*一级标题为绿色（十六进制颜色值）*/ h1 { color:#00ff00; } /*段落为蓝色（rgb值）*/ p { color:rgb(0,0,255); }
二、文本缩进
像Word中的首行缩进效果一样，我们也可以使用CSS中的文本缩进（text-indent）属性，实现Web 页面上的段落等块级元素的首行缩进，这是一种最常用的文本格式化效果。 text-indent属性可以应用于所有块级元素，但无法应用于行内元素（提示：如果想把一个行内元素的第一行“缩进”，可以用左内边距或外边距创造这种效果）。text-indent 属性的取值可以是一个给定的长度值（length）、百分比（%），甚至该长度可以是负值，还可以从父元素继承。
1.使用固定值（length）
text-indent使用固定值的默认取值为0，可以使用px、em、cm和in等长度单位。text-indent属性最常见的用途是将段落的首行缩进，下面的规则会使所有段落的首行缩进 5 em：
p {text-indent: 5em;}
2.使用百分比（%）
text-indent使用百分比定义时，是定义基于父元素宽度（width）的百分比的缩进。比如将text-indent的值设置为 20%，所影响元素的第一行会缩进其父元素宽度的 20%。在下例中，元素，（<p></p>）的缩进值是父元素（<div></div>）的 20%，即 100 个像素：
div {width: 500px;} p {text-indent: 20%;}
<div> <p>this is a paragragh</p> </div>
3.使用负值
text-indent 还可以设置为负值。利用这种技术，可以实现很多有趣的效果，比如word中的“悬挂缩进”，即第一行悬挂在元素中余下部分的左边：
p {text-indent: -5em;}
在为 text-indent 设置负值时要当心，如果对一个段落设置了负值，那么首行的某些文本可能会超出浏览器窗口的左边界。为了避免出现这种显示问题，建议针对负缩进再设置一个外边距或一些内边距：
p {text-indent: -5em; padding-left: 5em;}
4. text-indent属性的继承
text-indent 属性可以继承，比如以下标记中的段落也会缩进 50 px，因为这个段落继承了 id 为 inner 的 div 元素的缩进值。
div#outer {width: 500px;} div#inner {text-indent: 10%;} p {width: 200px;}
<div id="outer"> <div id="inner">some text. some text. some text. <p>this is a paragragh.</p> </div> </div>
三、水平对齐
text-align 属性规定元素中的文本的水平对齐方式。该属性通过指定行框与哪个点对齐，从而设置块级元素内文本的水平对齐方式。text-indent属性的取值可以为左对齐（left）、右对齐（right）或居中对齐（center），还允许用户代理调整行内容中字母和字之间的间隔，从而支持值 justify（两端对齐）；不同用户代理可能会得到不同的结果。
text-align属性的默认值：如果 direction 属性是 ltr（left to right），则默认值是 left；如果 direction 是 rtl（right to left），则为 right。
h1 {text-align:center} h2 {text-align:left} h3 {text-align:right}
块级元素的居中：要将块级元素或表元素居中，可以通过在这些元素上适当地设置左、右外边距（margin）来实现。
text-align:center 与 <center></center>元素的区别：
有时我们可能会认为 text-align:center 与 <center></center> 元素的作用一样，但实际上二者大不相同。<center></center> 不仅影响元素中的文本，还会把整个元素居中。text-align 不会控制元素的对齐，而只影响内部内容。元素本身不会从一段移到另一端，只是其中的文本受影响。
四、字间距
word-spacing 属性增加或减少单词间的空白（即字间隔）。该属性定义元素中字之间插入多少空白符。 这个属性中的“字” 定义为由空白符包围的一个字符串。如果指定为长度值，会调整字之间的通常间隔；所以，normal 就等同于设置为 0。允许指定负长度值，这会让字之间挤得更紧。
<html> <head> <style type="text/css"> /*class为spread的段落的字间距为30像素*/ p.spread {word-spacing: 30px;} /*class为tight的段落的字间距为-0.5em*/ p.tight {word-spacing: -0.5em;} </style> </head> <body> <p class="spread">This is some text. This is some text.</p> <p class="tight">This is some text. This is some text.</p> </body> </html>
五、字符间距
letter-spacing 属性设置文本中字母之间的间距，与 word-spacing 的区别在于，字母间隔（letter-spacing）修改的是字符或字母之间的间隔；而字间距（word-spacing）修改的是字（单词）之间的间距。
与 word-spacing 属性一样，letter-spacing 属性的可取值包括所有长度。默认关键字是 normal（这与 letter-spacing:0 相同）。输入的长度值会使字母之间的间隔增加（正值）或减少（负值）指定的量：
h1 {letter-spacing: -0.5em} h4 {letter-spacing: 20px}
<h1>This is header 1</h1> <h4>This is header 4</h4>
六、字符大小写转换
text-transform 属性处理文本的大小写。text-transform属性有 4 个取值：none、uppercase、lowercase和capitalize。默认值为 none，表示 对文本不做任何改动，将使用源文档中的原有大小写。 uppercase 和 lowercase 将文本转换为全大写和全小写字符。最后，capitalize 只对每个单词的首字母大写。
作为一个属性，text-transform 可能无关紧要，不过如果您突然决定把所有 h1 元素变为大写，这个属性就很有用。不必单独地修改所有 h1 元素的内容，只需使用 text-transform 为你完成这个修改：
h1 {text-transform: uppercase}
七、文本装饰
text-decoration 属性设置添加到文本的修饰。 这个属性允许对文本设置某种效果，如加下划线。如果后代元素没有自己的装饰，祖先元素上设置的装饰会“延伸”到后代元素中。
text-decoration 的取值有五个：none（无装饰，并且会关闭掉原本应用到元素上的所有装饰），underline（为元素加下划线），overline（为元素加上划线），line-through（为元素加删除线），blink（让文本闪烁，类似于word中的发光字）。 例如，链接默认地会有下划线。如果您希望去掉超链接的下划线，可以使用以下 CSS 来做到这一点：
a {text-decoration: none;}
八、空白符的处理
white-space 属性设置如何处理元素内的空白。这个属性声明建立布局过程中如何处理元素中的空白符。值 pre-wrap 和 pre-line 是 CSS 2.1 中新增的。
white-space属性的取值：
1.normal：默认值，空白会被浏览器忽略。
2.pre：空白会被浏览器保留，其行为方式类似 HTML 中的 <pre> 标签。
3.nowrap：文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。
4.pre-wrap：保留空白符序列，但是正常地进行换行。
5.pre-line：合并空白符序列，但是保留换行符。
6.inherit：规定应该从父元素继承 white-space 属性的值。
示例：
/*规定段落中的文本不进行换行*/ p { white-space: nowrap }
九、文本方向
如果我们阅读的是英文书籍或现代汉语，就会从左到右（ltr）、从上到下地阅读，这就是英文和现代汉语的流方向。不过，并不是所有语言都如此。我们知道古汉语就是从右到左（rtl）来阅读的，当然还包括希伯来语和阿拉伯语等等。CSS2 引入了一个属性来描述其方向性。
direction 属性影响块级元素中文本的书写方向、表中列布局的方向、内容水平填充其元素框的方向、以及两端对齐元素中最后一行的为止。对于行内元素，只有当 unicode-bidi 属性设置为 embed 或 bidi-override 时才会应用 direction 属性。
direction 属性有两个值：ltr 和 rtl。大多数情况下，默认值是 ltr，显示从左到右的文本。如果显示从右到左的文本，应使用值 rtl。
1 <html> 2 <head> 3 <style type="text/css"> 4 /*设置class=one的div的文本显示放心为从右向左*/ 5 div.one 6 { 7 direction: rtl 8 } 9 /*设置class=two的div的文本显示放心为从左到右*/ 10 div.two 11 { 12 direction: ltr 13 } 14 </style> 15 </head> 16 <body> 17 <div class="one">Some text. Right-to-left direction.</div> 18 <div class="two">Some text. Left-to-right direction.</div> 19 </body> 20 </html>