HTML 中文本类属性语法详细介绍

前端个人笔记 http://www.sharedblog.cn/?post=113

 

1.水平对齐方式

    语法：

    text-align: left|center|right|justify;

    left 左对齐；  center 居中；  right 右对齐；  justify 两端对齐（只对英文起作用）；

    注：要让文本或图片等元素居中对齐，要给所在父元素设置 text-align 属性；

 

2.行高

    语法：

    line-height: 数值+单位;

    eg:

    line-height: 36px;

    注：①line-height不允许设置负值

          ②当行高等于容器高时，可实现单行文本在定高容器中垂直居中

          ③当行高只写数值不加单位时，行高为字体大小的倍数，如line-height: 2; 行高为字体大小的2倍

 

3.文本修饰

    语法：

    text-decoration: none(没有修饰);
                     underline(下划线);
                     line-through(删除线);
                     overline(上划线);

    eg:

    a{
        text-decoration: none;
    }
    a:hover{
        text-decoration: underline;
        color: pink;
    }

 

4.首行缩进

    语法：

    text-indent: 数值+单位;

    eg:

    text-indent: 30px;

    注：

        text-indent 设置正值向后缩进，设置负值向前缩进，会有隐藏效果；

        text-indent 只对第一行缩进起作用。

 

5.字符间距（汉字与汉字，英文字母与英文字母之间的间距）

    语法：

    letter-spacing: 数值+单位|normal;

    注：允许设置负值

 

6.词间距（主要针对英文）

    语法：

    word-spacing: 数值+单位|normal;

    注：允许设置负值

 

7.文本是否大小写（只针对英文起作用）

    语法：

    text-transform: none(默认值);
                    capitalize(首字母大写);
                    uppercase(全部大写);
                    lowercase(全部小写);

 

8.长单词换行

    语法：

    word-wrap: normal | break-word;

    注：主要应用在较长的url地址和没有空格的长串英文中字母

 

9.强制在一行显示

    语法：

    white-space: normal | nowrap;

 

10.垂直对齐方式

    语法：

    vertical-align: baseline(默认值) | top(顶部对齐) | middle(中部对齐) | bottom(底部对齐);

    注：①vertical-align 属性可用于设置表格单元格内容的垂直对齐方式

          ②设置内联块状元素（inline-block）的基线相对于元素所在行的基线的垂直对齐