CSS 语法与引入方式

上一篇认识了 CSS 是什么,这一篇我们正式开始写。先看清 CSS 的"骨架"——一条规则长什么样、注释怎么写;然后学会把 CSS 接到 HTML 里去的三种方式,以及各自的取舍。这一章不难,但是后面所有内容的地基。

1. CSS 规则的基本结构

一段 CSS 由若干"规则(rule)"组成。每条规则的格式固定:选择器 + 一对花括号,括号里写若干"声明(declaration)"。每条声明又是"属性:值",以分号结尾。

/* 一条 CSS 规则 = 选择器 + 声明块 */
selector {
  property: value;        /* 一条声明 = 属性:值 */
  property: value;
}

/* 例如:把所有段落文字设为深灰、行高 1.6 */
p {
  color: #333;
  line-height: 1.6;
}

几个要点:

选择器:决定这条规则作用到哪些元素。比如 p 作用到所有段落,.btn 作用到带 btn 类的元素。下一篇会详细讲。
属性:要改什么。比如 color 改颜色、font-size 改字号。CSS 属性有上百个,常用就二三十个。
值:改成什么样。比如 red、16px、center。
分号:每条声明必须以分号结尾,否则浏览器可能解析出错。新手最常犯的错就是漏分号。

注意 CSS 不区分大小写,但属性名和值按惯例全小写。选择器则区分大小写(类名 .btn 和 .BTN 是两个不同的类)。

2. 注释

CSS 的注释语法只有一种:斜杠星号包裹,可以跨多行。注意它和 HTML 注释、JS 注释都不一样,不要混淆。

/* 这是单行注释 */

/*
   这是多行注释,
   可以跨多行,
   用斜杠星号包裹
   (注意:CSS 只有这一种注释,没有双斜杠)
*/

/* 推荐用注释给样式分组,便于维护 */
/* ===== 头部 ===== */
.header { ... }

/* ===== 正文 ===== */
.main { ... }

注释不会被浏览器渲染,纯粹是给人和团队看的。养成给样式分块加注释的习惯,几个月后回来看不至于一头雾水。

3. 引入 CSS 的三种方式

CSS 写好后,得让浏览器知道去哪找它。在 HTML 里引入 CSS 一共有三种方式,实际项目里强烈推荐第一种。

方式 1:外部样式表(最推荐)

把 CSS 写在独立的 .css 文件里,用 link 标签引入。这是实际项目的标准做法。

<!-- 方式 1:外部样式表(最推荐) -->
<!-- 在 HTML 的 head 里用 link 标签引入 -->
<head>
  <link rel="stylesheet" href="style.css">
  <link rel="stylesheet" href="/css/reset.css">
</head>

/* style.css 文件里直接写 CSS,不需要 style 标签 */
body { margin: 0; }
.btn { padding: 8px 16px; }

优点一大堆:

复用:一份 CSS 文件可以被全站成百上千个页面共用,改一处全站生效。
缓存:浏览器会缓存 CSS 文件,用户第二次访问不用重新下载,页面更快。
分离:HTML 只关心结构,CSS 只关心样式,各管各的,代码清晰。
可维护:样式集中在一处,改起来不用满 HTML 找。

方式 2:内部样式(写在 style 标签)

在 HTML 的 head 里用 style 标签包一段 CSS。这种方式只在当前页面生效。

<!-- 方式 2:内部样式(写在 style 标签里) -->
<head>
  <style>
    body { margin: 0; font-family: Arial, sans-serif; }
    .hero { background: #4f8cff; color: #fff; }
  </style>
</head>

适用场景比较少:比如单页的落地页、邮件模板、或者临时覆盖某页的样式。一般不推荐用于多页项目,因为没法复用。

方式 3:行内样式(写在 style 属性)

直接在元素的 style 属性里写 CSS。这种方式优先级最高,但几乎没法维护。

<!-- 方式 3:行内样式(写在 style 属性里) -->
<p style="color: red; font-size: 18px;">这段文字会变红变大</p>
<button style="padding: 8px 16px; background: #4f8cff;">按钮</button>

实际开发中基本只在一种场景下用:需要用 JavaScript 动态设置样式时(比如拖拽时改位置)。其他情况都该避免,因为它把样式和结构混在一起,改起来很痛苦。

三种方式的优先级

如果三种方式同时给同一个元素加样式,优先级是:行内 > 内部/外部(看顺序)。后写的内部/外部样式会覆盖先写的。这也是为什么"少用行内"——它太强势,后面想覆盖都覆盖不了。

4. @ 规则(at-rules)

CSS 里还有一些以 @ 开头的特殊语句,叫"@规则"。它们不是普通的"选择器+声明",而是给浏览器下达特殊指令。常用的几个:

/* @import: 在 CSS 文件里引入另一个 CSS */
@import url('reset.css');
@import 'theme.css';

/* @media: 媒体查询,响应式用 */
@media (min-width: 768px) {
  .container { max-width: 720px; }
}

/* @keyframes: 定义动画关键帧 */
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* @font-face: 自定义字体 */
@font-face {
  font-family: 'MyFont';
  src: url('myfont.woff2') format('woff2');
}

这些后面都会单独讲到:媒体查询在响应式章节、关键帧在动画章节、字体在文本章节。这里先有个印象即可。

5. 空白符与格式化

CSS 对空白符(空格、换行、Tab)不敏感——下面这几种写法效果完全一样,选你顺手的:

展开式:每条声明单独一行,可读性好(推荐团队代码用)。
压缩式:全部挤在一行,文件小(生产环境部署用)。

不必纠结格式,实际项目上线前会用 PostCSS 之类的工具自动压缩。开发阶段按可读性写就行。

6. 属性值的常见类型

理解"值"的分类,写 CSS 时就不至于瞎试。常见的值有这么几类:

.box {
  /* 数值 + 单位 */
  width: 200px;          /* 像素(绝对) */
  font-size: 1.2rem;     /* 相对根字号 */
  width: 50%;            /* 相对父级 */
  padding: 1em;          /* 相对当前字号 */
  width: 1fr;            /* 网格里的分数单位 */

  /* 关键字 */
  display: block;        /* 预定义关键字 */
  position: relative;

  /* 函数 */
  color: rgb(255, 87, 34);
  width: calc(100% - 40px);
  background: var(--primary);
}

记住几个关键点:

绝对单位(px):写多少就是多少像素。
相对单位(rem、em、%、fr):响应式首选,会随父级或根字号缩放。
关键字:预定义的值,如 block、center、auto。
函数:像 rgb()、calc()、var(),后续都会讲到。

小结

这一章你掌握了 CSS 的"骨架":一条规则 = 选择器 + 声明块,声明 = 属性:值;注释只有斜杠星号;三种引入方式里外部样式表是首选;还有一堆以 @ 开头的特殊规则等着后面展开。下一篇我们深入选择器——这是 CSS 里最重要的概念之一,决定"规则作用到谁"。

← 上一篇 CSS 简介

下一篇 CSS 选择器 →

✈️💬