2.6 颜色、字体与文本样式

网页好不好看，文字的样式占了很大一部分。这一节把日常最常用的“文字相关”属性集中过一遍。学完它，加上前面的盒模型和布局，你就能把一个朴素页面调得相当像样了。

下面的实验是一个“文字样式调音台”，每个控件对应一个 CSS 属性，调一调看效果。

颜色：color 和 background

.title {
  color: #4f46e5;            /* 文字颜色 */
  background-color: #f1f5f9; /* 背景颜色 */
}

颜色有几种写法，常见的是：

• 颜色名：red、blue、tomato（简单但有限）。

• 十六进制：#4f46e5（最常用，前端最爱）。

• rgb / rgba：rgb(79, 70, 229)、rgba(0, 0, 0, 0.5)（rgba 的最后一位是透明度）。

字号、字重与字体

p {
  font-size: 16px;       /* 字号 */
  font-weight: bold;     /* 字重：normal / bold，或 100–900 */
  font-family: sans-serif; /* 字体族 */
  line-height: 1.6;      /* 行高，让段落更易读 */
}

• font-size：字的大小，常用 px。

• font-weight：粗细。normal（400）、bold（700），也可以直接写数字。

• font-family：字体。常写一串“备选列表”，浏览器从左往右挑第一个可用的：font-family: "Helvetica", Arial, sans-serif;。

• line-height：行与行之间的高度。正文用 1.5～1.8 通常更易读。

对齐与间距

h1 {
  text-align: center;     /* 文字对齐：left / center / right */
  letter-spacing: 0.05em; /* 字母间距 */
  text-decoration: underline; /* 下划线，none 可去掉链接默认下划线 */
}

本章小结

CSS 这一章，你学会了：

• 三种引入方式，推荐外部样式表。

• 选择器：标签、类、ID、后代。

• 伪类与伪元素：:hover、:nth-child、::before。

• 盒模型：content / padding / border / margin。

• Flexbox 布局：display: flex 加 justify-content / align-items。

• 文字样式：颜色、字号、字重、对齐。

现在你的页面既有结构（HTML）又有外观（CSS）了。但它还是“静态”的——点按钮没反应，数据不会变。下一章，JavaScript 登场，让网页真正“活”起来。