CSS文本属性可以定义文本的外观
通过文本属性 您可以改变文本的颜色 字符间距 文本对齐装饰文本 对文本进行缩进等等。
缩进文本
把web页面上的段落的第一行缩进，这是最常用的文本格式化效果。
css 提供了text-indent属性 该属性可以方便的实现文本缩进。
通过 text-indent属性 所有元素的第一行都可以缩进一个给定的长度，甚至该长度可以为负值。
这个属性最常见的用途是将段落的首行缩进，下面的规则会是所有短路的首行缩进5em
p {text-indent: 5em;}
注意:一般来说可以为所有的块级元素添加text-indent 但无法将此属性应用于行内元素 图像之类的替换元素也无法应用text-indent属性。不过，如果一个块级元素(比如段落),在首行终有一个图像。他会随着该行的其余文本移动。
提示:如果想把一个行内元素的第一行缩进，可以用做那边句或外边距创造出这种效果。
使用负值
text-indent可以使用负值，利用这种技术 可以实现很多有趣的效果 比如 悬挂缩进 即第一行悬挂在元素中余下部分的左边：
p {text-indent: -5em;}
不过在为 text-indent 设置负值时要当心，如果对一个段落设置了负值，那么首行的某些文本可能会超出浏览器窗口的左边界。为了避免出现这种显示问题，建议针对负缩进再设置一个外边距或一些内边距：
p {text-indent: -5em; padding-left: 5em;}
使用百分比值
text-indent 可以使用所有长度单位，包括百分比值。
百分数要相对于缩进元素父元素的宽度。换句话说，如果将缩进值设置为 20%，所影响元素的第一行会缩进其父元素宽度的 20%。
在下例中，缩进值是父元素的 20%，即 100 个像素：
div { 500px;} p {text-indent: 20%;} <div> <p>this is a paragragh</p> </div>
继承
text-indent 属性可以继承，请考虑如下标记：
div#outer { 500px;} div#inner {text-indent: 10%;} p { 200px;} <div id="outer"> <div id="inner">some text. some text. some text. <p>this is a paragragh.</p> </div> </div>
以上标记中的段落也会缩进 50 像素，这是因为这个段落继承了 id 为 inner 的 div 元素的缩进值。
水平对齐
text-align是一个基本的属性，他会影响一个元素中的文本行互相之间的对齐方式 他的三个值相当直接 不过第四个 第五个则略有复杂。
值 left、right 和 center 会导致元素中的文本分别左对齐、右对齐和居中。
西方语言都是从左向右读，所有 text-align 的默认值是 left。文本在左边界对齐，右边界呈锯齿状（称为“从左到右”文本）。对于希伯来语和阿拉伯语之类的的语言，text-align 则默认为 right，因为这些语言从右向左读。不出所料，center 会使每个文本行在元素中居中。
text-align:center 与 <CENTER>
您可能会认为 text-align:center 与 <CENTER> 元素的作用一样，但实际上二者大不相同。
<CENTER> 不仅影响文本，还会把整个元素居中。text-align 不会控制元素的对齐，而只影响内部内容。元素本身不会从一段移到另一端，只是其中的文本受影响。
justify
在两端对齐文本中，文本行的左右两端都放在父元素的内边界上。然后，调整单词和字母间的间隔，使各行的长度恰好相等。您也许已经注意到了，两端对齐文本在打印领域很常见。
字间隔
word-spacing 属性 可以改变单词之间的标准间隔 其默认值normal与设置值为0 是一样的。
word-sapcing属性接受一个正长度值或者负长度值。如果提供一个正长度值 那么字之间的间隔就会增加 为 word-spacing设置一个负值 会把它拉近
p.spread {word-spacing: 30px;}
p.tight {word-spacing: -0.5em;}
<p class="spread">
This is a paragraph. The spaces between words will be increased.
</p>
<p class="tight">
This is a paragraph. The spaces between words will be decreased.
</p>
字母间隔
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属性处理文本的大小写 这个属性有四个值：
none
uppercase
lowercase
capitalize
默认值none对文本不做任何改动 将使用源文本中的源有大小写。uppercase和lowercase分别是大写和小写 capitalize只对每个单词的首字母大写。
文本装饰
文本装饰属性就是text-decoration。它又下面几个值
none
underline
overline
line-through
blink
不出所料，underline 会对元素加下划线，就像 HTML 中的 U 元素一样。overline 的作用恰好相反，会在文本的顶端画一个上划线。值 line-through 则在文本中间画一个贯穿线，等价于 HTML 中的 S 和 strike 元素。blink 会让文本闪烁，类似于 Netscape 支持的颇招非议的 blink 标记。
处理空白符
white-space属性会影响用户代理对源文本中的空格 华航 和 tab字符的处理
通过使用该属性，可以影响浏览器处理字之间和文本行之间的空白符的方式。从某种程度上讲，默认的 XHTML 处理已经完成了空白符处理：它会把所有空白符合并为一个空格。所以给定以下标记，它在 Web 浏览器中显示时，各个字之间只会显示一个空格，同时忽略元素中的换行：
<p>This paragraph has many spaces in it.</p> p {white-space: normal;}
例子:
1.设置文本颜色
demo.css body { color: red; } h1 { color: green; } p.ex { color: blue; } demo.html <head> <meta charset="UTF-8"> <title>颜色</title> <link rel="stylesheet" type="text/css" href="CSS/demo.css" /> </head> <body> <h1>这是 heading 1</h1> <p>这是一段普通的段落。请注意，该段落的文本是红色的。在 body 选择器中定义了本页面中的默认文本颜色。</p> <p class="ex">这是另一段文本 通过class索引设置样式</p> </body>
2:设置文本的背景颜色
demo.css p span { background-color: yellow; } demo.html <head> <meta charset="UTF-8"> <title>背景颜色</title> <link rel="stylesheet" type="text/css" href="CSS/demo.css" /> </head> <body> <h1>设置文本的背景颜色</h1> <p>这是一段我精心准备的文本 <span>这些会包含在内敛元素span内 会有背景颜色</span>之外的这些没有颜色</p> <div> 这是一个块元素 也被<span>span包含 但是不会有背景色</span> </div> </body>
3:规定字符间距
demo.css p.big { letter-spacing: 2em; } p.small { letter-spacing: -0.5em; } demo.html <head> <meta charset="UTF-8"> <title>规定字符间距</title> <link rel="stylesheet" type="text/css" href="CSS/demo.css" /> </head> <body> <p class="big">tianlianfeng</p> <p class="small">tianlianfeng</p> </body>
4.对齐文本
<style type="text/css"> h1 {text-align: center} h2 {text-align: left} h3 {text-align: right} </style> </head> <body> <h1>这是标题 1</h1> <h2>这是标题 2</h2> <h3>这是标题 3</h3> </body>
5:修饰文本
<head> <meta charset="UTF-8"> <title>规定字符间距</title> <style type="text/css"> p.underline { text-decoration: underline; } p.overline { text-decoration: overline; } p.linethrough { text-decoration: line-through; } p.none { text-decoration: none; } /*事实证明对p是没效果的*/ p.blink { text-decoration: blink; } </style> </head> <body> <p class="underline">这段标题下面有下划线</p> <p class="overline">这段话上面又一个线</p> <p class="linethrough">中间穿过一条线</p> <p class="none">没有任何效果</p> <p class="blink">会闪烁据说</p> </body>
6:缩进文本
<style type="text/css"> p {text-indent: 1cm} </style> </head> <body> <p> 这是段落中的一些文本。 这是段落中的一些文本。 这是段落中的一些文本。 这是段落中的一些文本。 这是段落中的一些文本。 这是段落中的一些文本。 这是段落中的一些文本。 这是段落中的一些文本。 这是段落中的一些文本。 这是段落中的一些文本。 这是段落中的一些文本。 这是段落中的一些文本。 </p> </body>
7:控制字符大小写
<head> <meta charset="UTF-8"> <title>控制大小写</title> <style type="text/css"> p.uppercase { text-transform: uppercase; } p.lowercase { text-transform: lowercase; } p.capitalize { text-transform: capitalize; } h1 { text-transform: uppercase; } </style> </head> <body> <h1>This Is An H1 Element</h1> <p class="uppercase">This is some text in a paragraph.</p> <p class="lowercase">This is some text in a paragraph.</p> <p class="capitalize">This is some text in a paragraph.</p> </body>
8:增加单词间的间距
<head> <meta charset="UTF-8"> <title>单词间距</title> <style type="text/css"> p.big { word-spacing: 1cm; } p.small { word-spacing: -0.5cm; } </style> </head> <body> <p class="big">this is tianlianfeng</p> <p class="small">this is tianlianfeng</p> </body>
控制折行
<head> <meta charset="UTF-8"> <title>单词间距</title> <style type="text/css"> p { /*保留折行 和空格*/ /*white-space: pre-wrap;*/ /*没有空格和折行*/ /*white-space: nowrap;*/ /*忽略空白符 保留折行*/ white-space: pre-line; } </style> </head> <body> <p> 这是一些文本。 这是一些文本。 这是一些文本。 这是一些文本。 这是一些文本。 这是一些文本。 这是一些文本。 这是一些文本。 </p> </body>