CSS 引入方式
让我们深入探讨将 CSS 样式链接到 HTML 文档的不同方法。每种方法都有其优缺点，适用于不同的情况。
本章将为你提供必要的知识，帮助你为项目选择最佳方法，并随着项目复杂度的增加有效地管理你的 CSS 代码。
1. 将 CSS 链接到 HTML 的方法
主要有三种将 CSS 链接到 HTML 的方法：
- 内联样式 (Inline Styles)：使用 style 属性直接在 HTML 元素内应用样式。
- 内部样式表 (Internal Stylesheets)：在 HTML 文档
<head>部分的<style>标签内嵌入 CSS 代码。 - 外部样式表 (External Stylesheets)：创建单独的 .css 文件，并使用
<link>标签将其链接到 HTML 文档。
让我们详细探讨每种方法。
2. 内联样式 (Inline Styles)
内联样式涉及使用 style 属性将 CSS 规则直接应用于单个 HTML 元素。
示例：
<p style="color: blue; font-size: 16px;">这是一个带有内联样式的段落。</p>在这个例子中，段落文本将是蓝色的，字体大小为 16 像素。
2.1 内联样式的优点：
- 优先级最高 (Specificity)：内联样式具有最高的特异性，这意味着它们总是会覆盖内部或外部样式表中定义的样式。（我们稍后将在模块 2 中介绍 CSS 优先级）。
- 快速应用：对于快速给单个元素应用样式非常有用，特别是在测试或进行微调时。
2.2 内联样式的缺点：
- 缺乏可复用性：样式是单独应用于每个元素的，导致代码重复，难以保持网站的一致性。
- 难以维护：随着网站的增长，管理内联样式变得繁琐且容易出错。
- 关注点分离差：混合内容 (HTML) 和表现 (CSS) 违反了关注点分离的原则，使代码更难阅读和维护。
2.3 何时使用内联样式：
内联样式应谨慎使用，主要用于：
- 测试目的：快速在特定元素上尝试样式。
- 动态生成的内容：当样式需要根据服务器端逻辑动态应用时。
- 覆盖样式：当你需要为特定元素覆盖来自外部或内部样式表的样式时。
3. 内部样式表
内部样式表涉及将 CSS 代码直接嵌入到 HTML 文档 <head> 部分的 <style> 标签内。
示例：
<!DOCTYPE html>
<html>
<head>
<title>内部样式表示例</title>
<style>
p {
color: green;
font-size: 18px;
}
</style>
</head>
<body>
<p>这是一个用内部样式表设置样式的段落。</p>
<p>另一个用相同内部样式表设置样式的段落。</p>
</body>
</html>在这个例子中，HTML 文档中的所有 <p> 元素都将是绿色的，字体大小为 18 像素。
3.1 内部样式表的优点：
- 集中管理：样式定义在一个地方，使得管理单个页面的样式更容易。
- 提高可复用性：样式可以应用于同一页面上的多个元素。
- 无需额外的 HTTP 请求：由于 CSS 嵌入在 HTML 中，因此不需要额外的 HTTP 请求来加载单独的 CSS 文件，这可能会略微提高页面加载速度。
3.2 内部样式表的缺点：
- 有限的可复用性：样式仅适用于定义它们的特定 HTML 文档。
- 关注点分离差：混合内容 (HTML) 和表现 (CSS)，虽然比内联样式好，但长期来看仍使代码难以维护。
- 不适合大型网站：随着网站的增长，为每个页面使用内部样式表变得不切实际。
3.3 何时使用内部样式表：
内部样式表适用于：
- 小型网站：只有几个页面的网站，你想保持一切自包含。
- 单页应用程序 (SPA)：所有内容都加载在单个页面上的应用程序。
- 快速原型设计：当你需要快速为页面设置样式而不想创建单独的 CSS 文件时。
4. 外部样式表
外部样式表涉及创建包含 CSS 规则的单独 .css 文件，并使用 <link> 标签将其链接到 HTML 文档。
示例：
首先，创建一个 CSS 文件（例如 styles.css），内容如下：
/* styles.css */
body {
background-color: lightblue;
}
h1 {
color: navy;
}然后，将 CSS 文件链接到你的 HTML 文档：
<!DOCTYPE html>
<html>
<head>
<title>外部样式表示例</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>这是一个标题。</h1>
<p>这是一个段落。</p>
</body>
</html>4.1 <link> 标签的属性：
rel="stylesheet"：指定链接文档与当前文档之间的关系。在这里，它表示链接的文档是一个样式表。href="styles.css"：指定 CSS 文件的 URL。URL 可以是相对的（如示例所示）或绝对的。type="text/css"：虽然对于现代浏览器来说技术上是可选的，但为了兼容旧版浏览器，最好包含它。它指定了链接文档的 MIME 类型。media="screen"：指定样式表优化的媒体类型。常见值包括 screen（用于电脑屏幕）、print（用于打印）和 all（用于所有媒体类型）
4.2 外部样式表的优点：
- 可复用性：样式可以应用于多个 HTML 文档，促进整个网站的一致性。
- 可维护性：CSS 代码与 HTML 分离，使管理和更新样式更容易。
- 更好的组织：将 CSS 保存在单独的文件中可以改善项目的整体组织。
- 缓存：浏览器可以缓存外部 CSS 文件，减少后续访问网站时的页面加载时间。
- 清晰的关注点分离：分离内容 (HTML) 和表现 (CSS) 导致更清晰、更易维护的代码。
4.3 外部样式表的缺点：
- 额外的 HTTP 请求：每个外部样式表都需要额外的 HTTP 请求，这可能会略微增加页面加载时间。（但是，这通常会被缓存的好处所抵消。）
- 依赖文件路径：错误的文件路径可能导致样式表无法加载。
4.4 何时使用外部样式表：
外部样式表是大多数网站的推荐方法，特别是对于：
- 大型网站：具有多个页面的网站，一致性和可维护性至关重要。
- 复杂项目：具有大量 CSS 代码的项目。
- 协作项目：多个开发人员在同一代码库上工作的项目。
5. 实战示例与演示
让我们看看如何在实际场景中使用这些方法。想象你正在建立一个简单的博客。
场景：你想为博客上的标题、段落和链接设置样式。
5.1 内联样式 (不推荐)：
<h1><span style="color: #333; font-family: Arial;">我的博客标题</span></h1>
<p style="font-size: 14px; line-height: 1.6;">这是我博客文章的第一段。</p>
<a href="#" style="color: blue; text-decoration: none;">阅读更多</a>问题：如果你有多篇博客文章，你必须在每页上重复这些样式，这使得以后更改博客的外观变得困难。
5.2 内部样式表 (适合小型博客)：
<!DOCTYPE html>
<html>
<head>
<title>我的博客</title>
<style>
body { font-family: sans-serif; }
h1 { color: #333; font-family: Arial; }
p { font-size: 14px; line-height: 1.6; }
a { color: blue; text-decoration: none; }
</style>
</head>
<body>
<h1>我的博客标题</h1>
<p>这是我博客文章的第一段。</p>
<a href="#">阅读更多</a>
</body>
</html>改进：这比内联样式好，因为你可以在一个页面上设置所有元素的样式。但是，如果你有多个博客页面，你仍然需要将此代码复制粘贴到每个页面中。
5.3 外部样式表 (推荐)
创建一个名为 style.css 的文件：
/* style.css */
body { font-family: sans-serif; }
h1 { color: #333; font-family: Arial; }
p { font-size: 14px; line-height: 1.6; }
a { color: blue; text-decoration: none; }然后，在 HTML 中链接 CSS 文件：
<!DOCTYPE html>
<html>
<head>
<title>我的博客</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>我的博客标题</h1>
<p>这是我博客文章的第一段。</p>
<a href="#">阅读更多</a>
</body>
</html>最佳实践：现在你可以为所有博客页面复用 style.css 文件。如果你想更改博客的外观，只需修改 style.css文件即可。