如何在 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）

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

把内连样式移除之后，右边的字显示的是内部样式（Internal Styles）的橘色

结论

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