CSS文本格式化(typedef)

CSS文本格式化

通过 CSS 中的文本属性您可以像操作 Word 文档那样定义网页中文本的字符间距、对齐方式、缩进等等，CSS 中常用的文本属性如下所示：

• text-align：设置文本的水平对齐方式；
• text-decoration：设置文本的装饰；
• text-transform：设置文本中英文的大小写转换方式；
• text-indent：设置文本的缩进方式；
• line-height：设置行高；
• letter-spacing：设置字符间距；
• word-spacing：设置单词与单词之间的间距（对中文无效）；
• text-shadow：设置文本阴影；
• vertical-align：设置文本的垂直对齐方式；
• white-space：设置文本中空白的处理方式；
• direction：设置文本方向。

1. text-align

    


    
左对齐
    
右对齐
    
居中对齐

    


    
两端对齐、两端对齐

2. text-decoration

标签的默认下划线。当然了，使用 text-decoration 属性也可以在需要的地方为元素中的文本添加一些装饰，达到突出显示的效果。text-decoration 属性的可选值如下：

值	描述
none	默认值，标准文本，没有额外装饰，可以用来删除已有的文本装饰
underline	在文本下方添加一条下滑线
overline	在文本上方添加一条上滑线
line-through	在文本的中间定义一条横向贯穿文本的线（类似于删除线）
blink	定义闪烁的文本（目前主流浏览器不再支持）
inherit	从父元素继承 text-decoration 属性的值

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

    


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

运行结果如下图所示：图：text-decoration 属性演示

3. text-transform

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

值	描述
none	默认值，以原文显示，对文本中的英文不做更改
capitalize	将文本中的每个单词更改为以大写字母开头的形式
uppercase	将文本中的英文字母全部更改为大写
lowercase	将文本中的英文字母全部更改为小写
inherit	从父元素继承 text-transform 属性的值

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

    


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

运行结果如下图所示：图：text-transform 属性演示

4. text-indent

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

值	描述
length	以固定的值加单位的形式（例如 2em）定义缩进距离，默认值为 0
%	以基于父元素宽度的百分比来定义缩进距离
inherit	从父元素继承 text-indent 属性的值

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

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

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

运行结果如下图所示：图：text-indent 属性演示

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

5. line-height

    


    

        这是默认的标准行高

        这是默认的标准行高

        这是默认的标准行高

    
    

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

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

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

    
    

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

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

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

    

6. letter-spacing

    


    

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

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

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

    

7. word-spacing

    


    

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

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

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

    

8. text-shadow

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

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

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

    


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

9. vertical-align

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

    


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

10. white-space

标签的效果

    


    

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

11. direction

    


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