CSS 基础

这一课你将能做到

1. 说清楚 CSS 在 Web 中的位置和作用
2. 写出第一条 CSS 规则并看到效果
3. 用三种方式把 CSS 引入 HTML，知道各自适用场景
4. 理解「层叠」和「优先级」的基本规则

为什么要学

HTML 决定了网页「有什么」，CSS 决定了网页「长什么样」。没有 CSS，所有网页都是黑字白底、靠左排列，长得跟 1995 年一样。学会了 CSS，你才能把设计稿变成真实的网页。

人话：HTML 是盖房子的毛坯，CSS 是装修——刷什么颜色的墙、铺什么地板、灯挂多高，全靠 CSS。

先建立图像

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>CSS 第一印象</title>
    <style>
        h1 { color: tomato; text-align: center; }
        p  { color: #555; font-size: 18px; }
    </style>
</head>
<body>
    <h1>我是红色大标题</h1>
    <p>我是灰色段落，字号 18 像素。</p>
</body>
</html>

浏览器渲染后：

   我是红色大标题     ← 番茄红、居中
我是灰色段落，字号 18 像素。

跟着做

步骤 1：认识 CSS 语法

CSS 由「规则」组成，每条规则长这样：

选择器 {
    属性: 值;
    属性: 值;
}

例如：

p {
    color: blue;      /* 文字颜色 */
    font-size: 16px;  /* 字号 */
}

p 是选择器（选中所有段落），大括号里是声明块，每行一个「属性: 值;」。

步骤 2：三种引入方式

方式一：内联样式——写在标签的 style 属性里

<p style="color: red;">只有这一段是红色</p>

方式二：内部样式表——写在 <head> 的 <style> 标签里

<head>
    <style>
        p { color: green; }
    </style>
</head>

方式三：外部样式表——独立 .css 文件，用 <link> 引入（推荐）

style.css：

p { color: blue; }

index.html：

<head>
    <link rel="stylesheet" href="style.css">
</head>

步骤 3：动手比较三种方式

新建 demo.html，输入：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>三种引入方式</title>
    <style>
        .internal { color: green; }
    </style>
</head>
<body>
    <p style="color: red;">内联：红色</p>
    <p class="internal">内部：绿色</p>
    <p>无样式：默认黑色</p>
</body>
</html>

保存后用浏览器打开，观察三段文字颜色差异。

步骤 4：优先级初步

同一个元素被多条规则命中时，谁说了算？粗略口诀：

内联样式 > ID 选择器 > 类选择器 > 元素选择器 > 通配符 *

试试这段：

<style>
    p        { color: black; }
    .blue    { color: blue; }
    #red     { color: red; }
</style>
<p id="red" class="blue">我是什么颜色？</p>

答案是红色，因为 ID 选择器优先级最高。

讲清楚要点

1. CSS 是声明式语言：你告诉浏览器「我要什么效果」，不用管「怎么实现」。
2. 属性大小写不敏感，但全小写是规范：COLOR 也能跑，但别这么写。
3. 分号不能省：每条声明结尾必须 ;，最后一条可以省但建议加上。
4. 优先级会被 !important 打破：color: red !important; 能压过内联样式，但属于核弹，慎用。
5. 外部样式表是工程标配：让 HTML 干净、CSS 可复用、可缓存。

你可能会懵的地方

• CSS 是编程语言吗？ 不是，它是样式表语言，没有变量、循环（现代 CSS 有变量，但定位不同）。

• 内联样式为什么不推荐？ 无法复用、无法被缓存、优先级太高难覆盖、改一处要改 N 个文件。

• 优先级到底怎么算？ 可以看成一个四位数 (inline, id, class, element)，从左到右比较。例如 (0,1,0,0) 大于 (0,0,10,10)。

• 「层叠」是什么意思？ 同一个元素可能命中多条规则，浏览器按「优先级 + 出现顺序」合并出最终样式，这个机制叫 Cascade（层叠），CSS 的 C 就是它。

• 不加分号会怎样？ 浏览器会把下一行当作当前声明的延续，整条规则失效或行为怪异。

错法对照

错法	问题	正解
p { color red; }	缺冒号	color: red;
p { color: red } 多条声明缺分号	后续声明被吞	每条结尾加 ;
<link rel="stylesheet" src="a.css">	属性写错	用 href，不是 src
style.css 里写 <style> 标签	外部 CSS 不能含 HTML	外部文件只写规则
用 !important 解决一切	优先级失控	提高选择器特异性

卡点急救

1. 样式完全不生效：F12 打开 DevTools → Elements → 看右侧 Styles 面板，规则是不是被划掉了？被划掉说明被更高优先级覆盖。
2. 改了 CSS 没变化：浏览器缓存，Ctrl+F5 强刷；或检查 <link> 的 href 路径是否正确（看 Network 面板有没有 404）。
3. 某些属性不生效：F12 Styles 面板里属性名前面有黄色警告图标，多半是值非法（如 color: redd）。

面试常问

• CSS 的层叠规则是什么？ 按优先级（origin + specificity）+ 出现顺序决定最终值。优先级相同，后定义的覆盖先定义的。

• 内联、内部、外部样式优先级？ 内联 > 内部和外部（看具体选择器特异性），同特异性下后写的覆盖先写的。

• !important 的问题？ 打破自然层叠，导致后续无法覆盖，调试困难；只在覆盖第三方组件等极端场景使用。

自测三问

1. 三种引入方式分别适合什么场景？
2. #a .b p 和 .a #b p 谁优先级高？为什么？
3. 为什么外部样式表是大型项目的标配？

小结一句话

CSS 用「选择器 + 声明」描述样式，通过层叠和优先级合并多条规则，工程上首选外部样式表。

延伸

• MDN CSS 基础
• 下一课：选择器，让你精准命中任何元素。