CSS 入门：给网页穿上衣服的三种方式

HTML 立起了骨架，但光有骨架的页面是”裸”的——黑字白底、毫无美感。CSS（层叠样式表，Cascading Style Sheets）就是负责”穿衣服”的那一层：颜色、字号、间距、布局，全归它管。

你可以把 HTML 想成毛坯房（钢筋水泥的结构），CSS 是装修（刷墙、铺地板、摆家具）。没有 CSS，网页能看但丑；有了 CSS，同样的 HTML 能变成完全不同的样子。这一篇我们不讲花哨布局，先把两件最基础的事讲透：CSS 怎么和 HTML 连起来（三种引入方式），以及 CSS 怎么精准选中要打扮的元素（选择器）。

CSS 到底在管什么

先建立最关键的认知：HTML 负责”有什么、谁是谁”，CSS 负责”长啥样”。两者分工明确，别让 HTML 越俎代庖去管样式。

CSS 的基本写法是一个固定公式：选择器 + 声明块。

h1 {
  color: #2563eb;
  font-size: 28px;
}

逐行拆解这个写法，因为后面几千个例子都是这个套路：

第一行 h1 叫选择器，回答”我要打扮谁”。这里写 h1，意思是”页面上所有的一级标题”。
后面的大括号 { } 叫声明块，里面装一条条具体的”打扮指令”。
每条声明格式固定：属性: 值;。color: #2563eb; 表示”文字颜色设为蓝色”；font-size: 28px; 表示”字号 28 像素”。结尾分号 ; 像句号，告诉浏览器”这条说完了”。

一个好用的比喻：HTML 是演员，CSS 是化妆师和服装师。同一个演员（同一段 HTML），换一套妆造（不同的 CSS）就能演不同角色、呈现完全不同的风格。化妆师不关心演员念什么台词（HTML 的内容），只管外在长相（CSS 的外观）。

三种引入方式

CSS 写好了，得让它和 HTML 发生关系。根据 CSS 写在哪，有三种接法，适用场景完全不同。

1. 行内样式：直接写在标签上

最”就近”的写法，把样式用标签的 style 属性塞进去：

<h1 style="color: #2563eb; font-size: 28px;">标题</h1>

好处是”立竿见影”，样式就贴在元素身上。但坏处明显：样式和 HTML 混在一起，过几天想改个颜色得满世界找；而且没法复用——十个 h1 想统一改蓝色，得一个个改。所以行内样式只适合临时调试或极个别”就这一个元素特殊”的例外，正经项目别这么干。

2. 内部样式：写在 `<style>` 里

在 HTML 的 <head> 里放一个 <style> 标签，集中写样式：

