• 说明：该文属于 大前端全栈架构白宝书专栏，目前阶段免费开放，购买任意白宝书体系化专栏可加入TFS-CLUB 私域社区。
• 福利：除了通过订阅"白宝书系列专栏"加入社区获取所有付费专栏的内容之外，还可以通过加入星荐官共赢计划 加入私域社区。
• 当前子专栏 基础入门三大核心篇 也是免费开放阶段。推荐他人订阅，可获取扣除平台费用后的35%收益。

• 作者：不渴望力量的哈士奇(哈哥)，十余年工作经验, 跨域学习者，从事过全栈研发、产品经理等工作，目前任某金融品类App负责人。
• 荣誉：2022年度博客之星Top4、博客专家认证、全栈领域优质创作者、新星计划导师，“星荐官共赢计划” 发起人。
• 现象级专栏《白宝书系列》作者，文章知识点浅显易懂且不失深度；TFS-CLUB社区创立者，旨在以“赋能 共赢”推动共建技术人成长共同体。

---

• 🏆 白宝书系列
  • 🏅 Python全栈白宝书
  • 🏅 产品思维训练白宝书
  • 🏅 全域运营实战白宝书
  • 🏅 大前端全栈架构白宝书

---

---

在前面的内容中，我们已经接触过一些文本的样式属性了，例如color，font-size等，下面我们就来集中详细学习一下这些文本的属性的使用。

⭐️ 常用文本样式属性

接下来，我们就正式的进入到 CSS3 的常用文本样式属性的学习阶段吧。

color属性：color属性用来设置文本内容的颜色（前景色）

🌟 color属性的十六进制表示法

在实际工作中，因为颜色是很多很多的，我们不可能把每一个颜色都用文字来描述，一般设计师给我们的UI设计图上会用十六进制来标注颜色。所以color属性的内容使用十六进制表示法来书写。例如：#fff000——代表黄色

---

---

• 一个光学三原色的小知识：
  • 光学三原色为红、绿、蓝
  • 三原色每种颜色的分量可以用0~255之间的数字表示，十六进制中ff就是十进制中的255,
  • 例如：#ff0000代表红色的分量为255，绿色的分量为0，蓝色的分量为零；那么#ff0000就是个纯红色。
  • 在css书写时，#ff可以简写成#f,即两个重复的可以简写成一个。由此，上面的纯红色可以简写成 #f00。

我们需要记住一些常用的颜色，例如 黑色#000，白色#fff，常见的灰色有 #ccc、#333、#2f2f2f 等。

🌟 color属性的rgb()表示法

rgb就是red，green，blue的缩写，代表红绿蓝。使用起来非常简单，举个例子：

rgb(255, 0, 0)就等价于#ff0000

🌟 color属性的rgba()表示法

rgba()比rgb多了一个属性a，代表透明度，透明度的值介于0~1之间。0代表纯透明，1代表纯实心。举个例子：

rgba(255, 0, 0, .65)代表透明度0.65

注意：rgba()表示法从IE9才开始兼容。

🌟 font-size属性

font-size属性用来设置字号，单位通常为px（像素），还有em、rem单位放在后面介绍。

• 网页文字正文字号通常为16px，浏览器最小支持10px字号。字号通常都是双数

🌟 font-weight属性

font-weight属性用来设置字体的粗细程度，通常就用normal和bold两个值。

示例	描述
font-weight: normal;	正常粗细，与400等值
font-weight: bold;	加粗，与700等值
font-weight: lighter;	更细，大多数中文字体不支持
font-weight: bolder;	更粗，大多数中文字体不支持

疑问：什么情况下需要使用到font-weight: normal呢？不是一般都是正常粗细吗？

答：h系列标签默认时加粗的，如果需要让h系列标签正常粗细，就需要使用到font-weight: normal

🌟 font-style属性

font-style属性用来设置字体的倾斜

示例	描述
font-style: normal;	取消倾斜，比如把天生倾斜的i、em等标签设置为不倾斜
font-style: italic;	设置为倾斜字体（常用）
font-style: oblique;	设置为倾斜字体（用常规字体模拟，不常用）

🌟 text-decoration属性

text-decoration属性用来设置文本的修饰线（下划线、删除线）

示例	描述
text-decoration: none;	取消修饰线，比如取消超级链接的下划线。
text-decoration: underline;	下划线
text-decoration: line-through;	删除线

下面来做些简单的练习：

---

---