CSS 语法

CSS 的语法非常直观和易于理解。它由一系列的 规则集 (Ruleset) 组成，每一条规则集都定义了如何去样式化一个或多个 HTML 元素。

规则集 (Ruleset) 的构成

一个基本的 CSS 规则集由两部分构成：

1. 选择器 (Selector): 它“选择”了你想要样式化的 HTML 元素。
2. 声明块 (Declaration Block): 它包含了一条或多条用分号分隔的 声明 (Declaration)。

/* 这是一个 CSS 规则集 */

h1 {
  color: blue;
  font-size: 24px;
}

让我们来分解这个例子：

• h1 是 选择器。它指向了页面上所有的 <h1> 元素。
• { ... } 花括号以及其中的所有内容，构成了 声明块。
• color: blue; 是一条 声明。它由一个 属性 (Property) 和一个 值 (Value) 组成。
  • color 是 属性。
  • blue 是 值。
• font-size: 24px; 是另一条 声明。

总结一下:

• 你使用 选择器 来定位 HTML 元素。
• 然后在 声明块 中，为这些元素的 属性 指定一个 值。
• 每个声明都必须以分号 (;) 结尾。
• 整个声明块必须被花括号 ({}) 包围。

CSS 注释

和所有编程语言一样，你可以在 CSS 中添加注释来解释你的代码、做标记或者临时禁用某些代码。CSS 的注释以 /* 开始，以 */ 结束。

/* 这是一个单行注释 */
p {
  color: green;
}

/*
  这是一个
  多行注释。
  下面的规则将使所有段落变成红色，
  但它被注释掉了，所以不会生效。
*/
/*
p {
  color: red;
}
*/

注释对于代码的维护和团队协作非常重要。

语法要点

• 大小写不敏感: CSS 语法通常不区分大小写。但是，涉及到文件名或 URL（如字体名称、背景图片路径）时，通常是区分大小写的。为了保持一致性，推荐始终使用小写字母编写 CSS。
• 空格: 空格、制表符和换行符在 CSS 中通常被忽略。你可以利用它们来格式化代码，提高可读性。

例如，下面两种写法是等效的，但第一种显然更易于阅读：

/* 推荐的写法 */
body {
  font-family: Arial, sans-serif;
  line-height: 1.5;
}

/* 不推荐的写法 */
body{font-family:Arial,sans-serif;line-height:1.5;}

掌握了基本的语法结构，你就可以开始学习 CSS 中最强大、最核心的部分——选择器了。