文本样式

本文详细介绍了CSS中设置行间距、文本垂直居中、文本修饰、字母间距和单词间距的方法。通过设置行高、font属性以及text-align和text-indent属性,可以实现精准的文本布局。此外,还探讨了text-transform属性用于英文文字变形,以及text-decoration属性用于添加文本装饰线。文章强调了在使用这些属性时的注意事项和最佳实践。
摘要由CSDN通过智能技术生成

设置行间距

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表示一个字符大小的距离
这是英文的例子在这里插入图片描述
正好是两个字母加两个空格的距离

这里是中文的例子
在这里插入图片描述
正好是两个汉字的距离

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值