01CSS 是什么

CSS（层叠样式表）是专门负责网页「长相」的语言：HTML 搭结构，CSS 做装修。 本课认识它的语法长相、生效过程，以及名字里「层叠」「继承」两个关键词的真正含义。

约 15 分钟 6 个动手实验 概念奠基课

一、CSS 是什么：给毛坯房做装修

HTML 交付的是一栋毛坯房：墙是墙、门是门，能用，但灰头土脸—— 黑字白底、默认字体、没有间距。CSS 就是装修队： 刷墙（背景）、挑灯（颜色）、铺地板（边框）、摆家具（间距）。 一句话记住分工：

技术负责什么毛坯房类比
HTML结构与内容：标题、段落、图片、按钮墙体、门窗、房间划分
CSS外观：颜色、字体、间距、边框、布局装修：刷漆、地板、窗帘、家具
JavaScript行为：点击响应、数据交互智能电器：开灯、门铃、报警

同一个 HTML，加不加 CSS，观感天差地别。下面的实验台左边是代码、右边是实时渲染结果——直接改代码，右侧立刻变化：

装修前 vs 装修后：把 border-radius 改成 40px，圆角立刻变大
右侧预览就是「HTML + 代码里的 CSS」渲染出的真实页面。整个实验台的代码都可以直接修改，改错也不怕，点右上「重置」即可还原。

二、语法解剖：一条规则的五脏六腑

CSS 的语法只有一种句式：选择器 { 属性: 值; }。 选择器回答「给谁穿」，声明回答「穿什么」。 先把下面这条规则拆开看清楚：

p {
color: #B3472E; ← 一条声明
font-size: 18px;
}
选择器：选中谁 属性：改什么 值：改成什么样
一条规则的术语表：名字记住了，后面章节才不迷路
术语是什么例子
规则（rule）一整段：选择器 + 声明块上面全部内容
选择器（selector）花括号前的部分，决定样式给谁p
声明（declaration）一条「属性: 值;」，以分号结尾color: #B3472E;
属性（property）要修改的样式维度color
值（value）该维度改成什么样#B3472E

把这条规则放进实验台，让它真的生效——改改字号和颜色试试：

元素选择器 p 的效果：选中页面上所有段落
口诀：选择器挑人，属性定项目，值定结果，分号收尾。花括号、冒号、分号，一个都不能少。

三、注释与书写规范

CSS 的注释只有一种写法：/* 注释内容 */，可以独占一行、跟在声明后、也能跨多行。 注释是给「三个月后的自己」看的，写清「为什么这么写」比「写了什么」更有价值。

几条业界通行的书写规范，从第一天就养成：

  • 每条声明都以分号结尾——包括最后一条，删改时不容易出错
  • 属性名一律小写，冒号后面加一个空格
  • 一条声明占一行，块内缩进 4 个空格，规则之间空一行
  • 颜色值统一小写十六进制（#b3472e 或 #B3472E，团队统一即可）
经典事故：忘写分号。浏览器会把「出错的这一条 + 下一条」一起丢弃，而且不报任何错——页面某处样式突然少了，先检查分号。

四、规则是如何生效的

写下的 CSS 并不会「原地显灵」，浏览器在幕后走了一条流水线。 大致五个环节，了解它们，以后排查「样式怎么没生效」就有章法：

1. 解析 HTMLDOM 树把标签变成节点树
→
2. 解析 CSS样式表读取行内 / 内部 / 外部样式
→
3. 匹配选择器每条规则找它管的元素
→
4. 计算层叠 + 继承算出每个元素的最终样式
→
5. 绘制渲染按计算结果画到屏幕上

其中第 3 步「匹配」最常出问题：选择器写错一个字母，规则就匹配不到任何元素， 样式无声无息地不生效。CSS 没有报错机制， 它只是安静地忽略看不懂的部分——这是它与 HTML 一样「宽容」、也比大多数语言更需要细心的地方。

排查口诀：样式没生效，先问三个问题——选择器拼对了吗？规则被更靠后 / 更高优先级的规则覆盖了吗？属性值本身合法吗？

五、层叠与继承：名字里的两个关键词

CSS 全称 Cascading Style Sheets，Cascading（层叠）是它的灵魂。 层叠：多条规则选中同一个元素的同一个属性时，必须决出胜负； 在来源与优先级都相同的前提下，写在后面的覆盖写在前面的——「后到的说了算」。

层叠：两条规则打架，后面的赢。试试改第一条的颜色——纹丝不动

继承则是「子承父业」：一部分属性（主要是文字类）会自动从父元素传给后代， 不需要每个子元素都写一遍。但盒模型类属性一律不继承，各归各。

继承：子级没写 color，却有了颜色；虚线边框则没有传下去
继承速查：文字类大多会继承，盒子类一律不继承
会继承（多是文字类）不继承（多是盒子类）
color、font-family、font-size、font-weight、line-height、text-align、letter-spacing、cursor border、padding、margin、background、width、height、display
继承的价值：在 body 上设一次字体和文字颜色，全页默认生效，个别地方再单独覆盖。这是「少写代码」的第一课。

六、第一个完整例子：样式化一张小卡片

把本课学到的概念串起来：用「选择器 + 声明 + 继承 + 层叠」的组合拳， 从零样式化一张活动卡片。下面的 CSS 每一行都加了注释，建议在编辑器里逐条改值感受效果。

第一张完整的小卡片：把 padding 改成 40px、边框改成 dashed 试试
动手练习：在上面实验台里改到 背景色、圆角、内边距、标签颜色 四处，并在预览里确认每一处都生效。

七、本课小结

  • CSS 负责外观，HTML 负责结构——毛坯房与装修的关系
  • 语法唯一句式：选择器 { 属性: 值; }，分号结尾，注释用 /* */
  • 浏览器流水线：解析 HTML → 解析 CSS → 匹配 → 计算（层叠 + 继承）→ 绘制
  • CSS 不报错：写错只会静默失效，排查靠「选择器、覆盖、合法性」三问
  • 层叠：同级冲突时后写的赢；继承：文字类属性自动传给后代，盒子类不传
  • 在 body 上统一设置字体与文字颜色，是利用继承减少重复代码的第一招
课后小实验：新建一个 HTML 文件，写两个段落和一个标题，只用一个 <style> 块：先让所有段落变成 18px 深棕色；再写第二条 p 规则把颜色改成土金色，验证「后者覆盖前者」；最后在 body 上设置字体，体会继承。把观察到的三次变化记在笔记里。