HTML 和 CSS 的组合使用
1 HTML 和 CSS 概述
HTML（Hypertext Markup Language），它主要负责 构建 网页的 结构 和 内容。通过各种 标签（如<body>、<p>、<h1> - <h6>、<img>等）来 定义 网页中 包含哪些元素，例如 文本段落、标题、图像、链接等。
CSS（层叠样式表），它用于 控制 网页的 外观 和 布局。可以规定 HTML 元素的 颜色、字体、大小、间距、边框、背景 等 样式属性。
HTML 就像是建筑的 框架，确定了 各个部分的 位置 和 功能。CSS 就像是建筑的 装饰材料，用于 美化 和 布局 HTML 构建的 框架。
2 HTML 和 CSS 的组合方式
1 内联样式（Inline Style）
直接在 HTML 标签内部 使用 style 属性 来 定义样式。这种方式 简单直接，对于只需要对 个别元素 进行 简单样式修改时 很方便。
<p style="color: red; font - size: 16px;">这是一段红色字体、大小为16px的段落。</p>
优点：可以 快速 地为特定元素 添加样式，无需在 外部文件 或 头部标签中 进行定义。
缺点：当需要对 多个相同类型 的元素 应用 相同样式时，代码会变得 冗长 和 难以维护。如果要 修改样式，需要 逐个元素 进行修改。
2 内部样式表（Internal Style Sheet）
在 HTML 文档的 <head> 标签内 使用 <style> 标签 来 定义样式。样式规则写在 <style> 标签内部，适用于 当前文档 中的 HTML 元素。
<head>
<style>
p {
color: blue;
font - family: Arial;
}
</style>
</head>
<body>
<p>这是一段蓝色字体、Arial字体的段落。</p>
</body>
优点：可以对 整个文档 中的元素进行 统一的 样式设置，比 内联样式 更易于维护，当需要修改样式时，只需要在 <style> 标签内 修改 相应的规则 即可。
缺点：如果有 多个 HTML 页面 需要 相同的 样式，就需要在 每个页面的 <head> 标签中 重复定义 样式，导致 代码冗余。
3 外部样式表（External Style Sheet）
将 CSS 样式规则 写在一个 独立的 .css 文件 中，然后在 HTML 文档的 <head> 标签内 使用 <link> 标签 来引用 这个文件。
/* styles.css */
p {
color: green;
font - weight: bold;
}
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<p>这是一段绿色加粗字体的段落。</p>
</body>
优点：可以实现 样式的复用，多个 HTML 文件 可以 共享同一个 CSS 文件，大大减少了 代码冗余。当需要修改样式时，只需要修改 CSS 文件即可，所有引用该文件的 HTML 页面的样式 都会 随之改变。这是 大型项目 中最常用的方式。
缺点：需要管理 多个文件，对于简单的 小型项目 可能会 略显复杂。
