主题
CSS 基础（一）
本页对应 CSS 基础，共 7 段视频，约 1 小时 22 分。
学习目标
- 能说明 CSS 美化网页的作用，并按“选择器 { 属性: 值; }”语法在
style标签中完成文字颜色、字号等基础样式设置。 - 能区分内部样式表、外部样式表和行内样式表三种 CSS 引入方式，正确使用
link引入外部 CSS 文件，并说出各自适用场景。 - 能使用标签选择器为页面中所有同名标签统一设置样式，并通过浏览器刷新验证生效结果。
- 能定义类选择器（
.类名）并通过class调用，完成指定标签的差异化样式设置；能为一个标签添加多个类名并用空格分隔。 - 能识别并书写 id 选择器（
#id）和通配符选择器（*），说明 id 的唯一性要求及通配符选择所有标签的作用。 - 能按“先大后小、先画盒子再填内容”的思路分析简单页面结构，并区分装饰性背景图片与产品/常换内容插入图片的使用场景。
知识点
CSS 是什么：让 HTML 从“能看”到“好看”
为什么需要：只写 HTML 时，页面能显示文字、图片、链接，但链接颜色、下划线、列表小点等样式不好改，页面也不够美观。转写稿里用“化妆师”“美颜”作比喻：内容还是那些内容，CSS 让页面变得更漂亮。
怎么想：先记住 CSS 的中文名和用途。层叠样式表（Cascading Style Sheets，缩写为 CSS）是一种样式表语言，用来描述 HTML 文档的呈现，也就是美化内容。学习初期不必纠结“层叠”二字，先理解它是给 HTML 做样式的。
怎么做：把 HTML 结构和 CSS 样式分开写。转写稿强调：HTML 内容写到 body 里，样式写到 head 里的 style 中；以后改结构找 body，改样式找 style，这样不容易乱。
易错点：style 本质仍是 HTML 标签，只是浏览器遇到它时，会把里面的代码按 CSS 解析；不要把 style 当成“CSS 文件”。CSS 写到页面其他位置也可能生效，但不建议和结构混在一起写。
写在哪里：title 标签下方加 style 双标签
为什么需要：CSS 代码要有固定书写位置，才能让 HTML 找到并应用样式。
怎么想：本节笔记给出的位置很明确：title 标签下方添加 style 双标签，style 标签里面书写 CSS 代码。也就是先写 title，再写 <style> ... </style>。
怎么做：在 head 区域中，title 下方写 style 双标签；页面内容仍然写在 body 中。笔记代码如下，需保留：
html
<title>CSS 初体验</title>
<style>
/* 选择器 { } */
p {
/* CSS 属性 */
color: red;
}
</style>
<p>体验 CSS</p>易错点：不要把 CSS 规则直接写成正文内容；style 要成对出现；选择器 p 写在花括号外，属性和属性值写在花括号内。
基本语法：选择器 + 键值对
为什么需要：页面标签很多，不能“想改谁就随便写”，必须先选中目标标签，再设置样式。转写稿说，选择器的主要作用是查找或选择标签，选出来之后再修改样式。
怎么想：本例中 p 就是选择器，表示先选中页面中的 p 标签；花括号里写具体样式。color: red; 中，color 是属性名，red 是属性值。笔记提示：属性名和属性值成对出现 → 键值对。转写稿也把它讲成 key: value; 的形式：属性名和属性值之间用冒号隔开，最后用分号结束。
怎么做：先写选择器，再写一对花括号；花括号内写“属性名: 属性值;”。例如 p { color: red; } 表示把 p 标签的文字颜色改为红色。
易错点：不要把 red 拼成 read；不要漏掉冒号和分号；选择器写标签名时不要加尖括号，写 p，不是 <p>；本例虽然只有一个 p，但标签选择器会选中页面中所有同名 p 标签，这一点要在后续练习中留意。
动手体验与调试过程
为什么需要：只看语法容易“以为会了”，实际写一遍才能发现位置、拼写、标点等问题。
怎么想：按“先结构、后样式”的顺序做：先在 body 写一个 p，再在 title 下方写 style，用 p 选择器设置 color: red;。
怎么做：保存文件后刷新页面，观察 p 的文字是否变红。转写稿中的调试过程是：样式定义好后，下面的结构会随之变化；如果没有变化，就回头检查 style 是否写在 head 中、选择器是否匹配、color 和 red 是否拼写正确、冒号和分号是否遗漏，以及文件是否保存并刷新。
易错点：不要因为“写进去没反应”就继续堆代码，应先按上述顺序排查。还要注意：style 是 HTML 标签，里面的内容才是 CSS；HTML 与 CSS 分工写清楚，后面改代码才不会乱。
提示：属性名和属性值成对出现 → 键值对。
本节目标：先搞清楚 CSS 写在哪里
这一节解决一个很基础但很关键的问题：CSS 代码到底可以写在哪里？按书写位置，常见有三种方式：内部样式表、外部样式表、行内样式。它们不是谁绝对替代谁，而是使用场景不同：学习阶段常用内部样式表，方便上面看样式、下面看结构；开发中样式多时常用外部样式表；行内样式则适合少量样式，并常配合 JavaScript 使用。
内部样式表：学习时最方便对照
为什么需要：初学阶段，我们希望写一点 CSS 就能马上看到效果，并且能同时看到 HTML 结构和 CSS 样式，方便对比、修改和调试。
怎么想：CSS 是样式，HTML 是结构。虽然 CSS 写到页面某些位置也可能生效，但最好把结构和样式分开看：HTML 内容写在 body 里，CSS 写在 head 里的 style 标签中。
怎么做：在 HTML 的 head 区域写 style 标签，CSS 代码放在里面。例如：
html
<style>
p {
color: red;
}
</style>注意 style 本身仍是 HTML 标签，只是这个标签比较特殊，里面的代码会按 CSS 解析。
易错点：不要把 CSS 规则直接裸写在 body 里；也不要把“内部样式表”理解成 CSS 文件，它仍然写在当前 HTML 页面中。学习阶段用内部样式表，是因为改起来直观，不是因为它适合所有正式项目。
外部样式表：开发中样式多时使用
为什么需要：当 CSS 可能有上百上千行时，如果全塞在 HTML 的 style 标签里，光翻样式就要翻很久，结构和样式混在一起也不好维护。
怎么想：把 CSS 单独放到一个 .css 文件中，HTML 需要时再把它“连接”进来。外部是相对于 HTML 文件来说的，CSS 文件放在 HTML 文件外边。
怎么做：先新建 HTML 文件，再新建 my.css。CSS 文件里不需要再写 style 标签，直接写规则，例如 p { color: red; }。然后在 HTML 中用 link 引入：
html
<link rel="stylesheet" href="./my.css">调试时很容易遇到“CSS 写了但页面没变红”的情况：HTML 和 CSS 是两个独立文件，不建立联系就不会生效。此时检查是否加了 link，rel 是否为 stylesheet，href 路径是否指向正确的 CSS 文件。
易错点：.css 后缀不能乱写；CSS 文件里不要再套 style 标签；href 路径写错是常见不生效原因。开发中外部样式表更常用，因为样式多时便于维护。
行内样式：少量样式、配合 JavaScript
为什么需要：有时只想给某一个标签临时改一点样式，或者后续由 JavaScript 操作某个标签的样式，这时可以直接写在标签上。
怎么想：行内样式的作用范围就是当前这个标签，写法是把 CSS 写进标签的 style 属性值里。
怎么做：在标签上写 style，里面用“属性名: 属性值;”的形式，例如：
html
<div style="color: red; font-size:20px;">这是 div 标签</div>易错点：行内样式不适合写很多，写多了会横着排很长，阅读和维护都麻烦；它更适合少量样式，通常配合 JavaScript 使用。实际工作中外部样式表更常见，但当前学习阶段内部样式表用得多，因为方便对照结构和样式。
小结：三种方式怎么选
内部样式表写在 style 标签里，适合学习和快速对照；外部样式表写在独立 .css 文件中，通过 link 引入，适合开发中样式较多的场景；行内样式写在标签的 style 属性里，适合少量样式并配合 JavaScript。先记住一句话：HTML 管结构，CSS 管样式；样式多走外部，学习对照用内部，少量临时用行内。
课件图示（PPTX）
代码示例
示例一：CSS 初体验 + 标签选择器（内部样式表）
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>CSS 初体验</title>
<!-- 样式写在 title 下方（head 里），结构写在 body 里，做隔离 -->
<style>
/* 选择器 { 属性名: 属性值; } */
p {
color: red;
}
div {
color: pink;
}
</style>
</head>
<body>
<p>体验 CSS</p>
<p>体验 CSS</p>
<div>我是 DIV</div>
<div>我是 DIV</div>
<div>我是 DIV</div>
</body>
</html>要点解释：
style本质仍是 HTML 标签，位置放在title下方、</head>之前，里面的代码才按 CSS 解析。- 写法是键值对：
color是属性名，red是属性值，中间冒号、结尾分号，大括号包裹。 - 标签选择器按标签名查找，
p会选中页面中所有p，一改全改，无法只改其中一个。 - 易错点：漏写结尾分号；把样式写到
body里和结构混在一起；写不存在的标签名（如dnve）不会生效。
示例二：类选择器 + 多类名
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>类选择器与多类名</title>
<style>
/* 定义：类名前必须加点 */
.red {
color: red;
}
.fz {
font-size: 28px;
}
</style>
</head>
<body>
<!-- 调用：class 里写类名，不加点；多个类名用空格隔开 -->
<p class="red fz">第一个 P：红色 + 28px</p>
<p class="red">第二个 P：只有红色</p>
<p>第三个 P：默认样式</p>
</body>
</html>要点解释：
- 类选择器分两步：上面
.red { }定义，下面class="red"调用；不调用就不会生效。 - 定义时必须加点（点相当于 class 的标志），调用时千万不要加点。
- 一个标签可写多个类名，用空格隔开，
class="red fz"同时拥有红色和字号两种样式。 - 易错点：类名不能用纯数字（
.1会报错）；尽量不用中文（可能乱码）；font-size后面必须带单位px。
示例三：CSS 三种引入方式
html
<!-- 文件一：index.html -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>CSS 引入方式</title>
<!-- 外部样式表：开发使用，href 指向同级目录下的 my.css -->
<link rel="stylesheet" href="./my.css">
<!-- 内部样式表：学习使用 -->
<style>
p {
color: red;
}
</style>
</head>
<body>
<p>内部样式表改红</p>
<!-- 行内样式：配合 JavaScript 使用，写在标签的 style 属性里 -->
<div style="color: red; font-size: 20px;">这是 div 标签</div>
</body>
</html>css
/* 文件二：my.css（与 index.html 同级，后缀必须是 .css，里面直接写 CSS，不再加 style 标签） */
h1 {
color: blue;
}要点解释：
- 外部样式表：CSS 写在单独的
.css文件里，HTML 用link引入，rel="stylesheet"表示样式表，href写路径；开发中样式多时首选。 - 内部样式表：写在
style双标签里，学习阶段常用，便于上面样式、下面结构对照。 - 行内样式：直接写在标签
style属性里，只适合少量样式，写多了会很长、很难看。 - 易错点：
.css文件里再加style标签是错的；link忘了写或路径写错，样式完全不生效；行内多个样式之间也要用分号隔开。
常见错误
1. 样式代码没反应，页面顶部却多出一行 p { color: red; }
- 现象：刷新后文字没变红，反而在页面最上方看到这串代码。
- 原因：直接把 CSS 写进了
head或body，漏掉style双标签，浏览器把这段当成普通文本渲染。 - 修法：
title下方补上<style> … </style>，所有 CSS 声明写在这对标签内部。
2. 外部样式表引入后完全不生效，控制台也没有报错
- 现象：
my.css里写了样式，HTML 里也写了link，但页面毫无变化。 - 原因：多为三种情况——
link写在了body末尾、rel属性漏写或拼错、href路径写错（相对路径的./或文件名大小写）。 - 修法：
link放到head内，写成<link rel="stylesheet" href="./my.css">，逐个核对rel拼写与文件真实路径。
3. 在 .css 文件里又写了一遍 <style> 标签
- 现象：CSS 文件里的第一条规则失效，或整个文件样式全部不生效。
- 原因：
.css是纯 CSS 文件，只认选择器和声明，不认 HTML 标签；<style>只属于 HTML 页面。 - 修法：删掉
style双标签，.css文件里直接从p { … }开始写。
4. 行内样式里写了选择器：style="p{color:red}"
- 现象：该标签样式不变，
style属性整串被忽略。 - 原因：行内样式写在
style属性值里，只接受"属性名: 属性值"的声明，不接受选择器和大括号。 - 修法：改成
style="color: red; font-size: 20px;"，只保留声明本身。
5. 声明写了却不生效，代码看着"没错"
- 现象：
color = red、color：red、font-size: 20这类写法页面无变化。 - 原因：属性与值之间必须用英文冒号，不能用等号或中文冒号；部分属性（如
font-size）必须带单位，只写数字无效。 - 修法：统一用英文
:分隔、英文;结尾，需要单位的属性补上px。
6. 改完 CSS 保存了，浏览器里还是旧样子
- 现象：代码明明改了，页面还是上一次的效果，误以为写错。
- 原因：浏览器缓存了旧的
.css文件，尤其外部样式表最容易出现。 - 修法：强制刷新（Ctrl + F5），或确认编辑器和浏览器打开的是同一个文件路径。
练习
1. 内部样式表起步 新建 HTML 文件，在 title 下方写 style，把页面中所有 p 的文字改成红色。要求：结构在 body、样式在 head，两者不混写。
2. 外部样式表引入 新建 my.css，在其中让 div 的文字变蓝、字号 20px；再新建 HTML 文件，用 link 把它引入。故意把 href 写错一次，观察现象后再改回来，说清楚"不生效"是路径问题还是语法问题。
3. 行内样式 给一个按钮加行内样式：文字白色、背景红色、字号 16px。写完后数一数这一行有多长，判断这个场景该不该用行内样式。
4. 找错并修正 下面这段代码有 4 处问题，找出来并改对：
html
<body>
<link rel="stylesheet" href="my.css">
<p style="p{color:red}">文字</p>
</body>（提示：从 link 的位置与属性、行内样式的写法、以及是否需要 style 标签三个方向想。）
5. 选型判断 三个场景，分别选一种引入方式并说明理由： ① 实际中跟着做一个 20 行的小 demo； ② 一个包含 8 个页面、共用同一套样式的项目； ③ 用 JS 点击按钮后动态改变某个元素的颜色。
原视频对照
| # | 视频 | 时长 |
|---|---|---|
| 1 | 复习反馈和今日内容 | 26:31 |
| 2 | css体验 | 10:14 |
| 3 | css引入方式 | 09:27 |
| 4 | 标签选择器 | 11:09 |
| 5 | 类选择器 | 09:52 |
| 6 | 多类名写法 | 05:59 |
| 7 | id选择器和通配符选择器 | 09:22 |
小结
- 位置决定归属：结构归
body、样式归head，这条分界线一旦模糊，后面找 bug 的成本会成倍上升。 style是 HTML 标签，不是 CSS 语法——它只是装 CSS 的容器；判断一段代码属于谁，看它有没有尖括号就够了。- 内部样式表适合"看得见的对照"：结构和样式在同一屏，改一处立刻能比对，所以学习阶段用它效率最高。
- 外部样式表是工程化的默认答案，理由不在语法，而在可复用、可缓存、可多人协作——一个
.css供多页共用。 - 行内样式优先级最高，也最难维护：它的合理归宿只有一个，就是让程序（JS）去改，而不是让人手写。
- 三种引入方式不是"谁更高级"，而是**"谁在改这份样式"**：人改选外部、程序改选行内、临时验证选内部。
- 样式不生效时，排查顺序是固定的：先看引入路径，再看选择器是否选中，最后才怀疑属性拼写——按这个顺序能省掉大半时间。
- 每一条声明都是
键: 值;，分号不是可选项，它是下一条声明的边界，漏一个分号可能连带后面几条一起失效。