CSS

文本

CSS文本属性可以定义文本的外端，可以改变文本的颜色、字符间距，对齐文本、装饰文本、对文本进行缩进等。

缩进文本

text-indent属性可以实现文本缩进。
通过使用text-indent属性，所有元素的第一行都可以所见一个给定的长度，甚至可以是负值。最常用的是将段落的首行缩进。

p {text-indent: 5em;}

注意：所有块级元素都可应用text-indent属性，行级元素的第一行缩进可用左内边距或外边框。

• 使用负值

p {text-indent: -5em}

• 使用百分比值
  百分数要相对于缩进元素负元素的宽度。
  如下缩进值是父元素的20%，即100个像素。

div {width: 500px;}
p {text-indent: 20%;}

<div>
<p>this is a paragraph</p>
</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 paragraph.</p>
</div>
</div>

以上标记的段落也会缩进50像素，这是因为这个段落继承了id为inner的div元素的缩进值。

水平对齐

text-align属性影响元素中文本对齐方式。

• left 左对齐
• right 右对齐
• center 居中
  提示：块级元素或表元素居中，要适当设置左、右边距。
• CENTER 不仅影响文本，还会把整个元素居中。
• justify 两端对齐

字间隔

word-spacing属性可以改变字（单词）之间的标准距离。默认normal值为0.

p.spread {word-spacing: 30px;}
p.tight {word-spacing: -0.5em;}

<p class="spread">
This is a paragraph. The space between words will be increased.
</p>

<p class="tight">
This is a paragraph. The space between words will be decreased.
</p>

字母间隔

letter-spacing属性修改字符或字母间隔。

h1 {letter-sapcing: -0.5em}
h4 {letter-spacing: 20px}

<h1>This is header 1</h1>
<h4>This is header 4</h4>

字符转换

text-transform属性处理文本大小写。
- none 对文本不做任何改动
- uppercase 全大写
- lowercase 全小写
- capitalize 首字母大写

文本装饰

text-decoration属性：
- none 关闭所有装饰
- underline 下划线
- overline 上划线
- line-through 贯穿线
- blink 文本闪烁
如果两个装饰都与同一元素匹配，胜出规则的值会取代另一个值。

h2.stricken {text-decoration: line-through;}
h2 {text-decoration: underline overline;}

如上所有class为stricken的h2元素都只有一个贯穿线，而没有上划线与下划线。

处理空白符

white-space属性影响用户代理对源文档的空格、换行和tab字符的处理。

文本方向

direction属性影响块级元素中文本的书写方向、表中列布局的方向、内容水平填充其元素框的方向、以及两端对齐元素中最后一行的位置。

• ltr 从左往右
• rtr 从右往左