网硕互联帮助中心
本阶段核心目标：掌握CSS的核心运行逻辑、基础语法、3种引入方式，能让CSS成功作用于HTML元素，独立写出第一个可运行的CSS样式，理解“层叠样式表”的浅层含义，为后续选择器、布局学习打牢最底层基础。
学习核心方法：每学一个知识点，立刻手写3-5个小案例（比如学了文字样式，就写一个标题+段落的样式；学了选择器，就用不同选择器给同一个元素加样式），拒绝“眼会手不会”。
学完之后掌握：CSS的基本语法、引入方式、注释，知道CSS如何作用于HTML，能写简单的样式。
- CSS的核心作用：分离结构（HTML）和样式（CSS），理解“层叠”的初步含义（多个样式可作用于同一个元素）；
- 行内样式（style属性）：快速测试，不推荐开发使用；
- 内部样式（style标签）：小案例使用，适合单页面；
- 外部样式（link标签）：开发首选，实现HTML和CSS完全分离，重点掌握；
3. CSS注释：/* 注释内容 */，学会给代码加注释，提升可读性；
4. 第一个实战：给HTML页面的标题、段落、链接添加简单样式（文字颜色、大小、对齐）。
整体学习节奏：按「知识点讲解+即时实操+课后小练习」推进，每个知识点配套1-2个小实操，全程手写代码，拒绝只看不动手，单知识点耗时控制在10-20分钟，每天学习结束完成1个综合小案例。
课程前置说明
第1天：CSS核心认知 + 基础语法 + 2种核心引入方式
模块1：CSS是什么？核心作用&设计理念（10分钟，理解为主）
1.1 官方定义
CSS（Cascading Style Sheets，层叠样式表）是一种用来描述HTML文档样式的标记语言，并非编程语言，无逻辑判断、循环等功能，仅负责“样式设置”。
1.2 核心作用（3个核心，记死）
- 分离结构（HTML） 和样式（CSS）：HTML只写页面“有什么”（标题、段落、图片），CSS只写“长什么样”（颜色、大小、位置），便于后期维护（改样式不用动HTML）；
- 统一样式，批量复用：给多个HTML元素设置相同样式，只需写一次CSS代码（比如所有标题都设为红色）；
- 层叠扩展：多个CSS样式可同时作用于一个元素，按规则叠加/覆盖（比如先设文字红色，再设文字加粗，最终文字“红色+加粗”）。
1.3 为什么要学CSS？
没有CSS的HTML页面是“纯文字骨架”，杂乱无章；有CSS的HTML页面能实现视觉美化、合理布局，达到日常浏览的网页效果（比如百度、淘宝的视觉样式）。
即时思考
观察身边的网页（比如掘金），区分“哪些是HTML结构”（标题、文章列表、按钮），“哪些是CSS样式”（文字颜色、按钮大小、布局排列）。
模块2：CSS 基本语法（20分钟，重点记忆+实操，CSS的“造句规则”）
2.1 核心语法结构（唯一规则，必须记死，CSS所有代码都遵循此规则）
选择器 + 声明块，整体结构如下：
|
CSS |
2.2 语法三要素详解（结合实操理解，无抽象概念）
|
要素 |
作用 |
示例 |
注意事项 |
|
选择器 |
匹配要设置样式的HTML元素 |
div、.test、#box |
必须正确匹配，否则样式不生效 |
|
属性 |
要设置的样式类型 |
color（颜色）、font-size（字号） |
为CSS预定义关键字，不能自定义 |
|
值 |
样式的具体设置 |
red（红色）、24px（24像素） |
需匹配属性的取值规则（比如color属性可设red，不可设24px） |
2.3 核心语法规则（3个必守规则，踩坑重灾区）
2.4 即时实操：写第一个CSS基础语法代码（直接在style.css中编写）
步骤1：在index.html的body中添加一个基础标签（比如h1）：
|
HTML |
步骤2：在style.css中编写CSS代码，给h1标签设置样式：
|
CSS |
步骤3：右键index.html → Open in Default Browser，打开浏览器查看效果：h1标题变为红色、30px大小，说明语法正确、样式生效。
2.5 基础排错：样式不生效？先查这3点
模块3：CSS 注释（10分钟，必会，提升代码可读性）
3.1 注释作用
对CSS代码进行说明，方便自己/他人理解代码含义（比如“导航栏标题样式”），注释内容不会被浏览器解析，不影响页面样式。
3.2 CSS注释语法（唯一语法，和HTML注释区分开）
|
CSS /* |
3.3 注释规范（开发必备，早期养成习惯）
即时实操：给之前写的h1样式添加注释（style.css中修改）
|
CSS |
模块4：CSS 3种引入方式（30分钟，重点掌握2种，开发核心）
CSS要作用于HTML，必须通过“引入方式”建立关联，共有3种引入方式，按开发使用优先级排序：外部样式（推荐）> 内部样式 > 行内样式，各有适用场景，需全部掌握并能区分差异。
4.1 引入方式1：外部样式表（link标签引入，开发首选，重点中的重点）
4.1.1 核心原理
将所有CSS代码写在独立的.css文件中（比如style.css），在HTML的<head>标签中通过<link>标签引入该文件，实现HTML和CSS的完全分离，是企业开发、项目开发的唯一选择。
4.1.2 语法格式（记死，学前准备已用，重新强化）
|
HTML |
4.1.3 属性说明
- rel="stylesheet"：声明当前引入的是样式表文件，不可修改；
- href：核心属性，设置CSS文件的路径（相对路径/绝对路径），路径错误则样式完全不生效；
- type="text/css"：声明文件类型为CSS，HTML5中可省略（浏览器会自动识别），推荐保留，兼容性更好。
4.1.4 适用场景
- 所有正式开发、项目开发（单页面/多页面）；
- 多页面复用样式：多个HTML文件可引入同一个CSS文件，实现样式统一（比如网站的所有页面的导航栏样式都写在一个CSS文件中，所有HTML页面都引入它）。
4.1.5 实操验证
直接使用学前准备的index.html，<head>中已存在<link rel="stylesheet" href="./style.css">，修改style.css中的h1样式（比如把color改为blue），刷新浏览器，标题颜色变为蓝色，验证外部样式生效。
4.2 引入方式2：内部样式表（style标签引入，小案例/临时测试用）
4.2.1 核心原理
不创建独立的CSS文件，直接在HTML的<head>标签中添加<style>标签，所有CSS代码写在<style>标签内部，实现HTML和CSS的部分分离（仅在当前HTML文件中生效）。
4.2.2 语法格式
|
HTML |
4.2.3 关键注意事项
- <style>标签必须写在<head>标签内（规范），写在body内虽可能生效，但不符合W3C标准，禁止使用；
- style标签内的CSS代码语法和外部样式表完全一致（选择器+声明块），无需修改；
- 内部样式表的样式仅对当前HTML文件生效，其他HTML文件无法复用。
4.2.4 适用场景
- 快速制作单页面小案例（比如本阶段的基础实操）；
- 临时给某个HTML文件添加专属样式（不影响其他页面）；
- 开发初期的快速测试（无需切换CSS文件，直接在HTML中写样式）。
即时实操：在index.html中添加内部样式（覆盖之前的外部样式，观察效果）
4.3 引入方式3：行内样式（style属性，仅临时测试用，不推荐开发）
4.3.1 核心原理
不使用CSS文件或style标签，直接在单个HTML标签上添加style属性，将CSS样式写在style属性的值中，实现“给单个元素单独设置样式”，完全混合HTML和CSS，破坏分离原则。
4.3.2 语法格式
|
HTML |
4.3.3 关键注意事项
- style属性是HTML属性，写在HTML标签内部，不是CSS标签；
- style属性的值是多个CSS声明的集合，无需写选择器和大括号，直接写“属性:值;”，多个声明之间用分号分隔；
- 行内样式仅对当前标签生效，子标签不会继承（比如div设置style，内部的span不会生效）。
4.3.4 适用场景
- 紧急临时测试（比如快速验证某个样式是否生效，改完即删）；
- 个别元素的极端专属样式（全项目仅这一个元素需要，且后续不会修改）；
- 开发中禁止大量使用（会导致HTML代码杂乱，样式无法复用，后期维护成本极高）。
即时实操：给h1标签添加行内样式（覆盖内部样式，观察效果）
|
HTML |
刷新浏览器，h1标题变为紫色、35px，说明行内样式优先级高于内部样式（浅层认知，后续重点讲解优先级规则）。
4.4 3种引入方式对比（表格总结，记死适用场景）
|
引入方式 |
语法形式 |
优点 |
缺点 |
适用场景 |
|
外部样式表 |
link标签引入.css文件 |
完全分离、多页面复用、易维护 |
需创建独立文件，略繁琐 |
企业开发、项目开发、多页面应用 |
|
内部样式表 |
head内的style标签 |
单页面复用、无需切换文件 |
仅单页面生效，无法跨页面复用 |
单页面小案例、临时测试 |
|
行内样式 |
HTML标签的style属性 |
单个元素快速设置、无需写选择器 |
混合结构和样式、无法复用、维护难 |
紧急临时测试、个别元素专属样式 |
4.5 实操要求
将index.html中的内部样式（style标签）和行内样式（style属性）全部删除，恢复到仅用外部样式表（link引入style.css） 的状态，后续所有学习均以外部样式表为主（符合开发规范）。
模块5：第1天综合小案例（20分钟，巩固当天所有知识点）
案例要求
基于index.html + style.css，用外部样式表实现以下效果，严格遵循CSS基础语法，添加合理注释：
案例参考代码
|
HTML |
|
CSS |
验证标准
刷新浏览器，能看到对应元素的样式全部生效，代码无语法错误，注释规范，仅使用外部样式表。
第2天：CSS 层叠初步认知 + 基础样式属性入门 + 样式生效排查
模块1：CSS “层叠”的浅层认知（20分钟，理解核心，为后续优先级打基础）
1.1 “层叠”的核心含义（大白话解释，无抽象概念）
“层叠”是CSS的核心特性，简单说就是：多个CSS样式规则可以同时作用于同一个HTML元素，浏览器会按一定规则将这些样式“叠加”或“覆盖”，最终呈现一个综合效果。
1.2 层叠的2种表现形式（结合实操理解，本阶段仅浅层掌握）
形式1：样式叠加（多个样式不冲突，共同生效）
同一个元素设置多个不冲突的样式，浏览器会将所有样式叠加，最终元素拥有所有样式效果。
实操示例：给h1标签同时设置color（红色）、font-size（30px）、font-weight（加粗），效果为“红色+30px+加粗”。
|
CSS |
形式2：样式覆盖（多个样式冲突，按规则保留一个）
同一个元素设置多个冲突的样式（比如同时设置color: red和color: blue），浏览器会按“优先级规则”保留其中一个，另一个被覆盖。
实操示例：给h1标签同时设置color: red和color: blue，最终显示蓝色（后写的样式覆盖先写的样式，本阶段核心规则）。
|
CSS |
1.3 本阶段必记的2个层叠规则（简单规则，后续会补充完整优先级）
即时实操：验证层叠规则
模块2：CSS 基础样式属性入门（30分钟，掌握5个高频属性，会用即可）
本阶段无需记忆所有样式属性，只需掌握5个最基础、最高频的样式属性，能实现简单的文字样式设置，后续会按模块系统讲解所有属性。
2.1 核心说明
- 所有样式属性均写在声明块中，遵循“属性: 值;”的规则；
- 属性值需匹配属性的取值规范，比如字号必须加单位（px为主），颜色可设英文单词（red/blue）或十六进制（#ff0000/#f00）；
- 以下属性均适用于所有文字类元素（h1-h6、p、a、span等），直接使用即可。
2.2 5个高频基础样式属性（逐个讲解+实操）
|
属性名 |
作用 |
常用取值 |
示例 |
|
color |
设置文字颜色 |
英文单词/十六进制/#RGB |
color: red; / color: #f00; |
|
font-size |
设置文字字号 |
数字+px（像素，主流） |
font-size: 20px; |
|
font-weight |
设置文字粗细 |
bold（加粗）/ normal（正常）/ 数字（400=正常，700=加粗） |
font-weight: bold; |
|
text-align |
设置文字水平对齐 |
center（居中）/ left（左对齐，默认）/ right（右对齐） |
text-align: center; |
|
text-decoration |
设置文字装饰线 |
none（无装饰线）/ underline（下划线）/ line-through（删除线） |
text-decoration: none; |
2.3 关键注意事项（踩坑重灾区）
即时实操：给index.html的所有元素设置综合样式
|
CSS |
效果验证
刷新浏览器，主标题居中、红色加粗，段落深灰色，链接橙色无下划线，实现简单的视觉美化。
模块3：CSS 样式不生效的基础排查方法（20分钟，核心能力，必须掌握）
学习CSS初期，最常见的问题是“写了代码但样式不生效”，本阶段掌握5个基础排查方法，能解决90%的入门级样式不生效问题，后续会补充高级排查方法。
3.1 排查步骤（按顺序排查，从简单到复杂，记死）
步骤1：检查CSS语法错误（最常见）
- 漏写大括号{}、冒号:、分号;；
- 使用中文符号（比如：；{}），CSS仅支持英文半角符号；
- 选择器、属性名拼写错误（比如把color写成coler，font-size写成fontsize）。
步骤2：检查选择器是否匹配HTML元素
- 选择器名和HTML标签名/类名/id名拼写不一致（比如选择器是h2，HTML是h1；选择器是.test，HTML是class="test1"）；
- 选择器类型错误（比如用id选择器#test，但HTML是class="test"）。
步骤3：检查CSS文件引入路径（外部样式表专属）
- href属性的路径错误（比如CSS文件在css文件夹中，路径写成./style.css，正确应为./css/style.css）；
- CSS文件名拼写错误（比如引入的是style.css，但实际文件是styles.css）。
步骤4：检查样式是否被覆盖（层叠规则）
- 同一种引入方式中，是否后写的样式覆盖了先写的样式；
- 是否有行内样式/内部样式覆盖了外部样式（可临时删除其他样式，单独测试）。
步骤5：检查浏览器缓存（易忽略）
- 浏览器会缓存CSS文件，修改后可能未刷新，导致样式不生效；
- 解决方法：Chrome浏览器中按Ctrl+F5（强制刷新），或右键检查→Network→勾选Disable Cache（禁用缓存）。
3.2 浏览器开发者工具基础排查（核心工具，提前入门）
Chrome的「检查」工具是CSS调试的神器，本阶段掌握2个核心操作：
- 左侧：HTML结构，点击某个元素（比如h1），可查看该元素的所有HTML属性；
- 右侧：Styles（样式面板），显示该元素匹配的所有CSS样式，生效的样式为黑色，被覆盖的样式会有删除线，语法错误的样式会有红色感叹号。
即时实操：故意制造1个样式不生效问题，用排查方法解决
比如：将style.css中的color写成coler，打开开发者工具，查看Styles面板的红色感叹号，修正后刷新，验证样式生效。
模块4：第2天综合小案例（30分钟，融合本阶段所有知识点）
案例名称
简单个人简介页面（纯HTML+CSS外部样式，无复杂布局）
案例要求
- h1：文字蓝色、36px、加粗、水平居中；
- h2：文字#666、24px、正常粗细；
- p：文字#333、18px、行高24px；
- a：文字红色、16px、去掉下划线，鼠标悬浮时显示下划线（提前用a:hover，感知伪类）；
案例参考代码
|
HTML |
|
CSS |
验证标准
本阶段学习目标验收（必做，确保掌握所有核心内容）
基础能力验收（能独立完成以下所有操作）
代码能力验收（能独立完成“简单个人简介页面”案例）
无需参考代码，能从零开始创建HTML文件、关联CSS文件，写出符合要求的HTML结构和CSS样式，代码规范、注释完整，样式全部生效。
本阶段课后拓展（可选，耗时10-20分钟，为下一阶段铺垫）
本阶段核心知识点总结（3句话记死）
作业：电脑屏幕居中绿色显示 “CSS 你好！”
第一步：新建一个文件夹（命名为：CSS-Learn，英文命名，避免中文路径问题）；
在文件夹内新建两个文件：index.html（HTML结构）、style.css（CSS样式）；
打开这个文件夹，
第二步：用记事本打开index.html文件加入以下代码，以创建基础HTML结构；
<!– index.html –>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS测试</title>
<!– 引入CSS文件：核心关联代码 –>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div class="test">CSS学习开始啦！</div>
</body>
</html>
第三步：用记事本，打开style.css，加入以下代码，以创建CSS格式
/* style.css */
/* 给class为test的div加样式 */
.test {
color: red; /* 文字红色 */
font-size: 24px; /* 文字大小24像素 */
text-align: center; /* 文字居中 */
margin-top: 50px; /* 上边距50像素 */
}
第四步：双击 index.html 运行，请将正确结果打在评论区。
评论前必须登录！
注册