CSS: CSS 语法
最后更新：2026-10-13
1. CSS 规则的基本结构
CSS 样式由一系列规则集（ruleset）组成，每条规则都包含一个选择器（Selector） 和一个声明块（Declaration block）。浏览器解析这些规则，然后将其应用于 HTML 文档中相应的元素上。
基本语法结构如下：
选择器 {
属性1: 值1;
属性2: 值2;
/* 更多声明... */
}
(1) 组成部分说明
选择器（Selector）：选择器是 CSS 的核心，用于"选中"你要应用样式的 HTML 元素。可以是 HTML 标签名、class 名称、id 名称，或者更复杂的选择器组合。
声明块（Declaration block）：用大括号 {} 包裹，里面包含一条或多条声明。
声明（Declaration）：由属性和值组成，用英文冒号 : 分隔，每条声明以英文分号 ; 结尾。
: 隔开，每组声明以分号 ; 结束。分号容易遗漏，但漏了会导致后面的样式失效——养成习惯每行都加分号。
属性（Properties）：属性是 CSS 中用于定义元素样式的具体功能或特性。每个属性都有名称，用于描述要修改的样式类型，例如 color（颜色）、border（边框）、font-size（字体大小）等。
值（Value）：定义属性的具体表现效果，由数值和单位或者关键字组成。
(2) 一个完整的例子
▶ 示例
▶ 试一试这条规则的意思是：选中页面中所有的 <h1> 元素，让它们的文字颜色变成蓝色，字体大小变成 24 像素，并且居中对齐。
2. CSS 注释
/* */，和 HTML 的 <!-- --> 不同。注释可以帮助你标记代码区块，团队协作时特别有用。
CSS 中的注释使用 /* 注释内容 */ 的写法，浏览器不会解析注释内容。CSS 只有这一种注释方式，无论是单行还是多行，都放在 /* */ 之间。
▶ 示例
▶ 试一试注释在开发中非常有用——你可以用它解释某段样式的作用，或者临时"禁用"某些样式以便调试。
3. 语法注意事项
(1) 分号是分隔符
每条声明后面都要加英文分号 ;，用来告诉浏览器这条声明结束了。最后一条声明后面的分号可以省略，但建议都加上，方便以后添加新样式。
▶ 示例
▶ 试一试(2) 属性名和值之间用冒号
冒号必须是英文冒号 :，属性名和冒号之间可以有空格也可以没有，但建议统一风格。
(3) 引号的使用
某些属性值（如字体名称）包含空格时，需要用引号包裹：
▶ 示例
▶ 试一试(4) 大小写
CSS 的属性名和属性值在大多数情况下不区分大小写，但习惯上使用小写。唯一例外是某些值（如字体名称、URL 路径）可能需要保留原有大小写。
▶ 示例
▶ 试一试4. 常见的语法错误
新手写 CSS 时容易犯以下错误，注意避免：
| 错误 | 正确 |
|---|---|
color: red; 漏了分号 |
color: red; |
用了中文冒号 color：red |
用英文冒号 color: red |
| 花括号不匹配 | 确保 { 和 } 成对出现 |
| 属性名拼写错误 | 检查属性名是否正确（如 background 不是 backgound） |
❓ 常见问题
/* 注释内容 */，HTML 注释用 <!-- 注释内容 -->。CSS 不支持 // 单行注释。h1, h2, h3 { color: red; } 就是让 h1/h2/h3 全部变红，不用重复写三遍。📖 小节
- CSS 语法其实很简单：选择器选中元素，声明块里写属性和值
- 掌握了这个基本结构，你就能读懂和编写任何 CSS 规则
- 记住每条声明以分号结尾，属性名和值之间用冒号，注释用
/* */包裹
📝 作业
- 创建一个 HTML 文件，内部使用
<style>标签，为h1元素设置红色文字和 28px 字体大小，为p元素设置蓝色文字和 16px 字体大小。 - 在样式代码中添加注释，说明每一条样式的作用。
- 故意写错一条声明（比如把
color写成colour），用浏览器打开页面，看看开发者工具的 Styles 面板中会有什么提示？
