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

2024年04月10日 懒猪 前端开发 前端博客 个人博客 网站制作 鹏仔先生 百变鹏仔 HTML CSS javascript JS 共享博客

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


本文链接:http://so.lmcjl.com/news/1702/

展开阅读全文
相关内容