1.3 CSS 的引入方式

在网页中使用 CSS，有三种主要的引入方式：内联样式、内部样式表和外部样式表。每种方式都有其特点和使用场景，根据需求选择合适的方式可以提高网页的开发效率和维护性。

1.3.1 内联样式（Inline CSS）

内联样式是将 CSS 样式直接写在 HTML 元素的 style 属性中。这种方式的优点是可以快速针对单个元素应用样式，缺点是样式代码和结构代码混杂在一起，不利于代码的维护和重用。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>内联样式示例</title>
</head>
<body>
  <h1 style="color: blue; font-size: 24px;">欢迎来到内联样式示例</h1>
  <p style="color: red; font-size: 18px;">这是一个应用内联样式的段落。</p>
</body>
</html>

h1 和 p 元素的样式直接通过 style 属性定义。
这种方法适合样式简单且仅应用于少量元素的情况，但随着项目规模的增大，不推荐大量使用内联样式。

1.3.2 内部样式表（Internal CSS）

内部样式表是将 CSS 样式写在 HTML 文档的 <style> 标签中，通常位于文档的 <head> 部分。内部样式表适合于页面范围内的样式定义，可以有效地减少代码冗余，但当多个页面需要相同的样式时，不如外部样式表便于重用。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>内部样式表示例</title>
  <style>
    h1 {
      color: blue;
      font-size: 24px;
    }
    p {
      color: red;
      font-size: 18px;
    }
  </style>
</head>
<body>
  <h1>欢迎来到内部样式表示例</h1>
  <p>这是一个应用内部样式表的段落。</p>
</body>
</html>

样式写在 <style> 标签内，通过选择器定义样式。
内部样式表适用于单个页面的样式，但对于多个页面共享样式，推荐使用外部样式表。

1.3.3 外部样式表（External CSS）

外部样式表是将 CSS 样式定义放在单独的 .css 文件中，并通过 <link> 标签在 HTML 文档中引用。这种方式是最推荐的做法，尤其适用于大型项目和多页面的应用。它能够实现样式的复用和集中管理，使得 HTML 和 CSS 代码分离，便于维护和优化。

示例：

首先，创建一个外部样式表文件 styles.css：

/* styles.css */
h1 {
  color: blue;
  font-size: 24px;
}

p {
  color: red;
  font-size: 18px;
}

然后，在 HTML 文件中使用 <link> 标签引用外部样式表：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>外部样式表示例</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h1>欢迎来到外部样式表示例</h1>
  <p>这是一个应用外部样式表的段落。</p>
</body>
</html>

styles.css 是一个独立的 CSS 文件，包含了所有样式规则。
HTML 文件通过 <link> 标签引用该 CSS 文件，这样多个 HTML 文件都可以共享相同的样式。
外部样式表有助于减小 HTML 文件的体积，提高页面加载速度，也便于样式的统一管理。

1.3.4 选择合适的引入方式

内联样式：
- 适用于快速测试或为单个元素指定样式。
- 不建议用于大规模的样式控制，因为它会使 HTML 和 CSS 混杂在一起，增加维护难度。
内部样式表：
- 适用于单个页面的样式控制，尤其是页面结构和样式紧密相关的情况。
- 比内联样式更灵活，但样式不便于跨页面重用。
外部样式表：
- 推荐用于大多数项目，尤其是大型网站或应用。
- 提供更好的可维护性、样式共享和页面加载性能。
- 支持缓存，减少页面加载时间（如果多个页面使用同一个样式表）。

1.3.5 CSS 文件的加载顺序

当一个页面中同时使用多种 CSS 引入方式时，浏览器会根据以下顺序应用样式：

内联样式 优先级最高。
内部样式表 其次。
外部样式表 优先级最低。

如果多种样式对同一个元素应用不同的样式，浏览器将根据优先级规则决定最终样式。

总结

CSS 的引入方式有三种：内联样式、内部样式表和外部样式表。每种方式有其适用场景和优缺点。内联样式适合快速调整单个元素的样式，内部样式表适合单个页面的样式，而外部样式表适合多个页面共享样式，具有更好的可维护性和性能。了解这些引入方式并根据项目需求选择合适的方式，可以提升开发效率和网页的可维护性。

#前端开发分享于 2025-03-05

上一篇：1.2 CSS 的基本语法下一篇：1.4 选择器与优先级