CSS 语法基础

CSS 由一条条**规则（rule）**组成。每条规则告诉浏览器：对哪些元素，应用什么样式。

规则的结构

css 
h1 {
  color: #1e293b;
  font-size: 2rem;
}

一条规则包含两个部分：

  • **选择器（selector）**h1 — 指明这条规则作用于哪个元素
  • **声明块（declaration block）**{ ... } — 大括号内的样式声明

声明块内部是一条或多条声明（declaration），每条声明的格式为：

plaintext 
属性: 值;
  • color 是属性（property），#1e293b 是值（value）
  • 属性与值之间用冒号 : 分隔
  • 每条声明以分号 ; 结尾

多选择器规则

你可以用逗号把多个选择器合并在一起，共用同一样式：

css 
h1,
h2,
h3 {
  font-family: system-ui, sans-serif;
  color: #1e293b;
}

等价于分别为每个选择器写相同的声明。

注释

CSS 注释用 /* */ 包裹，可以跨行：

css 
/* 这是单行注释 */

/*
 * 这是
 * 多行注释
 */
.main-content {
  max-width: 800px; /* 限制内容宽度 */
}

CSS 不支持 // 单行注释——那是 JavaScript 的语法。在 CSS 中使用 // 会导致解析错误。

@规则（At-rules）

除了声明块组成的规则，CSS 还有一类以 @ 开头的特殊规则，用于定义条件逻辑、字体、动画等：

@规则用途
@media根据屏幕尺寸等条件应用样式
@import引入另一个 CSS 文件
@font-face定义自定义字体
@keyframes定义动画关键帧
@layer管理级联层级
css 
/* 屏幕宽度小于 768px 时生效 */
@media (max-width: 768px) {
  .container {
    padding: 1rem;
  }
}

/* 引入外部样式文件（必须写在所有规则之前） */
@import url('reset.css');

这类规则的具体用法在后续章节中逐一讲解。

CSS 如何应用

浏览器读取 CSS 后，会：

  1. 解析所有规则，匹配选择器到对应的 HTML 元素
  2. 解决冲突——当多条规则作用于同一元素时，根据**优先级（specificity）**决定谁生效
  3. 计算最终样式，渲染到屏幕上

这套流程称为层叠（cascade），是 CSS（层叠样式表）名字的由来。

书写位置

CSS 可以写在三个位置（详见 HTML 内嵌样式 中已介绍）：

方式语法适用场景
外部样式表<link rel="stylesheet" href="style.css">推荐——样式与内容分离
文档级<style>...</style>单页面特有样式
行内style="..."临时覆盖，避免大量使用

推荐使用外部样式表作为主要方式。本文档中代码示例为方便演示，大部分以独立 .css 文件的形式给出。