内联 CSS：style 属性与引入 CSS 的 3 种方式

什么是内联 CSS

内联 CSS 是用 style 属性直接写在 HTML 元素上的 CSS。它的值是一串声明（property: value;），只作用于这个元素。

<p>A normal paragraph.</p>

<p style="color: #2563eb;">A blue paragraph.</p>

<p style="color: #16a34a; font-weight: bold; font-size: 20px;">
  Green, bold and 20px.
</p>

没有选择器，也没有花括号：属性所在的元素就是目标。声明之间用分号分隔。最后一个分号可以省略，但保留它，以后添加下一条声明时更不容易出错。

语法

<element style="property: value; property: value;">

不是声明的内容都不允许写。:hover、::before、@media 和选择器都不能出现在 style 属性里。

在 HTML 中引入 CSS 的 3 种方式

CSS 可以通过三种方式进入页面。本页讲第一种；外部和内部 CSS 有单独的一页。

用三种方式给同一段落设置样式（外部文件以注释的形式展示，因为预览中没有第二个文件可以加载）：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Three ways</title>
  <!-- External: <link rel="stylesheet" href="styles.css"> -->
  <style>
    /* Internal: one rule styles every matching element */
    .note {
      background: #e5e7eb;
      padding: 8px 12px;
      border-radius: 6px;
    }
  </style>
</head>
<body>
  <p class="note">Styled by the internal rule.</p>
  <p class="note">Same rule, second paragraph.</p>
  <p class="note" style="background: #f59e0b;">Inline background wins here.</p>
</body>
</html>

第三个段落保留了 .note 规则中的内边距和圆角，只替换了背景，因为内联样式只设置了这一个属性。

内联样式为什么会胜出

当样式表规则和内联样式设置同一个属性时，内联样式胜出。选择器有多具体都没关系：即使是 ID 选择器也会输。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Inline wins</title>
  <style>
    #title { color: #16a34a; }
    p { color: #111827; }
  </style>
</head>
<body>
  <p id="title" style="color: #2563eb;">Blue: the inline style beats the ID selector.</p>
</body>
</html>

唯一的例外是 !important。样式表中标记了 !important 的声明胜过普通的内联声明，而内联的 !important 又胜过这两者。这正是内联样式让网站难以维护的原因：要从样式表中修改它们，就得用 !important，于是开始层层升级。完整的顺序见 !important 一页。

什么时候适合用内联 CSS

当值是数据而不是设计时，内联样式很合适：它因元素而异，由模板或 JavaScript 写入。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Progress</title>
  <style>
    .track { background: #e5e7eb; border-radius: 999px; height: 12px; }
    .bar { background: #2563eb; height: 100%; border-radius: 999px; }
  </style>
</head>
<body>
  <p>Upload</p>
  <div class="track"><div class="bar" style="width: 35%;"></div></div>
  <p>Download</p>
  <div class="track"><div class="bar" style="width: 80%;"></div></div>
</body>
</html>

外观（颜色、高度、圆角）写在样式表里，只有每个进度条都不同的宽度是内联的。JavaScript 通过 element.style 写入的也是同一个属性：

<button id="btn">Make it amber</button>
<p id="msg">Watch this text.</p>
<script>
  document.getElementById('btn').addEventListener('click', () => {
    const msg = document.getElementById('msg');
    msg.style.color = '#f59e0b';
    msg.style.fontWeight = 'bold';
  });
</script>

点击之后，段落的 HTML 会变成 style="color: rgb(245, 158, 11); font-weight: bold;"。带连字符的属性名在 JavaScript 中要写成驼峰形式（font-weight 写作 fontWeight）。

CSS 变量往往是最干净的折中方案：只在内联中设置变量，style="--progress: 35%"，再让样式表去使用它。参见 CSS 变量。

内联 CSS 的不足

• 没有状态和伪元素。 在 style 属性中不能写 :hover、:focus 或 ::before。
• 没有媒体查询。 内联的宽度无法在手机上改变。
• 重复。 十个按钮使用同样的内联样式，就意味着有十个地方要改。
• 难以覆盖。 只有样式表中的 !important 能胜过它。
• 内容安全策略（CSP）。 如果严格的 CSP 在 style-src 中没有 'unsafe-inline'，就会阻止 HTML 中写的 style 属性。

常见错误

• 在 style 里写选择器或花括号。 style="p { color: red }" 会被忽略。里面只能写声明。
• 用 = 代替 :。 应该是 color: red，而不是 color=red。
• 嵌套双引号。 style="font-family: "Arial"" 会让属性提前结束。里面请用单引号。
• 忘了写单位。 style="width: 200" 会被忽略；要写成 200px。只有长度为 0 时可以省略单位。
• 整个网站都用内联样式。 把重复的样式移到样式表中的一个类里，内联样式只留给因元素而异的值。