CSS 入门完全指南：从“为什么需要 CSS“到三种引入方式与优先级

如果说 HTML 是网页的骨架（结构），那 CSS 就是网页的皮肤与外衣（表现）。没有 CSS 的页面能"用"，但不"好看"；有了 CSS，页面才能真正称为设计。

一、为什么需要 CSS？

早期只靠 HTML 写页面，最大的问题是：

HTML 天生职责是搭结构（标题、段落、列表、表单……），不是负责"美"的；
即便用标签自带的属性（如 align、bgcolor等），能做的也非常有限，而且写法混乱、维护困难。

CSS（Cascading Style Sheets，层叠样式表）的出现，就是为了把「内容与表现分离」——HTML 专心管内容，CSS 专心管颜值。

一句话总结：

角色	职责
HTML	页面结构 / 内容组成
CSS	页面表现 / 样式（颜色、间距、字体、布局…）
JS	行为 / 交互

二、CSS 是什么？核心概念一览

2.1 CSS 的概念

CSS = 层叠样式表（级联样式表）
"层叠"的意思是：同一个元素可以被多种方式设置样式，这些样式会按规则"叠"在一起，最终计算出一个结果。
CSS 代码通常写在 .css文件中（也可以通过其他方式嵌入到 HTML 里，后面讲）。

2.2 CSS 基本语法

CSS 有两种最常见的写法语境，但本质规则一致：

① 单条声明式（常见于行内）

属性: 属性值; 属性: 属性值;

② 选择器 + 声明块（这才是 CSS 的主战场）

选择器 {
    属性: 属性值;
    属性: 属性值;
    /* … */
}

🔑 选择器的作用：选中你要设置样式的元素。（后续文章会系统讲 ID / class / 标签 / 后代 / 伪类等选择器，这里先建立直觉）

.box {
    width: 200px;
    height: 200px;
    background-color: red;
}

2.3 CSS 的三大特性（非常重要）

特性	通俗解释
继承性	祖先元素的一些样式，后代元素可以"继承下来"（不是所有样式都能继承）
层叠性	同一个元素可以被多处样式影响，最终会"叠"成一个结果
优先级	当多处样式冲突时，谁说了算？优先级高的胜出；如果优先级相同，则后面的覆盖前面的

这三个特性贯穿整个 CSS 学习过程，后面讲引入方式和优先级时你会更直观感受到。

三、CSS 的三种引入方式（重点）

CSS 的"引入方式"＝ CSS 代码写在哪、怎么挂到 HTML 上。一共三种：

引入方式	别称	推荐度
① 行内样式	内联样式	❌ 不推荐
② 内部样式	style 标签写法	✅ 适合 demo / 单页
③ 外部样式	.css+ link	✅✅✅ 工作中首选

3.1 行内样式（Inline Style）

写法：直接在元素的开始标签上写 style="..."

<p style="background-color:red; font-size:20px;">
    我是段落
</p>

<div style="height:200px; background-color:red;"></div>
<div style="width:200px; height:200px; background-color:orange;"></div>

✅ 优点

直观、好理解：“这个标签长这样”

❌ 致命缺点

复用性几乎为零（只能给这一个标签用）
HTML 与 CSS 强耦合，后期维护很痛苦
优先级太高，容易把后期样式体系搞乱

👉 结论：行内样式不建议在项目里用，只在临时调试或极端场景下偶尔出现。

3.2 内部样式（Internal Style）

写法：在 <head>里放一个 <style>标签，在里面写 CSS。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>内部样式</title>

    <style>
        /* 给 class="box" 的元素统一设置样式 */
        .box {
            width: 200px;
            height: 200px;
            background-color: red;
        }
    </style>
</head>

<body>
    <div class="box">div1</div>
    <div class="box">div2</div>
    <p class="box">段落</p>
</body>
</html>

💡 小补充：class可在同一页面多次使用；id理论上应唯一（所以选元素时更常用 class）。

✅ 优点

至少实现了"一处样式 → 多处复用"
适合学习阶段 / 单页 Demo

❌ 不足

CSS 仍然"粘"在这个 HTML 文件里，别的页面用不到
项目一大，会越来越难管理

3.3 外部样式（External Style）⭐ 最推荐

写法分两步：

Step 1：新建 .css文件（真正独立）

/* style.css */
.box {
    width: 200px;
    height: 200px;
    background-color: palegoldenrod;
}

Step 2：HTML 里用 link引入

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

✅ 优点（这也是工作中几乎只用它的原因）

HTML 与 CSS 真正分离
一个 CSS 文件可以被无数页面复用
项目越大越香，维护成本最低

四、三种引入方式的优先级（关键结论）

当你用多种方式给"同一个元素"设置样式时，问题就变成了：谁生效？

实验结论可以直接记住：

情况	谁生效
行内 vs 内部 vs 外部	行内样式优先级最高（style=""很难被覆盖）
内部 vs 外部	优先级相同，谁在 HTML 里后出现，谁生效（从上到下解析）

一句话记忆版：

行内最强；内部/外部同权重，后来者居上。

这也是为什么：
一旦项目进入正轨，就要克制使用行内样式——它会把你的样式优先级秩序"打穿"。

五、常见新手踩坑提醒

① width/height的单位问题

width: 200px;   /* ✅ 在 CSS 里单位不能省 */

而在某些 HTML 属性（如 <img width="200">）里单位是可选的，但那是"旧时代的 HTML 写法"——在 CSS 里一定要写单位（px、%、rem……）。

② background-color≠ bgcolor

background-color: red; /* ✅ 正确 */
/* bgcolor 是老旧 HTML 属性，别混用 */

③ 块元素默认行为（你可能已经观察到）

块级元素（div / p / h1…）有个默认性格：

独占一整行
宽度默认拉伸到父元素 100%
高度默认由内容撑开
垂直排列

想让它们横着排，通常需要借助 float（老方案）或更现代的 flex（后面再系统学）。

六、link标签的另一个冷门用途：网页图标 favicon

除了引入 CSS，<link>还能干一件事——设置浏览器标签页上的那个小图标：

<link rel="icon" href="favicon.ico">

你可以把它放在 <head>里：

<head>
    <link rel="stylesheet" href="./css/style.css">
    <link rel="icon" href="./images/logo.ico">
</head>

七、小结速记卡

HTML = 结构（建骨架）
CSS = 表现（化妆穿衣）

CSS 语法：
选择器 { 属性: 值; }

三种引入方式：

行内 style="" ❌ 不推荐
内部 <style>…</style> ✅ 学习/demo 可用
外部 .css + <link> ✅✅✅ 生产首选

优先级铁律：
行内 > 内部 ≈ 外部（同权重后写赢）