使用link标签引入外部CSS文件，适用于多页面共享样式，提升可维护性；2. 使用style标签内嵌CSS，适合页面专属样式；3. 推荐将公共样式抽离，合理控制加载顺序，保持结构清晰与高效加载。
在HTML中引入CSS主要有两种方式：使用 <link> 标签引入外部样式文件，以及使用 <style> 标签在页面内嵌CSS。正确使用这两种方法，有助于提升网页性能、可维护性和结构清晰度。
CSS_link：通过link标签引入外部样式表
这是最推荐的方式，尤其适用于多个页面共享相同样式的情况。将CSS写在独立的 .css 文件中，然后通过 <link> 标签引入。
基本语法如下：
<link rel="stylesheet" href="styles.css">关键点说明：
立即学习“前端免费学习笔记（深入）”；
- rel="stylesheet" 是必须的，它告诉浏览器这是一个样式表
- href 指向CSS文件路径，可以是相对路径或绝对路径
- 建议将 <link> 标签放在 <head> 中，确保页面渲染前加载样式
- 可引入多个样式文件，加载顺序会影响层叠规则
内嵌样式：使用style标签定义页面级CSS
当样式仅用于当前页面，或需要动态控制少量样式时，可使用 <style> 标签。
基本用法：
<style>body { font-family: Arial, sans-serif; }
h1 { color: #333; }
</style>
使用建议：
- 同样应放在 <head> 区域，避免文档流混乱
- 适合写全局或组件级样式，不要过度使用以免影响维护
- 支持 media 属性，可做简单响应式控制，例如：
<style media="print"> ... </style>
最佳实践与注意事项
合理结合 link 与 style 标签，能提升开发效率和用户体验。
- 优先使用外部CSS文件（link），实现样式与结构分离
- 对公共样式（如按钮、导航）抽离成独立CSS，提高复用性
- 可在特殊场景下使用 <style> 处理页面专属样式，减少HTTP请求
- 注意样式加载顺序：先外部样式，再内嵌样式，后者可覆盖前者
- 避免在HTML中混用大量内联样式（inline style），保持整洁
