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

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）的基线相对于元素所在行的基线的垂直对齐

分享

分享海报

扫一扫 - 分享本文

打赏

微信

扫一扫 - 打赏鹏仔

收藏

请按下 Ctrl + D

即可收藏当前文章

手机看

分享到微信朋友圈

扫一扫 - 手机阅读

侵权投诉

侵权、举报、建议

↓