<head>
  <style>
    h1 { color: #2563eb; }
    p { line-height: 1.8; }
  </style>
</head>

好处是样式和页面绑在一起，一个文件就能跑，适合写小 demo。但软肋也清楚——网站几十个页面，每个页面都写一遍相同样式，改个主色调得打开几十个文件挨个改。所以它通常放”这一页独有的样式”，通用样式交给第三种。

3. 外部样式：单独的 .css 文件（最推荐）

这是几乎所有真实项目都在用的方式。把样式写进独立 .css 文件，再用 <link> 引入：

<link rel="stylesheet" href="style.css" />

/* style.css 里 */
h1 { color: #2563eb; }
p { line-height: 1.8; }

三大好处，每一条都实实在在：

彻底分离：HTML 管结构、CSS 管样式，各司其职，代码清爽。
全站复用：一个 css 文件被所有页面共用，改一处全站生效。比如想把全站主色从蓝换绿，只改这一个文件一行。
浏览器缓存：css 下载一次后浏览器缓存，用户访问第二页不用重新下载，打开更快。

三种方式同时作用在同一元素时，优先级是：行内样式 > 内部/外部样式（后两者之间谁写在后面、选择器更特指谁赢）。但请别靠”行内压一切”偷懒——那最破坏可维护性。

选择器：CSS 的”瞄准镜”

样式写得再漂亮，打不中目标也白搭。选择器就是”选中哪些元素来应用样式”的规则。下面是最常用的几种。

元素选择器（标签选择器）

直接用标签名，选中所有该标签：

p { color: #333; }      /* 所有段落 */
a { color: #2563eb; }   /* 所有链接 */

简单但”波及面太广”，适合设全局默认。

类选择器（.class）——最常用

在 HTML 里给元素加 class 属性，CSS 用 .类名 选中：

<p class="intro">这是一段介绍</p>
<p>这是普通段落</p>

.intro { font-size: 18px; color: #e11d48; }

只有带 class="intro" 的那段被影响，另一段不变。一个 class 可以加在多个元素上，一个元素也可以有多个 class（空格隔开：class="intro bold"）。类选择器灵活、可复用，是日常首选。

ID 选择器（#id）

HTML 里 id 应当全页唯一，CSS 用 #id 选中那个特定元素：

<div id="header">顶部</div>

#header { height: 60px; background: #000; }

ID 选择器优先级比类高，但因为 id 唯一、不能复用，一般只用来”标记页面上独一无二的大块结构”（如页头、页脚），不用来做可复用的样式。

后代选择器（空格）

选中”某个容器里面的某类元素”，用空格表示层级：

article p { color: gray; }   /* article 里面的所有 p */

意思是”只有 article 里的 p 才变灰”，外面的 p 不受影响。这是做局部样式最常用的写法。

其他常用选择器

* { margin: 0; }              /* 通配符：选中所有元素（常用于重置默认间距） */
ul li { list-style: none; }   /* 后代：ul 里的 li */
a:hover { color: red; }       /* :hover 伪类：鼠标悬停时 */
p::first-line { color: red; } /* ::first-line 伪元素：第一行 */

选择器优先级（重要）

当多条规则打中同一个元素，谁生效？粗略优先级（从高到低）：

行内样式（style="..."）
ID 选择器（#id）
类/伪类/属性选择器（.class、:hover）
元素/伪元素选择器（p、::first-line）

还有一条铁律：优先级相同时，后写的覆盖先写的（层叠 cascade 的由来）。想强制生效可在声明后加 !important（但能不用就不用，它破坏正常的优先级逻辑，调试时极难排查）。

一个能直接抄的示例

把上面学的串起来，一个带外部样式的完整小页面：

<!-- index.html -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1 class="title">我的小站</h1>
  <p class="intro">这是用外部 CSS 打扮过的页面。</p>
  <p>普通段落不受影响。</p>
</body>
</html>

/* style.css */
body { font-family: "Microsoft YaHei", sans-serif; }
.title { color: #2563eb; font-size: 32px; }
.intro { color: #e11d48; font-size: 18px; }

打开页面，h1 变蓝变大、介绍段变红，普通段保持默认——这就是”外部 CSS + 类选择器”的日常写法。

常见新手坑

分号漏写：每条声明结尾的 ; 忘了，会导致这条和下一句”粘”在一起，样式失效。
选择器名字对不上：CSS 写 .intro，HTML 里 class="intor" 拼错，样式不生效（检查拼写）。
行内样式覆盖一切：调试时临时加的行内 style 忘了删，导致外部 CSS 怎么改都没反应。
优先级搞混：用元素选择器想覆盖类选择器，结果被类的更高优先级压住。需要时提高选择器特指度或用更具体的选择器。

更多实战案例：三种方式怎么选

假设你要给全站所有链接改成红色。用内联样式得给每个 <a> 都写 style="color:red"，改起来要改几十处，显然不现实；用内部样式表在 <head> 写一条 a { color: red; } 就全改了；用外部样式表则把这条规则写进 style.css，全站所有页面引同一个文件，改一处全站生效。所以结论很清晰：正式项目一律用外部样式表，它让”样式”和”结构”彻底分离，最好维护。

再比如，你想临时调试某一个元素，用开发者工具改它的内联 style 最快，但这只影响当前浏览器当前会话，不会存进文件——调试完记得把确认好的样式搬到外部 css 里。

常见坑

优先级算不清：内联(1000) > ID(100) > 类(10) > 标签(1)。遇到”样式不生效”，先想是不是被更高优先级覆盖了，开发者工具里被划掉的样式就是被覆盖的。
外部 css 路径写错：<link href="style.css"> 是相对当前 html 算的，放错文件夹就加载不到，页面”没样式”。
把结构样式写进内联：后续难维护，也难复用。
忘记 <link rel="stylesheet"> 的 rel：少了 rel 浏览器不知道这是样式表。

小测验

问题1：给某个 <p> 同时用内联 style="color:blue" 和外部 css p{color:red}，最终什么颜色？答案：蓝色（内联优先级最高）。
问题2：为什么推荐外部样式表？答案：结构样式分离、可复用、好维护、能缓存。
问题3：ID 选择器 .box 和 #box 哪个优先级高？答案：#box（ID 高于类）。

这一篇你该记住的

HTML 管结构、CSS 管外观；CSS 公式是”选择器 { 属性: 值; }”。
三种引入：行内（不推荐）、内部 <style>（单页）、外部 .css + <link>（最推荐，分离+复用+缓存）。
选择器：元素(p)、类(.class 最常用可复用)、ID(#id 唯一)、后代(a b 空格)、通配(*)、伪类(:hover)。
优先级：行内 > ID > 类 > 元素；同优先级后写覆盖先写。
真实项目用外部 CSS + 类选择器组织样式。

下一篇我们讲 CSS 盒模型——为什么你设了宽度却”对不上”，content/padding/border/margin 这四层到底怎么算。

前端开发