第一章 · 1.1 节

语法结构与引入方式

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

规则的语法结构

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

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

选择器（selector）——决定这条规则作用于哪些元素，如 .card。
属性（property）——要设置的样式维度，如 color。
值（value）——属性的具体取值，如 #2b2b2b。
最后一条声明的分号可以省略，但养成不省略的习惯能避免增删代码时漏加分号。

注释

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

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

行内样式（Inline Style）

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

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

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

内部样式表（Internal Style Sheet）

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

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

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

外部样式表（External Style Sheet）

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

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

@import 引入

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

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

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

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

如何选择

方式	作用范围	优先级	适用场景
行内样式	单个元素	最高	JS 动态计算的样式
内部样式表	当前文档	中	单页 Demo、教学示例
外部样式表	被引入的所有文档	中	真实项目首选
@import	被导入的样式表	同外部样式表	拆分 CSS 模块（谨慎使用）

Chapter 1 · Section 1.1

Syntax and How to Include CSS

CSS (Cascading Style Sheets) describes how HTML elements should be presented. This section starts with the most basic syntax, then reviews where CSS code can live and when each approach is appropriate.

The Syntax of a Rule

A CSS rule is made up of a selector and a declaration block. The declaration block can contain several property: value declarations, separated by semicolons.

/* selector { property: value; property: value; } */
.card {
  color: #2b2b2b;
  font-size: 16px;
}

Selector — determines which elements the rule applies to, e.g. .card.
Property — the style aspect to set, e.g. color.
Value — the concrete value assigned to a property, e.g. #2b2b2b.
The semicolon after the final declaration may be omitted, but always writing it helps you avoid missing semicolons when you add or remove code.

Comments

CSS has only one comment syntax, /* ... */. // is not supported, and comments cannot be nested.

/* This is a comment; the browser ignores it completely */
body { margin: 0; } /* comments can also go at the end of a line */

Inline Styles

Written directly in the style attribute of a tag, it affects only that element and has the highest priority.

<p style="color: red; font-weight: bold;">Urgent notice</p>

TipInline styles are hard to reuse and maintain, and their high priority can easily override normal style sheets, so they are usually limited to a few dynamically generated cases, such as positioning coordinates computed by JavaScript.

Internal Style Sheets

Written inside a <style> tag in the document's <head>, it applies to the entire HTML file.

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

It suits small demos and teaching examples on a single page, but the styles cannot be shared across multiple HTML files.

External Style Sheets

CSS lives in a separate .css file and is brought in with a <link> tag. This is the most common and recommended approach in real projects — it separates styles from structure, lets multiple pages reuse the same style sheet, and allows the browser to cache it independently.

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

The @import Rule

Imports one CSS file inside another, often used to split a project into modules (e.g., variables, reset styles).

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

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

Note@import must appear at the very beginning of the style sheet (after @charset), and each @import adds an extra network request and blocks rendering. In production, prefer merging files with a build tool instead of relying on @import.

How to Choose

Method	Scope	Priority	Use case
Inline style	Single element	Highest	Styles computed by JavaScript at runtime
Internal style sheet	Current document	Medium	Single-page demos, teaching examples
External style sheet	Every document that links it	Medium	The first choice in real projects
@import	The style sheet it is imported into	Same as external	Splitting CSS modules (use with caution)