正在加载...

CSS 语法

你已经知道 CSS 负责给 HTML 添加样式。这一节我们专门看一条规则的书写规范，让你读写样式时不再靠猜：花括号、冒号和分号到底该放在哪里，一目了然。

CSS 语法是什么？

CSS 语法就是书写样式规则时遵循的固定格式。日常用到的规则几乎都是同一个结构：先确定要给谁设置样式（选择器），再用 { 打开声明块，写入一条或多条声明，最后用 } 收尾。每条声明都把一个属性和一个值配成一对。

CSS 规则的结构

把规则拆成几个有名字的部分。每个部分你都叫得出名字，排查拼写错误就容易多了。

📊 CSS 规则的组成部分

组成部分 示例 作用
选择器（selector） p 指定规则作用于哪些元素
声明块 { … } 用花括号包住一条或多条声明
声明（declaration） color: teal; 一条“属性–值”指令，通常以 ; 结尾
属性（property） color 你想要改变的样式方面
值（value） teal 赋给该属性的设置
冒号 / 分号 : / ; 冒号分隔属性和值；分号为大多数声明收尾

标注了各部分的规则

下面是一条最简单的规则，所有主要部分都能看到。选择器会在后面的课程中深入讲解，这里的重点是写对结构。

标注了各部分的 CSS 规则

css
CSS Code 
p {
color: teal;
}

从左到右读一遍

  • p — 选择器（所有段落）
  • { … } — 声明块
  • color — 属性
  • : — 分隔属性和值
  • teal — 值
  • ; — 结束这条声明
    空格和换行可以灵活处理。你完全可以把它写成一行 p{color:teal;}，浏览器的处理结果是一样的。不过在学习和团队协作中，还是建议使用易读的多行写法。

一个声明块里写多条声明

一条规则可以为同一个选择器设置多个属性。每条声明单独占一行，并以分号结尾。

多条声明

css
CSS Code 
.note {
color: #0f172a;
background-color: #e0f2fe;
padding: 1rem;
border-radius: 0.5rem;
}

为什么这样写有效

  • .note 是类选择器（后面还会专门练习 class）
  • 四条声明共用同一个声明块
  • 浏览器会把它们全部应用到带有 class="note" 的元素上
  • 两条声明之间漏写分号，可能导致后面的属性不生效

选择器分组

当多个选择器需要相同的样式时，用逗号把它们隔开即可，一个声明块就能同时作用于所有选择器。

分组选择器

css
CSS Code 
h1, h2, h3 {
font-family: Georgia, serif;
color: #1e293b;
}

什么时候适合分组

当几个标题（或其他元素）要保持相同外观时，分组可以省去复制粘贴。如果以后某个选择器需要单独的样式，就为它另写一条规则，不要把分组弄得越来越杂。

标点检查清单

写代码时把这份简短清单记在心里：

  • 花括号包住声明块
  • 冒号位于属性和值之间
  • 分号为每条声明收尾（在下一条声明之前必须有；最后一条也写上是个好习惯）
  • 逗号分隔的是分组的选择器，而不是属性
  • 属性名和大多数关键字值不区分大小写，但按惯例统一写成小写

动手试一试

  1. 新建 syntax.html，写入一个段落 <p class="note">Syntax practice</p>，并在 head 中加一个 <style> 块。
  2. 把本节中带有多条声明的 .note 规则加进去。
  3. 将 background-color 改为 #fef3c7，保存并刷新页面。
  4. 在同一个声明块里添加第五条声明 font-size: 1.125rem;，保存后再次刷新。
  5. 确认背景色和字号都变了。如果没变，检查花括号和分号。

常见错误

  • 写成 color teal，漏掉冒号——浏览器无法解析这条声明
  • 漏写 { 或 }，声明落在声明块之外而被忽略
  • 两条声明之间省略分号，导致第二个属性不生效
  • 在属性和值之间用逗号（color, teal）而不是冒号
  • 单独写一个属性，没有选择器也没有花括号——这不是一条完整的规则

小结

  • CSS 语法 = 选择器 + 装着声明的声明块 { }
  • 声明的写法是 property: value;
  • 一个声明块可以为同一个选择器包含多条声明
  • 逗号用来把样式相同的选择器分成一组
  • 留心花括号、冒号和分号，可以避免“悄无声息”的失效
  • 通过修改值、添加声明来练习，然后刷新页面查看效果

🧠 测试您的知识

准备开始

测试您的知识

通过这个互动测验挑战自己，看看你对这个主题的理解程度如何

❓
7
问题
🎯
70%
及格要求
♾️
∞
时间
🔄
∞
尝试次数

📝 说明

  • 仔细阅读每个问题
  • 为每个问题选择最佳答案
  • 您可以随时重新参加测验
  • 您的进度将显示在顶部
主题 1 的 1
Css 教程