(Ⅰ)转换文本大小写,给文本加上、下划线和阴影 | 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!

编辑于 2020-01-16

文章被以下专栏收录

    更多图文详解,请移步“公众号 | 前端一万小时”查看! 我依然固执地认为:在技术的学习上,一系列成体系的、不故意炫技却又干货满满且易读的实战性图文,比绝大多数纯视频教程效率更高、效果更好。