2.1 CSS3与HTML的关联方式
CSS（层叠样式表）通过三种方式与HTML文档建立关联，实现对页面样式的控制。每种方式具有不同的适用场景和优缺点，需根据项目需求选择合适的关联策略。
内联样式
通过HTML元素的style属性直接定义样式，样式仅作用于当前元素。
语法示例：
html
复制代码
<h1 style="color: red; font-size: 24px;">红色标题</h1>内部样式表
在HTML文档的<head>标签内使用<style>标签定义样式，作用于整个文档。
语法示例：
html
复制代码
<head>
<style>
h1 { color: red; font-size: 24px; }
</style>
</head>
<body>
<h1>红色标题</h1>
</body>外部样式表
将样式定义在独立的.css文件中，通过<link>标签引入HTML文档，可实现多页面样式复用。
语法示例：style.css文件内容：
css
复制代码
h1 { color: red; font-size: 24px; }HTML引入：
html
复制代码
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>红色标题</h1>
</body>案例2-1：三种方式实现红色标题的对比
html
复制代码
<!-- 内联样式 -->
<h1 style="color: red;">内联样式标题</h1>
<!-- 内部样式表 -->
<style>
.internal-title { color: red; }
</style>
<h1 class="internal-title">内部样式标题</h1>
<!-- 外部样式表（需创建style.css） -->
<link rel="stylesheet" href="style.css">
<h1 class="external-title">外部样式标题</h1>注释：
- 内联样式：优先级最高（直接覆盖其他方式），但样式与结构耦合，维护成本高，适用于临时样式调整。
- 内部样式表：作用域局限于当前文档，无需额外HTTP请求，适用于单页面样式定义。
- 外部样式表：样式与结构完全分离，支持多页面复用，便于团队协作和缓存优化，是生产环境的首选方式。