css样式——文本篇

CSS文本属性可以定义文本的样式。
通过文本属性，您可以改变文本的颜色、字符间距，对其文本，装饰文本，对文本缩进等等。

文本缩进

把web页面上的段落的第一行缩进，这是一种最常用的文本格式化效果。
CSS提供了text-indent属性，该属性可以方便地实现文本缩进。
通过使用text-indent属性，所有元素的第一行都可以缩进一个给定的长度，甚至该长度可以是负值。

p { text-indent: 5em; }

注意：一般来说，可以为所有块级元素应用text-indent，但无法将该属性应用于行内元素，图像之类的替换元素上也无法应用text-indent属性。
那如何对行内元素缩进呢？可以用左边距或外边距创造这种效果。

使用负值

text-inent还可以设置为负值。利用这种技术，可以实现很多有趣的效果，比如“悬挂缩进”，即第一行悬挂在元素中余下部分的左边：

p {
  text-indent: -5em;
}

不过在为text-indent设置负值的时候要小心，如果对一个段落设置了负值，那么首行的某些文本可能会超出浏览器窗口的左边界。为了避免出现这种显示问题，建议针对负缩进再设置一个外边距或一些内边距：

p {
    text-indent: -5em;
    padding-left: 5em;
}

使用百分比值

text-indent可以使用所有长度单位，包括百分比值。

百分数要相对于缩进元素父元素的宽度。换句话说，如果将缩进值设置为20%，所影响元素的第一行会缩进其父元素宽度的20%。
在这个例子中，缩进值是父元素的20%，即100px:

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

<div>
    <p>this is a paragragh</p>
</div>

继承

text-indent属性可以继承：

<style>
    div#outer {width: 500px;}
    div#inner {text-indent: 10%;}
    p {width: 200px;}
</style>
<div id="outer">
    <div id="inner">
        <p>this is a paragragh.</p>
    </div>
</div>

水平对齐

text-align是一个基本的属性，它规定了元素中文本的水平对其方式。

text-align使用规则:
 · 只在块元素中使用，直接用在内联元素上不生效；
 · 会对块元素中的所有内联元素对齐；
 · 会对块元素中包含的文本内容生效；
 · 在其内的块元素也会对齐是因为子块元素继承父块元素的text-align属性；

可能的值

值	描述
left	把文本排列到左边。默认值。
right	把文本排列到右边。
center	把文本排列到中间。
justify	实现两端对其文本效果。
inherit	规定应该从父元素继承text-align属性的值。

值 justify

实现原理：（引用张鑫旭）
要理解原理，我们首先要搞清楚文本的两端对其声明text-align：justify;起作用的本质。首先，大家都知道，text-align：justify是专门为英文设计的，用来实现英文语句的两端对齐。注意这里的，是语句的对齐。大家都应该知道，英文语句是一个一个单词组成的，每个单词之间使用空格分隔。
text-align：justify之所以可以让英文段落两端对齐，那是因为每个英文单词之前那个透明看不见的空格被拉伸了。因此，当我们写下一段洋洋洒洒的中文的时候，text-align：justify是没有任何作用的。跟没有设置是没有任何区别的，为什么呢？因为中文是一个一个汉字，汉字之间是没有空格的，自然也就不能拉伸，所以也就不能两端对齐。
怎么办呢?难道中文就不行了吗？
当然不是！既然正常的中文文字之间没有空格，我们自己加一点不就好了。例如下面代码：

"左某人小鲜肉".split("").join(" ");
结果： 
"左 某 人 小 鲜 肉"

会发现，每个中文文字之间都有空格字符，于是text-align:justify就能大发神威，实现两端对齐。
虽然我们实现了两端对齐，但是，空格字符它也是真实存在的字符，是会占据宽度的。如果放任不管，文字就会显得很稀松，阅读会很吃力，在测试眼里就是个bug，怎么办呢？
很简单，我们使用letter-spacing收缩字符间距就可以了。

text_box.style.letterSpacing = '-.15em';

不同字体的letter-spacing负值不一样，使用em单位，可以更智能适配各个字体的文字。
至此，我们想要的效果就可以实现了：

box.style.textAlign = 'justify';
text_box.style.letterSpacing = '-.15em';
text_box.innerHTML = text_box.innerHTML.split("").join(" ");

上面的方法适用于中文内容，如果段落含有英文片段，会干掉原来的空格，因为三个空格会被当做一个空格距离来处理，因此，我们还需要对连续三个空格做下特殊处理，代码进化成：

