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

缺什么补什么：别让基础排版拖后腿

这门课解决的问题是：写页面时能看懂结构，但一到字体、文本、背景的具体排版就全靠猜，改一个行高连带着把整块布局挤乱。很多人卡在不清楚 font 复合属性的简写顺序，或者给背景图做定位时只会用 left、center 蒙混过关。课程没有去扯高大上的工程化概念，而是直接拿字体属性和背景属性开刀，把字号、粗细、行高、颜色值转换、字母大小写与文字修饰线这些最容易写乱的细节挨个理清。适合已经能写基础 HTML 结构、知道标签怎么嵌套，但动手写 CSS 时总要反复查文档、对属性值的优先级和默认行为没把握的转岗者或初学者。建议先看字体属性这一块，尤其是 font 复合属性和行高的几节，把文本排版的底层逻辑吃透，再往下推进背景属性和图片精灵。

配套练习：把属性值敲到肌肉记忆里

看视频时最忌讳只盯着屏幕觉得看懂了。资料里的每个属性讲解都对应着一段可以直接照着敲的代码，练习方式应该是：看完字体属性的几节后，立刻新建一个空白文件，不抄课件，尝试用纯 CSS 把一段纯文本的字号、粗细、行高和颜色调到与课件演示完全一致的效果。遇到行间距对不上、英文字母大小写转换失效的情况，再倒回去对照视频里的写法找原因。学到背景属性和背景定位时，重点练习坐标控制，自己拖动浏览器窗口观察背景图随容器变化的位置关系。图片精灵那部分不要只看，必须自己切一张包含多个小图标的合成图，用 background-position 精确抠出其中一个图标。这套练习的核心是建立对坐标偏移和属性简写的肌肉记忆，而不是停留在听过这个概念的层面。

学完能独立做什么：脱离框架手写基础视觉样式

看完这套资料并跟着练完，你应该能脱离任何 UI 框架的辅助，独立完成一个纯文本页面的视觉排版。具体来说，拿到一份设计稿，你能迅速判断该用哪种颜色值格式，知道行高该用绝对值还是比例值，能通过 background-position 精确控制背景图的显示区域，并且能利用图片精灵技术合并小图标以减少网络请求。检验学习成果的标准很简单：能不能在不查阅文档的情况下，一口气写出一段包含复合字体属性、带修饰线的文本，并给它的容器加上精准定位的背景图。如果中途卡壳，说明对应章节的练习还没到位，回头把字体简写顺序或背景坐标的偏移逻辑再补一遍。别假装什么都会，基础排版没吃透，后面写再复杂的交互也是摇摇欲坠。