CSS 语法

CSS 语法

理解 CSS 规则的基本结构。

CSS 规则的结构

CSS 的基本单位是规则集（rule set）。每个规则集包含两个主要部分：

1. 选择器 (Selector)：指定你想要应用样式的 HTML 元素。
2. 声明块 (Declaration Block)：包含一个或多个样式声明，由花括号 {} 括起来。

各部分的示意图：

Selector { Declaration Block }

声明块内部：

每个声明 (declaration) 包括：

• 一个属性 (Property)：你想要改变的样式属性（例如，color、font-size、margin）。
• 一个值 (Value)：该属性的具体设置（例如，red、16px、10px）。

属性和值之间用冒号 (:) 分隔。

块内的每个声明必须以分号 (;) 结尾。此分号用于分隔多个声明。

声明的示意图：

property: value;

CSS 示例讲解

让我们看一个完整的 CSS 规则集：

p {
  color: red;
  text-align: center;
}

分解：

• p 是选择器。它指定所有 <p> (段落) 元素。
• { ... } 包含声明块。
• color: red; 是第一个声明。
• • color 是属性。
• • red 是值。
• • ; 是分号，用于将其与下一个声明分隔开。
• text-align: center; 是第二个声明。
• • text-align 是属性。
• • center 是值。
• • ; 是分号，用于结束该声明（在此例中也结束了整个块）。

此规则集告诉浏览器将所有段落文本设置为红色并居中对齐。

可读性：虽然你可以将 CSS 写在单行上（p {color:red; text-align:center;}），但将每个声明放在单独的行上，并在花括号内缩进，是标准做法，这使得代码更易于阅读和维护。

CSS 注释

注释用于向你自己或其他开发人员解释代码。它们会被浏览器完全忽略。

CSS 注释以 /* 开始，以 */ 结束。它们可以跨多行。

/* 这是单行注释 */
p {
  color: blue; /* 设置文本颜色 */
  font-size: 16px;
}

/*
  这是多行注释。
  它解释了以下规则的目的。
*/
.highlight {
  background-color: yellow;
}

使用注释来记录复杂部分、解释不显而易见的选择，或临时禁用代码（“注释掉”）。