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

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

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

这是一段红色的文字。

2. 内部样式（Internal Styles）内部样式（Internal Styles）是将 CSS 放在 HTML 文件的 内的

这是一个标题

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

优点:多页面共享样式，避免程式码重复缺点:需要额外的 HTTP 请求来加载 CSS 文件程式码范例:首先，创建一个名为 styles.css 的文件，并添加以下内容：

h1 {

color: blue;

text-align: center;

}

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

这是一个标题

这是一段文字。

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

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

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

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

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

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

可以看到右边的字体呈现的是内联样式（Inline Styles）的蓝色把内连样式移除之后，右边的字显示的是内部样式（Internal Styles）的橘色，读者可以试着对调`` 与`