开启掘金成长之旅!这是我参与「掘金日新计划 · 12 月更文挑战」的第9天,点击查看活动详情
之前介绍了如何使用css给文本修改字体字号颜色,以及让文本倾斜给文本加粗。本文继续介绍如何用css对文本进行首行缩进样式的设置以及文本修饰线的添加。
首行缩进样式设置
text-indent可以取负值,只对文本的第一行起作用 (html中有 可以起到首行缩进的效果,可以在任何需要的地方设置,代表空出两个中文字符位置)。text-indent:2em可以实现首行缩进两字符的效果,em指的是一个字号(font-family)大小,会随着上下文字号自行调整(与字符数无关)。
 的效果如下图所示
text-indent:2em的效果如下图
文字间距设置
- 中文:
letter-spacing可以设置字间间距(必须带单位px) - 英文:
word-spacing词间距,各个单词之间的间距 (不带单位px无效)
上述两个属性值都可以取负值,取负值时文字会变紧密或有交叉
文本修饰线设置
- 属性:
text-decoration文本修饰 - 属性值: |属性值|含义| |---|---| |none|没有修饰线,即默认状态| |underline|下划线| |overline|上划线| |line-through|删除线|
到这里使用css样式对文本内容进行修饰就介绍完了,接下来用css的样式来实现一下之前用html元素实现的页面,用html实现的方式可以参考文章末尾码上掘进中的html写法。
用css实现上图方法如下: