CSS关于网页中的文本

      字体的处理在网页设计中无论怎么强调也不为过，毕竟网页使用来传递信息的，而最经典最直接的信息传递方式就是文字，所以，了解一点字体的基本知识对于设计来说还是非常重要的。下面总结一些平时经常能用到的^-^

 

 

    文本行间距：line-height

行间距取决于字体的大小，一般来说，小的字号需要大一点的行间距来便于阅读，中文字体在网页上如果没有行间距的设定，对于阅读大段文字来说是读者的灾难，所以适当设定line-height是非常必要的。一般地， line-height 在网页设计中应该是字体大小的1.5倍到2倍。Word 和其它的文本编辑软件里， 一般设定字体的120%作为缺省的行间距。css里的 line- height 设定，是均分后加在每一行的上下，也就是说，如果 line-height 设定为 20px 的话，那么每一行文字的上下各有10px的间距。

    字间距 ：word-spacing

    字符间距：letter-spacing

    段落首行缩进：text-indent   

注意：一般来说，可以为所有块级元素应用 text-indent，但无法将该属性应用于行内元素，图像之类的替换元素上也无法应用 text-indent 属性。不过，如果一个块级元素（比如段落）的首行中有一个图像，它会随该行的其余文本移动。

提示：如果想把一个行内元素的第一行“缩进”，可以用左内边距或外边距创造这种效果。

     对齐方式：

text-align 是一个基本的属性，它会影响一个元素中的文本行互相之间的对齐方式。它的前 3 个值相当直接，不过第 4 个和第 5 个则略有些复杂。

值 left、right 和 center 会导致元素中的文本分别左对齐、右对齐和居中。

西方语言都是从左向右读，所有 text-align 的默认值是 left。文本在左边界对齐，右边界呈锯齿状（称为“从左到右”文本）。对于希伯来语和阿拉伯语之类的的语言，text-align 则默认为 right，因为这些语言从右向左读。不出所料，center 会使每个文本行在元素中居中。

提示：将块级元素或表元素居中，要通过在这些元素上适当地设置左、右外边距来实现。

text-align:center 与 <CENTER>

您可能会认为 text-align:center 与 <CENTER> 元素的作用一样，但实际上二者大不相同。

<CENTER> 不仅影响文本，还会把整个元素居中。text-align 不会控制元素的对齐，而只影响内部内容。元素本身不会从一段移到另一端，只是其中的文本受影响。

justify

最后一个水平对齐属性是 justify。

在两端对齐文本中，文本行的左右两端都放在父元素的内边界上。然后，调整单词和字母间的间隔，使各行的长度恰好相等。您也许已经注意到了，两端对齐文本在打印领域很常见。

需要注意的是，要由用户代理（而不是 CSS）来确定两端对齐文本如何拉伸，以填满父元素左右边界之间的空间。

    空白符（空格、换行和 tab 字符）处理：

            white-space 设置为normal：丢掉多余的空白符。如果给定这个值，换行字符（回车）会转换为空格，一行中多个空格的序列也会转换为一个空格。

            white-space 设置为 pre：受这个属性影响的元素中，空白符的处理就有所不同，其行为就像 XHTML 的 pre 元素一样；空白符不会被忽略。

如果 white-space 属性的值为 pre，浏览器将会注意额外的空格，甚至回车。在这个方面，而且仅在这个方面，任何元素都可以相当于一个 pre 元素。

注意：IE 7 以及更早版本的浏览器不支持该值。

white-space 设置为nowrap：它会防止元素中的文本换行，除非使用了一个 br 元素。在 CSS 中使用 nowrap 非常类似于 HTML 4 中用 <td nowrap> 将一个表单元格设   置为不能换行，不过 white-space 值可以应用到任何元素。

总结

下面的表格总结了 white-space 属性的行为：

 

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