设置行间距
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
表示一个字符大小的距离
这是英文的例子
正好是两个字母加两个空格的距离
这里是中文的例子
正好是两个汉字的距离