从零基础到轻松就业 | CSS——CSS 给文本加样式：② 文本属性（ Ⅰ ）

原创：itsOli  @前端一万小时

本文首发于公众号「前端一万小时」

本文版权归做者全部，未经受权，请勿转载！
复制代码

---

前言： 做为上一篇《从零基础到轻松就业 | CSS——CSS 给文本加样式：① 字体属性》的兄弟文章，咱们继续逐一学习“文本属性”怎样给文本加样式的。

对于“文本属性”的学习，咱们能够简单分为：

• 对文本自己进行“小整形”：

  • 转换一下文本的大小写
  • 给这个文本加一些诸如“下划线”、“上划线”和“穿过文本的线”的装饰
  • 给文本加些“阴影”

• 大整形：把文本放在最和谐、最养眼的位置——文本布局。
  这个就相似于咱们用的 Office 的 Word 里：首行缩进、左对齐、右对齐、居中、行高、行间距等等。

  • 首行缩进
  • 文本水平对齐（左对齐、右对齐、居中等）
  • 行高
  • 字母和字间距
  • 处理空白符
  • 其余

1 对文本自己进行“小整形”

1.1 转换一下文本的大小写

text-transform 属性用于设置要转换的字体。

p {
  text-transform: 值;
}

none        防止任何转型；
uppercase   将全部文本转为大写；
lowercase   将全部文本转为小写；
capitalize  转换全部单词让其首字母大写；
full-width  将全部字形转换成固定宽度的正方形，相似于等宽字体，容许对齐。主要用于：拉丁字符以及
            亚洲语言字形（如中文，日文，韩文）。
复制代码

1.2 给这个文本加一些诸如“下划线”、“上划线”和“穿过文本的线”的装饰

text-decoration 属性用于加一些诸如“下划线”、“上划线”和“穿过文本的线”的装饰。

p {
  text-decoration: 值;
}



none          取消已经存在的任何文本装饰；
underline     文本下划线；
overline      文本上划线；
line-through  穿过文本的线。 

注意：text-decoration 是一个缩写形式，它由 text-decoration-line, text-decoration-style
和 text-decoration-color 构成。因此，咱们在实际工做中能够使用这些属性值的组合来实现一些效果。
复制代码

1.3 给文本加些“阴影”

text-shadow 属性用于给文本加些“阴影”。

p {
  text-shadow: 值 ① 值 ② 值 ③ 值 ④;
}
复制代码

这里的“值”比较特别，它须要 4 个独立的值来定义：

• 值 ①，指定阴影的基础“颜色”；

• 值 ②，指定阴影与原始文本的水平偏移“距离”，这个值必须指定。距离的长度能够使用大多数的 CSS 单位，但实际工做中用 px 最为合适。正长度值向右偏移，负长度值向左偏移。

• 值 ③，指定阴影与原始文本的垂直偏移“距离”，这个值也必须指定。正长度值向下偏移，负长度值向上偏移。

• 值 ④，指定阴影的“模糊半径”。更高的值意味着阴影分散得更普遍。这个值非必须指定，若是不指定此值，则默认为 0，即没有模糊。

💡例如：

p {
  text-shadow: green 5px 5px 4px;
}
复制代码

下一篇咱们继续讲解“文本属性”其余知识点。

祝好，qdywxs ♥ you！