2. 第一个 CSS 程序

本节目标：掌握 CSS 的三种引入方式，理解它们的区别和适用场景。

CSS 的三种引入方式

CSS 代码必须放进 HTML 页面里才能生效。根据「CSS 代码放哪里」，一共有三种方式：

内联样式：直接写在 HTML 标签的 style 属性里
内部样式表：写在 <head> 里的 <style> 标签中
外部样式表：写在独立的 .css 文件里，用 <link> 引入

下面我们一个个来看。

内联样式

内联样式最简单，直接在标签上写 style 属性就行：

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>内联样式</title>
</head>
<body>
  <h1 style="color: white; text-align: center;">标题变白居中</h1>
  <p style="color: red; font-size: 18px;">这段文字红色，18px</p>
</body>
</html>

这种方式适合临时调试，或者只给某一个元素加个一次性样式。

Note

内联样式优先级最高，但会跟 HTML 内容混在一起，维护起来很麻烦。实际项目中尽量少用。

内部样式表

内部样式表把 CSS 代码集中放在 <style> 标签里，一般放在 <head> 中：

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>内部样式表</title>
  <style>
    /* 页面背景浅蓝 */
    body {
      background-color: lightblue;
    }
    /* 标题深蓝色，左缩进 */
    h1 {
      color: navy;
      margin-left: 20px;
    }
    /* 段落字体 */
    p {
      font-family: Verdana;
      font-size: 16px;
    }
  </style>
</head>
<body>
  <h1>Hello CSS</h1>
  <p>这是内部样式表的例子。</p>
</body>
</html>

这种方式适合单个页面有独特样式的情况。CSS 和 HTML 在同一个文件里，方便查看。

外部样式表

外部样式表是最推荐的做法。CSS 代码单独放在 .css 文件里，HTML 用 <link> 标签引入：

HTML 文件（index.html）：

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>外部样式表</title>
  <!-- 引入外部 CSS 文件 -->
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>Hello CSS</h1>
  <p>样式来自外部文件。</p>
</body>
</html>

CSS 文件（style.css）：

/* 外部样式表文件 style.css */
body {
  background-color: #f0f0f0;
}

h1 {
  color: #2c3e50;
  text-align: center;
}

p {
  color: #7f8c8d;
  font-size: 16px;
  line-height: 1.6;
}

Tip

外部样式表最大的好处是「一处修改，全站生效」。改一个 CSS 文件，所有引用它的页面都会更新。

三种方式怎么选

方式	优点	缺点	适用场景
内联样式	优先级最高，调试方便	内容和样式混在一起，无法复用	临时测试、动态样式
内部样式表	单页面样式集中管理	不能跨页面复用	独立页面、Demo 演示
外部样式表	可复用、好维护、能缓存	多一次 HTTP 请求	正式项目首选

多重样式的优先级

当同一个元素被多种方式设置样式时，浏览器按以下优先级决定用哪个：

内联样式 > 内部样式表 > 外部样式表 > 浏览器默认

如果同时有内部和外部样式表，后加载的覆盖先加载的。看这个例子：

<head>
  <!-- 先加载外部样式，h1 为蓝色 -->
  <link rel="stylesheet" href="style.css">
  <!-- 后加载内部样式，h1 为绿色 -->
  <style>
    h1 { color: green; }
  </style>
</head>

最终 <h1> 显示绿色，因为内部样式后加载，覆盖了外部样式。

Note

优先级规则在复杂项目中很重要。后面第 44 章会详细讲 CSS 优先级的计算方式。

动手试试

现在你可以自己创建一个 HTML 文件和一个 CSS 文件：

新建 index.html，用外部样式表引入 CSS
新建 style.css，写几条简单的样式规则
浏览器打开 HTML 文件，看看效果

下一章我们来拆解 CSS 代码的语法结构，搞清楚每条规则到底长什么样。