文本样式

it2026-03-20  7

设置行间距

css中没有提供一个具体的设置行间距的方法,所以我们只能通过设置的行高来设置行间距。 行间扭矩=行高 --字体大小

行高: 之前说过,文字都是在看不见的线格子中的里面,类似于上学的时候用的单线本,行高就是这些线与线的距离。在网页中文字会默认在行高中垂直居中显示。

设置行高属性:line-height: 值 值可以直接填数字比如10px也可以填百分数比如100%,百分比为默认行高的百分比,也可以直接填数值比如1这时候设置的为字体大小相应的倍数(常用) 在font里面也可设置行高 语法:font:字体大小值/行高 字体类型 用这种方法必须同时设置字体大小和字体类型,也可不加行高直接用这个设置文字大小,不过字体类型都必须有 而且,当用了这个方法就是这样font:字体大小值 字体类型设置字体大小以后,行高会自动设置为默认值,如果之前设置的有行高则会被覆盖

设置文本垂直居中(用行高设置)

在单行文本中,我们可以用设置文本的行高来设置文本垂直居中 设置行高为当前块元素的高度就可使单行文本垂直居中,蓝色笔那里是水平居中。

英文文字的变形text-transform属性

首字母大写是指所有单词的首字母都大写,就比如英语文档,会使所有首字母都大写,他是通过单词边界来识别单词的,即两个单词或者英语文本间隔开他就会认为是一个单词,边界可以是空格标点符号什么什么的

文本修饰text-decoration属性

用来给文添加各种修饰。通过它可以给文本的上中下添加线条 值:

underline :定义文本下的一条线 overline :定义文本上的一条线 line-though :定义穿过文本的一条线 none :默认值,设置没有线

设置多了会被覆盖

超链接 会自动默然用这个属性设置下划线 可以用none值设置超链接没有下划线

字母间距和单词间距

字符间距: 即两个字母或者文字或者符号之间的距离 单词间距: 即两个单词之间的距离,不适用于中文

这两个属性的值都可直接设置为npx或者n%,可以为负值

文本对齐text-align属性

设置文本对齐方式 两端对齐是通过调整文本之间的空格来实现两端对齐的

首行缩进text-indent属性

该样式需要指定一个长度为第一行的缩进长度,并且只对第一行生效 当设置的值为负值的话则表示向左移动 他的值也可设置为百分比,当设置为百分比的时候,他的百分比是整行的比例 不推荐用px因为当文字大小不同的时候固定的缩进大小可能使文章不协调

所以我们可以用em 这里当用em当做单位时,一个em表示一个字符大小的距离 这是英文的例子 正好是两个字母加两个空格的距离

这里是中文的例子 正好是两个汉字的距离

最新回复(0)