3-18. text文本相关属性
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、text-decoration 属性，文本装饰
- none：无装饰的文本是默认外观，但也不总是这样。例如，链接默认地会有下划线，可以去掉，例如
a {text-decoration: none;}
- underline：对元素加下划线，像 HTML 中的 U 元素一样
- overline：上划线
- line-through：在文本中间画一个贯穿线，等价于 HTML 中的 S 和 strike 元素
- blink：让文本闪烁，类似于 Netscape 支持的颇招非议的 blink 标记
一个规则中结合多种装饰。所有超链接既有下划线，又有上划线：
a:link a:visited {text-decoration: underline overline;}
两个不同的装饰都与同一元素匹配，胜出规则的值会完全取代另一个值。所有 class 为 stricken 的 h2 元素都只有一个贯穿线装饰，而没有下划线和上划线，因为 text-decoration 值会替换而不是累积起来：
h2.stricken {text-decoration: line-through;}
h2 {text-decoration: underline overline;}
快捷键
td text-decoration: none;
tdu text-decoration: underline;
tdl text-decoration: line-through;
tdo text-decoration: overline;
2、text-align属性，文本行互相之间的对齐方式。
| 值 | 描述 |
|---|---|
| left | 把文本排列到左边。默认值：由浏览器决定。 |
| right | 把文本排列到右边。 |
| center | 把文本排列到中间。 |
| justify | 实现两端对齐文本效果。 |
| inherit | 规定应该从父元素继承 text-align 属性的值。 |
h1 {text-align:center}
h2 {text-align:left}
h3 {text-align:right}
快捷键
ta text-align: left;
tar text-align: right;
tac text-align: center;
3、text-indent 属性，缩进文本。很少用。
把 Web 页面上的段落的第一行缩进，这是一种最常用的文本格式化效果。
例如，所有段落的首行缩进 5 em：
p {text-indent: 5em;}
不过在为 text-indent 设置负值时要当心，如果对一个段落设置了负值，那么首行的某些文本可能会超出浏览器窗口的左边界。为了避免出现这种显示问题，建议针对负缩进再设置一个外边距或一些内边距：
p {text-indent: -5em; padding-left: 5em;}
百分数要相对于缩进元素父元素的宽度。换句话说，如果将缩进值设置为 20%，所影响元素的第一行会缩进其父元素宽度的 20%。
在下例中，缩进值是父元素的 20%，即 100 个像素：
div {width: 500px;}
p {text-indent: 20%;}
<div>
<p>this is a paragragh</p>
</div>
text-indent 属性可以继承，请考虑如下标记：
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>
以上标记中的段落也会缩进 50 像素，这是因为这个段落继承了 id 为 inner 的 div 元素的缩进值。
4、word-spacing 属性可以改变字（单词）之间的标准间隔，增加或减少单词间的空白，即字间隔。很少用。
| 值 | 描述 |
|---|---|
| normal | 默认。定义单词间的标准空间。 |
| length | 定义单词间的固定空间。 |
| inherit | 规定应该从父元素继承 word-spacing 属性的值。 |
<head>
<style type="text/css">
p.spread {word-spacing: 30px;}
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>
图片.png
5、letter-spacing 属性，字母间隔，修改的是字符或字母之间的间隔，增加或减少字符间的空白，即字符间距。很少用。
h1 {letter-spacing: -0.5em}
h4 {letter-spacing: 20px}
<h1>This is header 1</h1>
<h4>This is header 4</h4>
图片.png
6、text-transform 属性，字符转换，处理文本的大小写，改变元素中的字母大小写，而不论源文档中文本的大小写。很少用。
| 值 | 描述 |
|---|---|
| none | 默认。定义带有小写字母和大写字母的标准的文本。 |
| capitalize | 文本中的每个单词以大写字母开头。 |
| uppercase | 定义仅有大写字母。 |
| lowercase | 定义无大写字母，仅有小写字母。 |
| inherit | 规定应该从父元素继承 text-transform 属性的值。 |
<head>
<style type="text/css">
h1 {text-transform: uppercase}
p.uppercase {text-transform: uppercase}
p.lowercase {text-transform: lowercase}
p.capitalize {text-transform: capitalize}
</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>
图片.png
7、white-space 属性，处理空白符，会影响到用户代理对源文档中的空格、换行和 tab 字符的处理。很少用。
| 值 | 描述 |
|---|---|
| normal | 默认。空白会被浏览器忽略。 |
| pre | 空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。 |
| nowrap | 文本不会换行，文本会在在同一行上继续，直到遇到 标签为止。 |
| pre-wrap | 保留空白符序列，但是正常地进行换行。 |
| pre-line | 合并空白符序列，但是保留换行符。 |
| inherit | 规定应该从父元素继承 white-space 属性的值。 |
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p{
/*
文本相关的属性
1. 文本装饰属性: text-decoration: underline;
取值:
下划线 underline
中划线 line-through
上划线 overline
没有下划线 no-underline
没有 none 默认
2. text-align: 水平方向文本对齐
取值:
中 center
左 left
右 right
3. text-indent: ; 控制文本缩进
取值:
1. 像素 px
2. em 一个em就代表一个字的宽度
*/
text-decoration: none ;
/*text-align: center;*/
text-indent: 2em ;
padding-left: 5em;
}
a{
text-decoration: none;
}
</style>
</head>
<body>
<p>
<a href="#">游丝软系飘春榭，落絮轻沾扑绣帘。</a>
闺中女儿惜春暮，愁绪满怀无释处。
手把花锄出绣帘，忍踏落花来复去。
柳丝榆荚自芳菲，不管桃飘与李飞；
桃李明年能再发，明年闺中知有谁？
三月香巢已垒成，梁间燕子太无情！
明年花发虽可啄，却道人去梁空巢。
一年三百六十日，风刀霜剑严相逼；
明媚鲜妍能几时，一朝漂泊难寻觅。
花开易见落难寻，阶前愁杀葬花人，
</p>
滚滚长江东逝水，
浪花淘尽英雄，
是非成败转头空，
青山依旧在，
几度夕阳红，
白发渔樵江楮上，
惯看秋月春风，
一壶浊酒喜相逢，
古今多少事，
都付笑谈中。
滚滚长江东逝水，
浪花淘尽英雄，
是非成败转头空，
青山依旧在，
几度夕阳红，
白发渔樵江楮上，
惯看秋月春风，
一壶浊酒喜相逢，
古今多少事，
都付笑谈中。
</body>
图片.png
