8. style 与 link 标签

本节目标：掌握在 HTML 中使用 CSS 的两种方式——内联 <style> 和外部 <link>。

HTML 负责结构，CSS 负责样式。这一节我们学怎么把 CSS”接”到 HTML 上。

方式一：style 标签（内联 CSS）

直接写在 HTML 文件里：

<head>
  <style>
    body {
      font-family: sans-serif;
      margin: 0;
      padding: 20px;
    }
    h1 {
      color: #333;
    }
    p {
      line-height: 1.8;
    }
  </style>
</head>

适合样式少、单页面的情况。如果页面很多，样式写在一起会让 HTML 文件变得臃肿。

方式二：link 标签（外部样式表）

把 CSS 写在一个独立的 .css 文件里，然后用 <link> 引入：

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

rel="stylesheet" 告诉浏览器：“这是一个样式表”。href 是样式文件的路径。

Tip

实际项目中，绝大多数情况用外部样式表。HTML 和 CSS 分开，代码更清晰，也方便复用。

link 标签的 media 属性

media 属性可以指定样式在什么条件下生效：

<!-- 打印时生效 -->
<link rel="stylesheet" href="print.css" media="print">

<!-- 屏幕宽度小于 600px 时生效 -->
<link rel="stylesheet" href="mobile.css" media="screen and (max-width: 600px)">

常见 media 值：

值	含义
`all`	所有设备（默认）
`screen`	屏幕
`print`	打印预览/打印

两种方式对比

方式	优点	缺点
`<style>`	不需要额外请求，适合少量样式	不能复用，HTML 文件变大
`<link>`	可复用，HTML 和 CSS 分离	多一次 HTTP 请求

引入多个样式表

可以引入多个：

<link rel="stylesheet" href="reset.css">
<link rel="stylesheet" href="layout.css">
<link rel="stylesheet" href="theme.css">

后面的样式会覆盖前面的（如果选择器优先级相同的话）。

完整示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>我的网站</title>
  <link rel="stylesheet" href="style.css">
  <link rel="stylesheet" href="print.css" media="print">
</head>
<body>
  <h1>Hello</h1>
</body>
</html>

小结

<style> 标签写内联 CSS，适合少量样式
<link rel="stylesheet"> 引入外部 CSS 文件，推荐方式
media 属性可以按条件加载样式
可以引入多个样式表

下一节，我们讲 <script> 标签。