外部 CSS 和内部 CSS：link 与 style 详解

一句话说清外部 CSS

外部 CSS 是一个单独的 .css 文件。在每个需要它的页面的 <head> 中引入它：

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

文件本身只包含纯 CSS 规则，外面没有任何 HTML 标签：

/* styles.css */
body {
  font-family: system-ui, sans-serif;
  color: #111827;
}

.card {
  border: 2px solid #2563eb;
  border-radius: 8px;
  padding: 12px 16px;
}

下面的预览没有第二个文件可以加载，所以把同样的 CSS 放进了 <style> 元素。这就是内部 CSS，它的渲染效果和引入外部文件完全一样：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Card</title>
  <!-- On a real site: <link rel="stylesheet" href="styles.css"> -->
  <style>
    body {
      font-family: system-ui, sans-serif;
      color: #111827;
    }

    .card {
      border: 2px solid #2563eb;
      border-radius: 8px;
      padding: 12px 16px;
    }
  </style>
</head>
<body>
  <div class="card">One stylesheet, every page.</div>
</body>
</html>

内部 CSS：style 元素

内部 CSS（也叫内嵌 CSS）是页面中的一个 <style> 元素。把它放在 <head> 中，这样在渲染 body 之前样式就已经确定了。它作用于整个页面，而且它的规则可以使用选择器，这是行内 style 属性做不到的。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Internal CSS</title>
  <style>
    h1 { color: #2563eb; }
    .tag {
      background: #e5e7eb;
      padding: 2px 8px;
      border-radius: 999px;
    }
    .tag:hover { background: #f59e0b; }
  </style>
</head>
<body>
  <h1>Internal CSS</h1>
  <span class="tag">html</span>
  <span class="tag">css</span>
</body>
</html>

把鼠标悬停在一个标签上：:hover 在这里能生效，因为它是一条真正的规则。第三种写法，也就是 style 属性，见行内 CSS 页面。

内部 CSS 与外部 CSS 的区别

两者的优先级计算方式相同：<style> 元素里的一条规则和外部文件里同样的规则权重完全一样。权重相同时，在文档中靠后的那一条生效。

顺序：靠后的样式表胜出

样式表按文档顺序读取，<link> 和 <style> 都一样。对于优先级相同的两条规则，靠后的那条胜出。下面两个 <style> 块分别模拟一个外部文件和其后页面级别的覆盖：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Order</title>
  <style>
    /* first: think of this as styles.css */
    .btn { background: #2563eb; color: white; padding: 8px 14px; border: 0; }
  </style>
  <style>
    /* second: a page override, same selector */
    .btn { background: #16a34a; }
  </style>
</head>
<body>
  <button class="btn">Green: the later rule wins</button>
</body>
</html>

按钮保留了第一条规则中的内边距和白色文字，只从第二条规则中取了背景色。这就是为什么网站自己的样式表要放在框架的样式表之后：先用 <link> 引入库，再引入你自己的。

href 中的文件路径

<link> 的 href 是一个 URL，相对于 HTML 文件所在的位置解析。

如果网站的页面位于不同层级的目录中，使用相对根目录的写法（/css/styles.css），同一个路径在每个页面上都能用。

用于打印和其他媒体的样式表

media 属性把样式表限制在满足条件时才生效。<link> 和 <style> 都接受它：

<link rel="stylesheet" href="print.css" media="print">
<link rel="stylesheet" href="wide.css" media="(min-width: 900px)">

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Media</title>
  <style>
    .banner { background: #2563eb; color: white; padding: 12px; }
  </style>
  <style media="print">
    /* only when printing: hide the banner */
    .banner { display: none; }
  </style>
</head>
<body>
  <div class="banner">Visible on screen, hidden when printed.</div>
  <p>The article text prints normally.</p>
</body>
</html>

预览是屏幕，所以横幅会显示出来。在真实页面中，打印出来时横幅会消失；在开发者工具中模拟 print 媒体类型（Rendering 面板），也能看到同样的效果。

常见错误

• 路径写错。 href 中的一个拼写错误就会导致什么都加载不了，页面会以无样式的状态显示。打开开发者工具的 Network 面板，查看 .css 文件是否返回 404。
• 忘记写 rel="stylesheet"。 没有它，<link href="styles.css"> 不会加载样式表。
• 在 .css 文件里写 HTML。 .css 文件里只能有规则。里面的 <style> 标签不是有效的 CSS，会破坏紧挨着它的规则。
• 把你的样式表放在框架的样式表之前。 优先级相同时，靠后的文件胜出，所以要最后引入你自己的 CSS。
• 看到的是旧版本。 浏览器会缓存样式表。部署修改后，强制刷新，或者在 URL 中加上版本号（styles.css?v=2）。