用css为文本添加样式(3)

145 阅读1分钟

开启掘金成长之旅!这是我参与「掘金日新计划 · 12 月更文挑战」的第9天,点击查看活动详情

之前介绍了如何使用css给文本修改字体字号颜色以及让文本倾斜给文本加粗。本文继续介绍如何用css对文本进行首行缩进样式的设置以及文本修饰线的添加

首行缩进样式设置

text-indent可以取负值,只对文本的第一行起作用 (html中有 可以起到首行缩进的效果,可以在任何需要的地方设置,代表空出两个中文字符位置)。text-indent:2em可以实现首行缩进两字符的效果,em指的是一个字号(font-family)大小,会随着上下文字号自行调整(与字符数无关)。

 的效果如下图所示 image.png

text-indent:2em 的效果如下图 image.png

文字间距设置

  • 中文: letter-spacing可以设置字间间距(必须带单位px)
  • 英文: word-spacing词间距,各个单词之间的间距 (不带单位px无效)

上述两个属性值都可以取负值,取负值时文字会变紧密或有交叉

文本修饰线设置

  • 属性: text-decoration 文本修饰
  • 属性值: |属性值|含义| |---|---| |none|没有修饰线,即默认状态| |underline|下划线| |overline|上划线| |line-through|删除线|

到这里使用css样式对文本内容进行修饰就介绍完了,接下来用css的样式来实现一下之前用html元素实现的页面,用html实现的方式可以参考文章末尾码上掘进中的html写法。 image.png 用css实现上图方法如下: