1.1 font 字体属性（重点）
1.1.1 基本作用
- 控制文字的：
- 字体大小
- 是否加粗
- 字体类型
- 字体风格（斜体等）
1.1.2 分开写（基础理解）
div {
font-style: normal; /* 风格：normal / italic /
font-weight: 700; / 加粗：400正常 / 700加粗 /
font-size: 35px; / 字体大小（必须带单位） /
font-family: ‘微软雅黑’; / 字体 */
}
- 1.1.2 关键点
font-size必须带单位（px）font-weight：- 400 → 正常
- 700 → 加粗
1.1.3 连写（重点）
div {
font: normal 700 35px ‘微软雅黑’;
}
-
1.1.3 结构顺序（必须记住）
风格 → 加粗 → 字体大小 → 字体
1.1.4 注意事项（高频坑）
- 1.1.4.1 顺序不能乱
- 1.1.4.2 font-size 和 font-family 必须有
- 1.1.4.3 字体必须系统存在或已引入
1.1.5 实战建议
- 开发中常用连写（更简洁）
- 初学建议先分开写，理解更清晰
1.2 text-align 对齐属性
1.2.1 基本作用
👉 控制内容在容器中的水平对齐方式
1.2.2 常用取值
text-align: left; /* 左对齐（默认） /
text-align: center; / 居中 /
text-align: right; / 右对齐 */
1.2.3 示例
div {
text-align: center;
}
文字
span内容
👉 效果：
- 文字居中
- span居中
- 图片也居中
1.2.4 核心理解（很重要）
- text-align 作用在“父元素”上
- 控制的是“子内容的位置”
1.2.5 常见误区
- ❌ 不是让“盒子居中”
- ✅ 是让“内容居中”
1.3 综合示例（实战）
好好学习，天天向上！
2. 本章核心总结（必须掌握）
2.1 两大核心属性
- font
- 控制文字“长什么样”
- text-align
- 控制内容“放在哪里”
2.2 必背知识点
-
2.2.1 font连写顺序
风格 → 加粗 → 字体大小 → 字体
-
2.2.2 font-weight
- 400：正常
- 700：加粗
-
2.2.3 text-align
- center：让内容居中（不是盒子）
2.3 实战理解（关键）
- 做标题 → 用 font 控制大小 + 加粗
- 做居中布局 → 用 text-align
2.4 你这一章的掌握标准
如果你能做到👇，说明已经掌握：
- 能手写 font 连写
- 知道 text-align 控制谁
- 能区分“文字居中”和“盒子居中”
3. 进阶补充（拉开差距）
3.1 为什么推荐 font 连写
- 更简洁
- 更接近企业写法
- 减少代码冗余
3.2 text-align 的本质
👉 本质是：
- 控制“行内内容”的对齐方式
- 包括：
- 文字
- span
- 图片（img）