使用link标签引入CDN上的框架样式可快速开发；2. 再引入本地custom.css覆盖或扩展样式，确保风格统一；3. 框架样式在前、自定义在后，提升维护性；4. 优化加载顺序与策略，增强性能。
在HTML中引入CSS样式时，合理使用 <link> 标签加载框架样式与自定义样式，可以显著提升开发效率和页面维护性。通过将成熟的UI框架（如Bootstrap、Tailwind CSS）与项目专属的自定义样式结合，既能快速搭建界面，又能灵活控制视觉细节。
1. 使用 link 标签引入外部框架样式
通过 <link rel="stylesheet"> 可以直接引入CDN上的CSS框架，无需本地安装，加快初始开发速度。
- <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
- <link href="https://cdn.tailwindcss.com" rel="stylesheet">
这类方式适合快速原型开发或对构建流程要求不高的项目，能立即使用预设的类名和组件样式。
2. 引入本地自定义样式文件
在使用框架的基础上，添加自己的CSS文件来覆盖或扩展样式，确保页面风格统一且可维护。
立即学习“前端免费学习笔记（深入）”；
注意引入顺序：框架样式在前，自定义样式在后，这样才能正确覆盖默认样式。
3. 提升加载效率的最佳实践
为了优化性能和渲染速度，建议采取以下策略：
- 将框架样式放在 <head> 中靠前位置，确保早期渲染样式可用
- 自定义样式紧跟其后，便于覆盖框架规则
- 使用 rel="preload" 预加载关键CSS（适用于本地大文件）
- 为静态资源添加版本号，避免缓存问题，例如：
<link href="css/custom.css?v=1.2" rel="stylesheet">
4. 结合使用更灵活的开发模式
对于复杂项目，可结合构建工具（如Vite、Webpack）先整合框架与自定义样式，输出单一CSS文件，减少HTTP请求。但在简单场景下，直接用多个 link 标签组合加载，开发更直观高效。
基本上就这些。合理利用 <link> 加载外部框架与本地样式，结构清晰，修改方便，是前端开发中的实用技巧。
