一、什么是CSS¶
1.1 CSS 的作用是什么？¶
CSS（Cascading Style Sheets）层叠样式表，是用于控制网页样式和布局的标记语言。它像化妆师一样，为HTML元素添加颜色、字体、间距等视觉样式，实现内容与表现的分离。
你可以把网页理解成三层：
- HTML：负责结构（骨架） 例如：标题、段落、图片、按钮、列表……
- CSS：负责样式（皮肤） 例如：颜色、大小、字体、布局、间距、背景……
- JavaScript：负责交互（动作） 例如：点击弹窗、轮播图、表单校验、动态加载……
示例场景：
<!-- 原始HTML -->
<p>这是一段普通文本</p>
<!-- 应用CSS后 -->
<p style="color: blue; font-size: 18px;">这是美化后的文本</p>
1.2 为什么要学CSS？¶
因为网页“好不好看、排版整不整齐、能不能适配手机”都由 CSS 决定。CSS 能做的典型事情包括：
- 改文字大小、颜色、字体
- 设置背景图片、渐变、透明度
- 控制元素位置：居中、左右排列、固定在顶部
- 做布局：Flex、Grid、响应式
- 做动画：过渡、关键帧动画
二、CSS语法规范¶
2.1 CSS 的基本结构¶
选择器 {
属性: 值;
属性: 值;
}
示例：
p {
color: red;
text-indent: 2em;
}
解释:
p是选择器：表示选中所有<p>标签{}是规则体color、font-size是属性red、20px是属性值- 每一条声明以
;结尾（强烈建议写上，避免出错）
规范说明：
- 选择器指向需要样式化的HTML元素
- 声明块包含在大括号内
- 每个声明由属性:值组成，分号结尾
- 建议每行写一个声明
2.2 CSS注释¶
/* 这里是注释 */
2.3 常见书写规范¶
每个属性写一行，便于维护
属性后面加分号
大括号换行更清晰
颜色尽量用统一格式（如 #333、rgb()）