CSS文本
CSS 本属性可定义文本的外观。通过文本属性，可以改变文本的颜色、字符间距，对齐文本，装饰文本，对文本进行缩进等等
CSS文本属性
| 属性 | 描述 |
| color | 设置文本颜色 |
| direction | 设置文本方向 |
| line-height | 设置行高 |
| letter-spacing | 设置字符间距 |
| text-align | 对齐元素中的文本 |
| text-decoration | 向文本添加修饰 |
| text-indent | 缩进元素中文本的首行 |
| text-shadow | 设置文本阴影。CSS2 包含该属性，但是 CSS2.1 没有保留该属性 |
| text-transform | 控制元素中的字母 |
| unicode-bidi | 设置文本方向 |
| white-space | 设置元素中空白的处理方式 |
| word-spacing | 设置字间距 |
缩进文本
1、把Web页面上的段落的第一行缩进，这是一种最常用的文本格式化效果。CSS提供了text-indent属性，该属性可以方便地实现文本缩进
2、通过使用text-indent属性，所有元素的第一行都可以缩进一个给定的长度，甚至该长度可以是负值(首行缩进：一个标签对中内容的第一行)
3、一般来说，可以为所有块级元素应用text-indent，但无法将该属性应用于行内元素，图像之类的替换元素上也无法应用text-indent 属性。不过，如果一个块级元素（比如段落）的首行中有一个图像，它会随该行的其余文本移动
注：如果想把一个行内元素的第一行“缩进”，可以用左内边距或外边距创造这种效果
例1：
<html> <head> <style type="text/css"> p {text-indent: 50px;} </style> </head> <body> <p> 这是段落中的一些文本。 这是段落中的一些文本。 这是段落中的一些文本。 这是段落中的一些文本。 这是段落中的一些文本。 这是段落中的一些文本。 这是段落中的一些文本。。 </p> <p>这是一个完整的段落</p> <p>这是一个完整的段落</p> </body> </html>
注：
1、从上面例子可以看出：text-indent属性是针对某一个标签对中文本内容的第一行(文本内容有多行时，第一行才会缩进)
2、上面例子中：样式为内部样式，因此作用于全部P标签，即所有p标签中文本内容的第一行会缩进
使用百分比值
1、text-indent可以使用所有长度单位，包括百分比值
2、值为百分数时表示：相对于元素父元素的宽度缩进百分数个单位。换句话说，如果将缩进值设置为20%，元素的第一行会缩进其父元素宽度的20%。
例2：缩进值是父元素的20%，即100个像素
<html> <head> <style type="text/css"> div {width: 500px;} p {text-indent:20%;} </style> </head> <body> <p>this is a paragragh</p><!--父元素无缩进--> <div> <p>this is a paragragh</p><!--缩进为父元素的20%，即100个像素--> </div> </body> </html>
继承
text-indent属性可以继承
例3：
<html> <head> <style type="text/css"> div#outer {width: 500px;} div#inner {text-indent: 10%;} p {width: 200px;} </style> </head> <body> <div id="outer"> <div id="inner">some text. some text. some text. <p>this is a paragragh.</p> </div> </div> </body> </html>
注：上面例子中段落也会缩进50像素，这是因为这个段落继承了id为inner的div元素的缩进值(继承的优先级高于自己的?)
水平对齐
1、text-align是一个基本的属性，它会影响一个元素中的文本行互相之间的对齐方式。它的前3个值相当直接，不过第4个和第5个则略有些复杂：值left、right和center会导致元素中的文本分别左对齐、右对齐和居中
2、将块级元素或表元素居中，要通过在这些元素上适当地设置左、右外边距来实现
| 值 | 描述 |
| left | 把文本排列到左边。默认值：由浏览器决定 |
| right | 把文本排列到右边 |
| center | 把文本排列到中间 |
| justify | 实现两端对齐文本效果 |
| inherit | 规定应该从父元素继承text-align属性的值 |
例4：
<html> <head > <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> h1 {text-align: center} h2 {text-align: left} h3 {text-align: right} </style> </head> <body> <h1>这是标题1</h1> <h2> <img src="image/eg_compman.gif" alt="动图">这是标题2 </h2> <h3>这是标题 3 <a href="//www.baidu.com">百度链接</a> </h3> </body> </html>
注：
1、text-align:center与<CENTER>：<CENTER>不仅影响文本，还会把整个元素居中。text-align不会控制元素的对齐，而只影响内部内容。元素本身不会从一段移到另一端，只是其中的文本受影响
2、在两端对齐文本中，文本行的左右两端都放在父元素的内边界上。然后，调整单词和字母间的间隔，使各行的长度恰好相等
字间隔
1、word-spacing属性可以改变字(单词)之间的标准间隔。其默认值normal与设置值为0是一样的
2、word-spacing属性接受一个正长度值或负长度值。如果提供一个正长度值，那么字之间的间隔就会增加;为word-spacing设置一个负值，会把它拉近
例5：
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> p.spread {word-spacing: 30px;} p#tight {word-spacing: -0.5em;} </style> </head> <body> <p class="spread"> This is a paragraph. The spaces between words will be increased. </p> <p id="tight"> This is a paragraph. The spaces between words will be decreased. </p> </body> </html>
注：
1、当值为负数时，会造成字与字重叠，所以最好不要用
2、对同一个标签设置不同样式时，可以使用id或class来标记(一一对应起来)：标签使用id属性时，使用标签名#标签id属性值；标签使用class属性时，使用标签名.标签class属性值
字母间隔
1、letter-spacing属性与word-spacing的区别在于，字母间隔修改的是字符或字母之间的间隔
2、与word-spacing属性一样，letter-spacing属性的可取值包括所有长度。默认关键字是normal（这与letter-spacing:0 相同）。输入的长度值会使字母之间的间隔增加或减少指定的量
例6：
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> h1 {letter-spacing: -0.5em} h4 {letter-spacing: 20px} </style> </head> <body> <h1>This is header 1</h1> <h4>This is header 4</h4> </body> </html>
字符转换
1、text-transform 属性处理文本的大小写。这个属性有4个值：none、uppercase、lowercase、capitalize
2、默认值none对文本不做任何改动，将使用源文档中的原有大小写。uppercase和lowercase将文本转换为全大写和全小写字符。capitalize只对每个单词的首字母大写。
例7：
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> h1 {text-transform: none} h2 {text-transform: uppercase} h3 {text-transform:lowercase} h4 {text-transform: capitalize} </style> </head> <body> <h1>This is header 1</h1> <h2>This is header 4</h2> <h3>This Is HeaDer 4</h3> <h4>this is HEader 4</h4> </body> </html>
文本装饰
| 值 | 描述 |
| none | 默认。定义标准的文本 |
| underline | 定义文本下的一条线 |
| overline | 定义文本上的一条线 |
| line-through | 定义穿过文本下的一条线 |
| blink | 定义闪烁的文本 |
| inherit | 规定应该从父元素继承text-decoration属性的值 |
例8：
<html> <head > <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> a#youdao {text-decoration: none;} </style> </head> <body> <a href="//www.baidu.com" id="baidu">百度链接</a><br><br> <a href="//www.youdao.com" id="youdao">有道链接</a><br><br> <a style="text-decoration: underline overline;" href="//www.goule.com" id="guge">谷歌链接</a><br> </body> </html>
注：
1、none值会关闭原本应用到一个元素上的所有装饰。通常，无装饰的文本是默认外观，但也不总是这样。例如，链接默认地会有下划线。如果希望去掉超链接的下划线，可以使用以下CSS来做到这一点
2、可以在一个规则中结合多种装饰。如果希望所有超链接既有下划线，又有上划线
3、需要注意下style中元素的缩进，缩进错误时，可能显示不出来
例8_1：text-decoration值会替换而不是累积起来
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> h2.stricken {text-decoration: line-through;} h2 {text-decoration: underline overline;} </style> </head> <body> <h2 class=stricken>这是一个标题</h2><br><br> <h2>这是一个标题</h2> </body> </html>
处理空白符
white-space属性会影响到用户代理对源文档中的空格、换行和tab字符的处理。通过使用该属性，可以影响浏览器处理字之间和文本行之间的空白符的方式
| 值 | 空白符 | 换行符 | 自动换行 |
| pre-line | 合并 | 保留 | 允许 |
| normal | 合并 | 忽略 | 允许 |
| nowrap | 合并 | 忽略 | 不允许 |
| pre | 保留 | 保留 | 不允许 |
| pre-wrap | 保留 | 保留 | 允许 |
例9：禁止文本折行
<html> <head> <style type="text/css"> p { white-space: nowrap } </style> </head> <body> <p> 这是一些文本。 这是一些文本。 这是一些文本。 这是一些文本。 这是一些文本。 这是一些文本。 这是一些文本。 这是一些文本。 这是一些文本。 这是一些文本。 这是一些文本。 这是一些文本。 </p> <p> 这是一些文本。 </p> <p> 这是一些文本。 </p> </body> </html>
文本方向
1、direction属性影响块级元素中文本的书写方向、表中列布局的方向、内容水平填充其元素框的方向、以及两端对齐元素中最后一行的位置。
2、对于行内元素，只有当unicode-bidi属性设置为embed或bidi-override时才会应用direction属性
3、direction属性有两个值：ltr和rtl。大多数情况下，默认值是ltr，显示从左到右的文本。如果显示从右到左的文本，应使用值rtl
例10：
<html> <head> <style type="text/css"> div.one { direction: rtl } div.two { direction: ltr } </style> </head> <body> <div class="one">Some text. Right-to-left direction.</div> <div class="two">Some text. Left-to-right direction.</div> </body> </html>