第一章 · 1.1 节

语法结构与引入方式

CSS（Cascading Style Sheets，层叠样式表）用来描述 HTML 元素该如何呈现。本节从最基本的语法结构讲起，并梳理 CSS 代码可以写在哪里、各自的适用场景。

规则的语法结构

一条 CSS 规则由「选择器」和「声明块」组成，声明块中可以包含多条「属性: 值」的声明，以分号分隔。

/* 选择器 { 属性: 值; 属性: 值; } */
.card {
  color: #2b2b2b;
  font-size: 16px;
}

CSS 只有一种注释写法 /* ... */，不支持 //，且不能嵌套。

/* 这是一条注释，浏览器会完全忽略 */
body { margin: 0; } /* 也可以写在行尾 */

直接写在标签的 style 属性中，只对该元素生效，优先级最高。

<p style="color: red; font-weight: bold;">紧急提示</p>

提示行内样式难以复用、难以维护，且优先级过高容易覆盖正常样式表，通常只在动态生成的极少数场景（如 JS 计算出的定位坐标）中使用。

写在文档 <head> 中的 <style> 标签内，作用于整个 HTML 文件。

<head>
  <style>
    body { font-family: sans-serif; }
  </style>
</head>

适合单页面的小型演示或教学示例，但无法在多个 HTML 文件间共享样式。

把 CSS 写在独立的 .css 文件中，通过 <link> 标签引入。这是真实项目中最常用、也是推荐的方式——样式与结构分离，且同一份样式文件可以被多个页面复用，浏览器还能对其单独缓存。

<head>
  <link rel="stylesheet" href="styles/main.css">
</head>

在一个 CSS 文件内部导入另一个 CSS 文件，常用于拆分模块（如变量、重置样式）。

/* main.css */
@import url("reset.css");
@import url("variables.css");

body { font-family: var(--font-body); }

注意@import 必须写在样式表的最前面（@charset 之后），且每一条 @import 都会产生额外的网络请求、阻塞渲染，在生产环境中优先用构建工具合并文件，而非依赖 @import。