一、什么是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 是属性值

• 每一条声明以 ; 结尾（强烈建议写上，避免出错）

规范说明：

1. 选择器指向需要样式化的HTML元素

2. 声明块包含在大括号内

3. 每个声明由属性:值组成，分号结尾

4. 建议每行写一个声明

2.2 CSS注释

/* 这里是注释 */

2.3 常见书写规范

每个属性写一行，便于维护

属性后面加分号

大括号换行更清晰

颜色尽量用统一格式（如 #333、rgb()）