text_box.innerHTML = text_box.innerHTML.replace(/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g, '').split("").join(" ").replace(/\s{3}/g, "   ");

字间隔

word-spacing属性可以改变字(单词)之间的标准间隔。其默认值normal与设置值为0是一样的。

word-spacing属性接受一个正长度值或负长度值。如果提供一个正长度值，那么字之间的间隔就会增加。为word-spacing设置一个负值，会把它拉近：

<style>
    p.spread {word-spacing: 30px;}
    p.tight {word-spacing: -0.5em;}
</style>
<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>

注意：中文文字下，word-spacing属性是没有效果的。

字母间隔

letter-spacing属性可以设置字母之间的间隔

与word-spacing属性一样，letter-spacing属性的可取值包括所有长度。默认值是normal(这与letter-spacing: 0相同)。输入的长度值会使字母之间的间隔增加或减少指定的量：

<style>
    h1 {letter-spacing: -0.5em}
    h4 {letter-spacing: 20px}
</style>

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

字符转换

text-transform属性处理文本的大小写。这个属性有5个值：

值	描述
none	默认值。定义带有小写字母和大写字母的标准的文本。
capitalize	文本中的每个单词以大写字母开头。
uppercase	定义仅有大写字母。
lowercase	定义无大写字母，仅有小写字母。
inherit	规定应该从父元素继承text-transform属性的值。

使用text-transform有两方面的好处。首先，只需要一个简单的规则来完成这个修改，而无需修改元素本身。其次，如果以后决定将所有大小写再切换为原来的大小写，可以更容易的完成修改。

文本装饰

text-decoration属性规定添加到文本的装饰。这个属性允许对文本设置某种效果，比如加下划线。如果后代元素没有自己的装饰，祖先元素上设置的装饰会“延申”到后代元素中。

任何版本的IE浏览器（包括IE8）都不支持属性值inherit。
IE,Chrome或Safari不支持blink属性值。

值	描述
none	默认值。定义标准的文本。
underline	下划线。
overline	上划线。
line-through	删除线。
blink	定义闪烁的文本。
inherit	规定应该从父元素继承text-decoration属性的值。

none值会关闭原本应用到元素上的任何装饰。通常，无装饰的文本是默认外观，但也不总是这样。例如，链接默认地会有下划线。如果希望去掉超链接的下划线，可以这样做到：

a { text-decoration: none; }

处理空白符

white-space会影响到对源文档中空格、换行和tab字符的处理。

通过使用该属性，可以影响浏览器处理字之间和文本行之间的空白符的方式。从某种程度上讲，默认的 XHTML 处理已经完成了空白符处理：它会把所有空白符合并为一个空格。所以给定以下标记，它在 Web 浏览器中显示时，各个字之间只会显示一个空格，同时忽略元素中的换行：

<p>This     paragraph has    many
    spaces           in it.</p>

可以用以下声明显示地设置这种默认行为：

p {white-space: normal;}

上面的规则告诉浏览器按照平常的做法去处理：丢掉多余的空白符。如果给定这个值，换行字符（回车）会转换为空格，一行中多个空格的序列也会转换为一个空格。

可能的值

值	描述
normal	默认值。空白会被浏览器忽略。
pre	空白会被浏览器保留。其行为方式类似HTML中的<pre>标签。
nowrap	文本不会换行，文本会在同一行上继续，知道遇到<br>标签为止。
pre-wrap	保留空白符序列，但是正常地进行换行。
pre-line	合并空白符序列，但是保留换行符。
inderit	规定应该从父元素继承 white-space属性的值。

所有浏览器都支持white-spacing属性。任何版本地IE浏览器都不支持属性值"inherit"。

总结

值	空白符	换行符	自动换行
pre-line	合并	保留	允许
normal	合并	忽略	允许
nowrap	合并	保留	不允许
pre	保留	保留	不允许
pre-wrap	保留	保留	允许

文本方向

如果您阅读的是英文书籍，就会从左到右、从上到下地阅读，这就是英文的流方向。不过，并不是所有语言都如此。我们知道古汉语就是从右到左来阅读的，当然还包括希伯来语和阿拉伯语等等。CSS2 引入了一个属性来描述其方向性。

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

对于行内元素，只有当 unicode-bidi 属性设置为 embed 或 bidi-override 时才会应用 direction 属性。
direction 属性有两个值：ltr 和rtl。大多数情况下，默认值是 ltr，显示从左到右的文本。如果显示从右到左的文本，应使用值rtl。