1.1一条规则的三要素
选择器（改谁）+ 属性（改什么）+ 值（改成多少），用大括号包起来。
p { color: #B04A2C; font-size: 18px; }
选择器 · 改谁
属性 · 改什么
值 · 改成多少
分号分隔 · 大括号成对
/* 语法结构：选择器 { 属性: 值; } */
p {
color: #B04A2C;
font-size: 18px;
}
/* 多条声明写在同一行也可以，
但课堂上建议一条一行，好读好改 */
p { color: #B04A2C; font-size: 18px; }分号是每条声明的句号，漏写分号是最常见报错——最后一条可以省，但别省，养成习惯。
1.2方式一：行内样式style 属性
直接写在标签上，只管这一个元素，「杀鸡用牛刀」都算不上，慎用。
我是行内样式染红的段落
我也是行内样式，一行一个都要写一遍
<p>我是行内样式染红的段落</p>
<p style="color:#B04A2C; font-weight:700;">
我也是行内样式，一行一个都要写一遍
</p>
/* 缺点：结构和样式混在一起，
十个段落想改色就要写十遍 */行内样式优先级最高（下一章细讲），一般只用于临时测试或极个别特例。
1.3方式二：内嵌样式<style> 标签
写在页面 head 里，整页通用。单页演示、临时实验用它最方便。
<head>
<style>
/* 只对「本页面」生效 */
.embed-demo h3 {
color: #B04A2C;
}
.embed-demo p {
color: #3F6E6A;
}
</style>
</head>
/* 缺点：换个页面还得复制一遍——
所以有了第三种方式 */本项目演示卡里右边代码框的样式，就是用内嵌 + 外链两种方式组合出来的。
1.4方式三：外链样式link 标签 · 推荐
样式独立成 .css 文件，所有页面共用一份。这就是「结构与样式分离」。
我的样式来自 assets/demo.css —— 你看，HTML 里根本找不到这句颜色
<!-- index.html 里只写一行引入 -->
<head>
<link rel="stylesheet" href="assets/demo.css">
</head>
/* assets/demo.css 里写全部样式 */
.link-demo p {
color: #8F5E0F;
border-bottom: 2px solid #F3E0D5;
}
/* 好处：全站改一处，页页生效；
浏览器还能缓存 css 文件，加载更快 */真实项目 99% 用外链。rel="stylesheet" 三个单词都别拼错，href 路径写错会「静默失效」——样式不报错、只是不生效。
1.5@import 与注释
CSS 还能用 @import 把别的样式文件「拼」进来；注释用 /* */ 包住。
下面这段 CSS 演示了 @import 的写法——注意它必须写在样式表最顶部：
/* theme.css 可以被别的文件导入复用 */
@import url("theme.css");
@import "reset.css";
/* 注释只有这一种写法（没有 //！） */
p { color: red; } /* 行尾注释 OK */
// p { color: blue; } ← 错！这行不是注释，
会把样式语法搅乱 */
/* 注释用途：分区标题、临时停用某条规则、
给同学/同事留说明 */@import 是「下载完 CSS 再去请求下一个文件」，比 link 慢；link 支持并行下载。面试常考：两者选 link。