CSS文本格式化

【示例】使用 text-decoration 属性为文本添加装饰：

    


        
无装饰文字
        
带下划线文字
        
带上划线文字
        
带贯穿线文字

运行结果如下图所示：

3. text-transform

text-transform 属性用来控制文本中英文字母的大小写，通过该属性您可以在不修改原文的基础上，将文本中的英文统一更改为小写字母、大写字母或者首字母大写的形式。

text-transform 属性的可选值如下：

【示例】使用 text-transform 定义文本中英文的大小写：

    


    
原文： text-transform  转换后：text-transform
    
原文： text-transform  转换后：text-transform
    
原文： TEXT-TRANSFROM  转换后：text-transform
    
原文： text-transform  转换后：text-transform

运行结果如下图所示：

4. text-indent

text-indent 属性用来为元素中的文本添加首行缩进的效果，属性的可选值如下：

提示：不论是使用具体的值还是使用百分比的形式，都可以设置为负值，但这么做可能会造成文本内容溢出元素区域。

【示例】使用 text-indent 为文本添加首行缩进效果：

    
text-indent 属性用来为元素中的文本添加首行缩进的效果，至于是从左侧还是从右侧缩进则取决于 direction 属性定义的文本方向。

运行结果如下图所示：

注意：文本是从左侧还是从右侧缩进取决于 direction 属性定义的文本方向。

5. line-height

line-height 属性用来设置文本的行高，属性的可选值如下：

【示例】使用 line-height 为文本设置行高：

    


    

        这是默认的标准行高

        这是默认的标准行高

        这是默认的标准行高

    
    

        使用数字定义一个较小的行高

        使用数字定义一个较小的行高

        使用数字定义一个较小的行高

    
    

        使用百分比的形式定义一个较大的行高

        使用百分比的形式定义一个较大的行高

        使用百分比的形式定义一个较大的行高

    

运行结果如下图所示：

6. letter-spacing

letter-spacing 属性用来设置字符之间的间距，属性的可选值如下：

【示例】使用 letter-spacing 属性设置字符之间的间距：

    


    

        letter-spacing 属性用来设置字符之间的间距

        letter-spacing 属性用来设置字符之间的间距

        letter-spacing 属性用来设置字符之间的间距

    

运行结果如下图所示：

7. word-spacing

word-spacing 属性用来设置单词与单词之间的间距，但对中文无效，属性的可选值如下：

【示例】使用 word-spacing 属性设置字符之间的间距：

    


    

        word-spacing 属性用来设置单词与单词之间的间距，但对中文无效

        word-spacing 属性用来设置单词与单词之间的间距，但对中文无效

        word-spacing 属性用来设置单词与单词之间的间距，但对中文无效

    

运行结果如下图所示：

8. text-shadow 

text-shadow 属性用来为文本添加阴影及模糊效果，属性的语法格式如下：

text-shadow: h-shadow v-shadow blur color;

语法说明如下：

• h-shadow：必填值，设置阴影的水平位置，允许为负值；
• v-shadow：必填值，设置阴影的垂直位置，允许为负值；
• blur：可选值，设置模糊的距离；
• color：可选值，设置阴影的颜色。

注意：text-shadow 属性可以设置一个或多个阴影效果，只需要将每组的值使用逗号,分隔即可（类似于 background 属性的用法）。

【示例】使用 text-shadow 属性为文本设置阴影效果：

    


    
text-shadow 属性可以为文本添加阴影和模糊效果

运行结果如下图所示：

9. vertical-align

vertical-align 属性用来定义元素内文本的垂直对齐方式，属性的可选值如下：

上表中提到了基线、底线、顶线、中线等概念，它们到底指什么呢？

• 顶线：中文汉字的上边沿；
• 中线：贯穿小写英文字母 x 中间的线；
• 基线：小写英文字母 x 的下边沿；
• 底线：中文汉字的下边沿；
• 内容区：指底线与顶线包裹的区域；
• 行高：包括内容区与以内容区为基础对称拓展的空白区域，我们称之为行高，也可以认为是相邻文本行基线间的距离；
• 行距：指相邻文本行间上一个文本行底线和下一文本行顶线之间的距离；
• 行内框：是一个浏览器渲染模型中的概念，无法显示出来，但是它又确实存在，它的高度与行高相同；
• 行框：同行内框类似的概念，行框是指本行的一个虚拟的矩形框，也是浏览器渲染模式中的一个概念。行框高度等于本行内所有元素中行内框最大的值（以行高值最大的行内框为基准，其他行内框采用自己的对齐方式向基准对齐，最终计算行框的高度）。

【示例】使用 vertical-align 属性为元素设置垂直对齐方式：

    


    
vertical-align 属性用来定义元素内文本的垂直对齐方式
    
vertical-align 属性用来定义元素内文本的垂直对齐方式

运行结果如下图所示：

10. white-space

white-space 属性用来设置如何处理元素内的空白，属性的可选值如下：

标签的效果

【示例】使用 white-space 属性来处理元素内的空白：

    


    

        white-space 属性用来设置如何处理元素内的空白                         
        white-space 属性用来设置如何处理元素内的空白
    

运行结果如下图所示：

11. direction

direction 属性用来设置文本的方向，属性的可选值如下：

【示例】使用 direction 属性来设置文本的方向：

    


    
direction 属性用来设置文本的方向
    
direction 属性用来设置文本的方向

运行结果如下图所示：