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
4000
{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 从右往左