10年大咖带你学CSS经典入门视频课程02

**CSS 基础进阶：从字体到背景的视觉魔法**

在前一堂课中，我们初识了 CSS 的语法结构与选择器基础，搭建起了网页样式的框架。而本节课“CSS经典入门视频课程 02”，将带领你深入探索网页中最直观、最核心的视觉修饰领域——字体属性、文本排版与背景处理。这不仅是美化网页的必经之路，更是构建专业视觉效果的地基。

**一、精雕细琢：字体属性的全方位掌控**

课程的前半部分聚焦于“字体”，这是用户阅读网页内容的第一触点。我们将系统学习如何精准定义文字的外观。首先从基础入手，掌握`font-family`（字体名称）与`font-size`（字体大小）的配合，理解像素（px）、相对单位（em/rem）在实际项目中的选用逻辑。接着，深入探讨`font-weight`（粗细）与`font-style`（样式），让文字或刚劲有力，或优雅倾斜，以适应不同的设计语境。此外，`line-height`（行高）作为提升阅读体验的关键参数，也将被重点讲解，帮助你避免文字拥挤或疏离。

为了简化代码书写，课程特别介绍了`font`复合属性，它允许你在一行声明中同时设置字体族、大小、粗细等核心样式，既高效又易于维护。在颜色方面，我们将解析`color`属性的三种常用值：十六进制（如#FF0000）、RGB 模型以及英文单词命名法，让你能灵活调配出网页所需的每一抹色彩。最后，细节决定成败，我们将学习如何控制英文字母的大小写转换（`text-transform`）以及添加下划线、删除线等文字修饰效果，并通过一个小练习巩固上述知识点，确保你能熟练运用这些属性。

**二、层次分明：文本与背景的协同布局**

进入后半段，课程的视野从单个字符扩展至整个文本块及页面背景。在“文本属性”环节，你将学会使用`text-align`、`text-indent`（首行缩进）以及`letter-spacing`（字间距）来优化段落的可读性与呼吸感，让排版更具专业编辑的气质。

随后，我们将攻克“背景属性”这一难点。除了基础的`background-color`，课程将详细拆解`background-image`、`background-repeat`（重复方式）以及核心的`background-position`（定位）。你将对坐标系有更深的理解，掌握如何通过百分比或具体数值将背景图精准放置在页面的任意角落。特别值得一提的是“图片精灵（Sprite）”技术，这是一种通过单张雪碧图结合精确定位来优化网页加载性能的经典技巧，对于追求极致性能的前端开发至关重要。

通过这 10 个章节的系统学习，你将不再是代码的搬运工，而是能够驾驭视觉语言的 designers。请跟随大咖的脚步，一步一个脚印，将这些属性内化为本能，为你后续的盒模型学习与页面整体布局打下坚实基础。