CSS样式之文本属性介绍

     文本几乎是所有网站必不可少的组成部分,它们的样式对最终效果的影响相当大.合理适当地设置文本样式不仅能使文本看起来美观大方，还方便浏览者阅读。从而提高了网站的观赏性。下面，小编将向大家介绍一下css文本样式相关属性的情况。

      一、文本属性定义与用途

　　文本属性简单来说就是定义文本外观的属性。它可以用于改变文本的颜色、字符间距，对齐文本，装饰文本等等。

      二、缩进文本属性

　　在小学我们就知道,写文章段落的首行要空两格，在web页面上的段落也不例外,这是一种最常用的文本格式化效果。在CSS中，我们可以通过text-indent属性来实现。

　　我们通过text-indent属性，可以使所有元素的第一行都可以进行一个指定长度的缩进。

      1.规则写法

　　段落的首行缩进通常就是使用这个来定义。如果想定义所有段落的首行缩进10em，则可以使用下面的规则：

　　注意：通常text-indent无法应用于行内元素和图像之类的替换元素，却可以在全部块元素中使用。

　　但也有例外，就是当一个图像放置在一个块级元素（比如段落）的首行中，它就能应用到text-indent属性，图像会随该行的其余文本移动。

　　提示：（1）如果行内元素的首行要缩进，我们可以怎样做呢？方法就是通过创造左内边距或外边距来实现。

　　         （2）属性的长度值可以是负值喔！

      2.使用负值

　　一般来说，我们的属性值通常都是正值，但是text-indent是可以设置为负值的。利用负值，可以实现很多有趣的效果，比如“悬挂缩进”，即第一行悬挂在元素中余下部分的左边：

　　提示：text-indent设置负值时要当心，对一个段落而言，可能会出现首行的某些文本超出浏览器窗口边界的情况。为了避免出现这种显示问题，建议针对负缩进再设置一个外边距或一些内边距，如下面的规则。

      3.使用百分比值

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

　　百分数是相对于缩进元素父元素的宽度。换句话说，如果将缩进值设置为50%，所影响元素的第一行会缩进其父元素宽度的50%。

      4.继承

　　text-indent属性可以继承

       请考虑如下标记：

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

      三、水平对齐属性

　　text-align 是一个基本的属性，它会影响一个元素中的文本行互相之间的对齐方式。它有4个值分别为：left、right、center和justify。

　　顾名思义：left、right和center就是分别使元素中的文本左对齐、右对齐和居中。

　　justify：水平对齐，即文本行的左右两端都放在父元素的内边界上。然后，调整单词和字母间的间隔，使各行的长度恰好相等。在打印领域，两端对齐文本很常见。

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

　　对于text-align的默认值，我们从两方面来说：

　　1.西方语言都是从左向右读，所有text-align的默认值是left。文本在左边界对齐，右边界呈锯齿状（称为“从左到右”文本）

　　2.希伯来语和阿拉伯语之类的的语言，text-align则默认为right，因为这些语言从右向左读。

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

四、字间隔属性

　　如果我们需要改变字（单词）之间的间隔，可以使用word-spacing属性其默认值normal与设置值为0效果是等价的。

　　word-spacing属性的值可以以是正长度值或负长度值

　　正长度值，增加字之间的间隔

　　负长度值，减少字之间的间隔

　　我们可以写一段代码来试验一下：

　　运行效果显示如下：

      五、字母间隔属性

　　letter-spacing属性与word-spacing的区别在于，字母间隔修改的是字符或字母之间的间隔

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

      六、字符转换属性

　　在英文文本中，通常会涉及大小写的问题。text-transform就是影响文本大小写的属性

     这个属性有4个值：

　　none：对文本不做任何改动，使用源文档中的源于大小写

　　uppercase：将文本换为全大写

　　lowercase：将文本换为全小写

　　capitalize：单词首字母大写

　　text-transform在我们平常写代码时,可能很少使用到，但当您突发奇想，把所有h1元素变为小写，这个属性就很有用，你可以编辑以下代码来实现:

　　这样有两方面的好处:

　　1.只需写一个简单的规则来完成这个修改，而无需修改h1元素本身

　　2.方便日后切换为全大写

      七、文本装饰

　　接下来，我们讨论 text-decoration属性，这是一个很有意思的属性，它提供了很多非常有趣的效果

　　text-decoration有5个值：

　　none：关闭应用于元素的所有效果

　　underline：对元素添加下划线

　　overline：在文本的顶端画一个上划线

　　line-through：在文本中间画一个贯穿先

　　blink：让文本闪烁

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

　　注意：如果去掉链接的下划线，那么锚与正常文本之间在视觉上的唯一差别就是颜色。

　　还可以在一个规则中结合多种装饰。如果希望所有超链接既有下划线，又有上划线。

      则规则如下：

      八、文本方向

　　现在我们来看一下direction属性，该属性主要影响块级元素中文本的书写方向、表中列布局的方向、内容水平填充其元素框的方向、以及两端对齐元素中最后一行的位置。

　　温馨提示：对于行内元素，只有当 unicode-bidi属性设置为embed或bidi-override时才会应用direction属性。

　　direction属性有两个值：ltr和rtl。通常情况下，默认值是ltr，显示从左到右的文本。如果显示从右到左的文本，应使用值rtl。

       九、处理空白符属性

　　最后我们来讨论white-space属性，它会影响到用户代理对源文档中的空格、换行和tab字符的处理。

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

　　设置这种默认行为,也可以简单写为：

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

      为了方便大家理解各个white-space属性值的区别，我们做了一个表格来显示：

     最后，为了给初学者一个直观的概念，特将本教程列举的所有文本属性汇总如下：

　　中华文化博大精深，常用汉字多达5000个，曾是中华民族引以为豪的文化积淀。但是在互联网时代，汉字却成为了一个沉重的包袱，字形的美化远比其它国家的语言困难得多。所以要保证用户在阅读中文文章的时候不易疲劳，字体的样式就非常讲究了，既要保证合适的字体大小和颜色，又要把行距，缩进设置等布局属性设置得恰到好处，让读者阅读起来更加舒适。这当中涉及的CSS非常多，想要随时按照自己的想法灵活调整文字排版，就应该熟记一些常用的样式，并且在实战中多做尝试，从而积累丰富的经验。