2025/12/26
CSS 全称 Cascading Style Sheets（层叠样式表），核心作用：专门用来给 HTML 网页设置【样式、外观、布局】 —— 比如修改文字颜色大小、调整图片宽高、设置背景、排版布局、做页面美化等。HTML 是网页的「骨架」（决定页面有什么内容：标题、文字、图片、按钮），CSS 是网页的「皮肤 / 装修」（决定这些内容长什么样子），二者必须配合使用，缺一不可。
✅ 一、CSS 的核心语法规则
无论用哪种方式写 CSS，单个样式的语法格式完全固定，这是基础，先掌握这个，后面所有内容都基于它：
语法格式：
css
选择器 {
属性名: 属性值;
属性名: 属性值;
/* 可以写N多个样式属性 /
}
语法拆解（3 个核心部分）
选择器：选中你要美化的「HTML 标签」（比如选中标题、选中段落、选中按钮）
属性名：你要修改的「样式类型」（比如 color= 颜色、font-size= 字体大小、width= 宽度）
属性值：样式的「具体效果」（比如 color: red= 红色、font-size: 20px= 字体 20 像素）
✅ 语法注意事项（新手 90% 的错误都在这里）
属性和值之间用 冒号 : 连接，不是等号！
每个样式写完，必须加 分号 ; 结尾，少一个都报错！
所有样式属性，必须写在 {} 大括号里面！
简单示例（看懂就会）
css
/ 选中所有
段落标签，设置文字红色、字体大小16像素 */
p {
color: red;
font-size: 16px;
}
✅ 二、CSS 的 3 种使用方式（重中之重，分优先级，全部要会）
CSS 总共有 3 种给 HTML 加样式的方法，也是实际开发中唯一的 3 种写法，按「使用频率 + 开发规范」排序，新手建议从第一种学起，三种都要掌握，优先级从高到低：行内样式 > 内部样式 > 外部样式
✅ 方式 1：行内样式（内联样式）【写在 HTML 标签内部，局部样式】
✔ 用法
直接在需要美化的 HTML 标签上 添加 style 属性，属性值就是 CSS 样式（语法：属性名:属性值;）
✔ 语法格式
html
预览
<标签名 style="属性名:属性值; 属性名:属性值;">内容</标签名>
✔ 完整示例
html
预览
课表管理系统
欢迎使用课表查询功能
✔ 特点 & 适用场景
✅ 优点：写法最简单，样式只作用于当前这一个标签，精准修改单个元素❌ 缺点：HTML 和 CSS 混在一起，代码杂乱，不能复用样式，样式多了不好维护✅ 适用：临时修改单个标签样式（比如只想改某一个标题的颜色，不想影响其他标题）
✅ 方式 2：内部样式（内嵌样式）【写在 HTML 页面头部，页面级样式】
✔ 用法
在 HTML 文件的 头部标签里，新增一个 标签，所有 CSS 样式全部写在这个标签里，这是前端入门最常用的写法！
✔ 语法格式
html
预览课表管理系统
欢迎使用课表查询功能
✔ 特点 & 适用场景
✅ 优点：HTML 和 CSS 做了分离，样式集中管理，同一个样式可以作用于页面内所有匹配的标签（比如写一个 p 样式，页面所有都生效），代码整洁，容易维护✅ 缺点：样式只能作用于当前这一个 HTML 页面，其他页面无法复用✅ 适用：单个 HTML 页面的样式美化（90% 的前端入门练习、小项目都用这种方式，你的课表管理系统页面也适合） ✅ 方式 3：外部样式（外联样式）【单独写 CSS 文件，项目级样式，开发必备】 ✔ 用法（开发中最常用！企业标准写法） 这是大型项目的标配写法，核心是「彻底分离」： 新建一个 后缀为 .css 的纯文本文件（比如 style.css），所有 CSS 样式都写在这个文件里（只写 CSS，不要写任何 HTML 标签） 在需要使用样式的 HTML 文件的 里，用 标签 引入这个 css 文件，即可让样式生效 ✔ 完整示例（三步完成） 步骤 1：新建 style.css 文件（单独存放，无任何 HTML） css /* style.css 纯CSS代码 */ h1 {color: red;font-size: 24px; } p {color: blue;text-align: center; } img {width: 500px;height: 300px; } 步骤 2：在 HTML 页面的中引入 css 文件 html 预览
课表管理系统
欢迎使用课表查询功能
✔ 核心说明标签的固定属性：rel="stylesheet" 表示引入的是样式表文件，href 填写 css 文件的「文件路径」（和 HTML 同文件夹直接写文件名即可）
✔ 特点 & 适用场景
✅ 优点：HTML 和 CSS 完全分离，一个 css 文件可以被多个 HTML 页面引入复用（比如课表系统的登录页、首页、查询页都可以用同一个样式文件，改一处全生效），代码最整洁，维护成本最低，性能最好✅ 缺点：需要新建文件，入门比前两种多一步操作✅ 适用：所有前端项目（个人 / 企业）、多页面网站 / 系统（你的课表管理系统如果是完整项目，必须用这种方式！）
✅ 重要补充：3 种样式的优先级规则
如果同一个 HTML 标签，被 3 种样式同时设置了同一个属性（比如都设置了 color: 红色 / 蓝色 / 绿色），生效规则是：
行内样式 > 内部样式 > 外部样式
比如：外部样式设置 p 标签蓝色，内部样式设置 p 标签绿色，行内样式设置 p 标签红色 → 最终显示红色
优先级原则：谁离 HTML 标签越近，谁生效
✅ 三、CSS 基础选择器（必会！选中你要美化的标签）
CSS 的核心逻辑是「先选中，再美化」，选择器就是用来选中 HTML 标签的工具，上面的例子里用的 h1 p img 就是选择器，这是最基础的选择器，这里给你讲 4 个必学的基础选择器，足够应对 90% 的入门开发需求，按优先级从高到低排序：
✅ 1. 标签选择器（元素选择器）—— 最基础
语法：直接写「HTML 标签名」
css
标签名 { 属性:值; }
作用：选中页面所有这个标签的元素，批量设置样式
示例
css
/* 选中页面所有标签，设置样式 */ h1 { color: red; font-size: 22px; } /* 选中页面所有
标签，设置样式 */
p { line-height: 2; }
/* 选中页面所有标签，设置样式 */
img { width: 100%; }
✅ 特点：范围广，批量修改，适合统一设置页面同类型标签的样式
✅ 2. class 类选择器 —— 最常用（重中之重！）
语法：.类名 { 属性:值; } （开头必须加英文点 . ！）
用法：
先在需要选中的 HTML 标签上，添加 class="自定义类名" 属性
再在 CSS 里用 .类名 选中这个标签，设置样式
示例
html
预览