2.1 CSS 是什么：三种引入方式

上一章我们用 HTML 搭好了页面的骨架，但它看起来很朴素：黑字、白底、默认字体。CSS（Cascading Style Sheets，层叠样式表） 就是用来美化它的——颜色、字号、间距、布局，全靠 CSS。

打个比方：如果 HTML 是房子的毛坯结构（哪里是墙、哪里是门），CSS 就是装修（刷什么颜色、贴什么墙纸、家具怎么摆）。

CSS 规则长什么样

一条 CSS 规则由两部分组成：选择器（选中谁）和声明块（怎么改）：

css

h1 {
  color: blue;
  font-size: 32px;
}

h1 是选择器：表示“所有 h1 元素”。

大括号里是声明：每条是 属性: 值;，比如把颜色设成蓝色、字号设成 32 像素。

别忘了每条声明末尾的分号 ;。

三种把 CSS 接到页面上的方式

下面的实验让你切换三种方式，会发现它们产出的效果完全一样，区别只在“代码写在哪里”。

正在加载交互实验...

1. 内联样式（inline）——直接写在标签的 style 属性里：

html

<p style="color: red; font-weight: bold;">一段红色加粗的字</p>

只影响这一个元素，写起来快，但无法复用，而且优先级最高（容易盖掉别的样式，调试时反而麻烦）。

2. 内部样式（internal）——写在 <head> 里的 <style> 标签中：

html

<head>
  <style>
    p { color: red; }
  </style>
</head>

作用于整个页面的所有 <p>。适合单个页面的小项目。

3. 外部样式（external）——单独写一个 .css 文件，用 <link> 引入（最推荐）：

html

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

css

/* styles.css */
p { color: red; }

正在加载概念检查...

为什么推荐外部样式表

复用：一个 .css 文件可以被很多个页面共享，改一处，全站统一更新。

分工清晰：HTML 管内容，CSS 管样式，各司其职，代码更整洁。

缓存：浏览器会缓存 .css 文件，访问其它页面时无需重复下载。

注意

“层叠”是什么意思？ CSS 的名字里有“层叠（Cascading）”，意思是同一个元素可能被多条规则同时影响，浏览器会按一套优先级规则把它们“叠加”起来。简单记：内联 > 内部/外部，越具体的选择器优先级越高。

正在加载概念检查...

正在加载本节练习...

2.1 CSS 是什么：三种引入方式

打个比方：如果 HTML 是房子的毛坯结构（哪里是墙、哪里是门），CSS 就是装修（刷什么颜色、贴什么墙纸、家具怎么摆）。

CSS 规则长什么样

一条 CSS 规则由两部分组成：选择器（选中谁）和声明块（怎么改）：

css

h1 {
  color: blue;
  font-size: 32px;
}

h1 是选择器：表示“所有 h1 元素”。

大括号里是声明：每条是 属性: 值;，比如把颜色设成蓝色、字号设成 32 像素。

别忘了每条声明末尾的分号 ;。

三种把 CSS 接到页面上的方式

下面的实验让你切换三种方式，会发现它们产出的效果完全一样，区别只在“代码写在哪里”。

正在加载交互实验...

1. 内联样式（inline）——直接写在标签的 style 属性里：

html

<p style="color: red; font-weight: bold;">一段红色加粗的字</p>

只影响这一个元素，写起来快，但无法复用，而且优先级最高（容易盖掉别的样式，调试时反而麻烦）。

2. 内部样式（internal）——写在 <head> 里的 <style> 标签中：

html

<head>
  <style>
    p { color: red; }
  </style>
</head>

作用于整个页面的所有 <p>。适合单个页面的小项目。

3. 外部样式（external）——单独写一个 .css 文件，用 <link> 引入（最推荐）：

html

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

css

/* styles.css */
p { color: red; }

正在加载概念检查...

为什么推荐外部样式表

复用：一个 .css 文件可以被很多个页面共享，改一处，全站统一更新。

分工清晰：HTML 管内容，CSS 管样式，各司其职，代码更整洁。

缓存：浏览器会缓存 .css 文件，访问其它页面时无需重复下载。

注意

正在加载概念检查...

正在加载本节练习...