如何在 HTML 中插入 CSS 样式？优先顺序是什么？

本文将探讨如何在 HTML 中插入 CSS 样式，并解析 CSS 样式优先顺序。并讨论现代开发中常见的做法及各自的优缺点。

三种基本的 CSS 样式插入方式

1. 内联样式（Inline Styles）

内联样式（Inline Styles）是将 CSS 直接写在 HTML 标签的 style 属性中。这种方法适用于简单的样式或临时调整。

优点:不需要额外的 CSS 文件，适合小范围或临时的样式修改
缺点:不易维护，样式分散在 HTML 档案中
程式码范例:

<p style="font-size: 20px; color: red;">这是一段红色的文字。</p>

2. 内部样式（Internal Styles）

内部样式（Internal Styles）是将 CSS 放在 HTML 文件的 <head> 内的 <style> 标签中。这种方法适用于单个页面的样式设置。

优点:将样式集中在一处，便于管理
缺点:不需要额外的 CSS 文件，适合单页应用
程式码范例:

<!DOCTYPE html>
<html>
  <head>
    <style>
      h1 {
        color: blue;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <h1>这是一个标题</h1>
  </body>
</html>

3. 外部样式表（External Stylesheet）

外部样式表是将 CSS 放在一个独立的 .css 文件中，然后通过 HTML 文件的 <link> 标签进行引用。这是最常见且推荐的方法，适合大型网站或需要在多个页面间共享样式的场景。

优点:多页面共享样式，避免程式码重复
缺点:需要额外的 HTTP 请求来加载 CSS 文件
程式码范例:

首先，创建一个名为 styles.css 的文件，并添加以下内容：

h1 {
  color: blue;
  text-align: center;
}

然后，在 HTML 文件中引用该 styles.css 文件：

<!DOCTYPE html>
<html>
  <head>
    <!-- 透过 link 标签引入样式 -->
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <h1>这是一个标题</h1>
    <p>这是一段文字。</p>
  </body>
</html>

CSS 样式优先顺序

既然有多种方式可以加入 CSS ，那我们就必须了解这几种方式若都有使用的情况下，他们分别的优先级是什么。大部分情况下，这三种 CSS 插入方式的优先顺序为：

内联样式（Inline Styles） > 内部样式（Internal Styles）= 外部样式表（External Stylesheet）。

内联样式基本上会盖过其他任何样式，只有用 !important 标注的样式才不会盖过。在这三种样式中，内联样式优先度也是最高的。

而内部样式与外部样式两者的优先度会是一样的。不过你可能会问，假如优先度一样，那么两边都写样式 (例如一个写 color:blue 另一个写 color:orange) 有冲突的话，会是以哪个为主呢?

在这种情况下，会去看其他的因素，例如 CSS 被引入的顺序。假如某个先出现，而后面又引入了另一个，两者优先度相同的状况下，会以新引入的为主。

下图是 CSS 各种插入方式的优先顺序效果的范例。

把内连样式移除之后，右边的字显示的是内部样式（Internal Styles）的橘色，读者可以试着对调`<link>` 与`<style>` 出现的顺序，会有不同效果

结论

对于大型网站或需要重复使用的样式，建议使用外部样式表，以提高可维护性和效率; 对于只需要在特定页面或元素上使用的样式，可以考虑使用内嵌样式或行内样式。