最推荐用引入外部css，须置于且含rel="stylesheet"；适用于少量页面专属样式；行内style属性仅用于动态临时覆盖，三者优先级为style>>。
link 标签引入外部 CSS 文件最常用也最推荐
绝大多数项目都用 <link> 引入外部 .css 文件，因为可缓存、易维护、支持媒体查询和预加载。它必须放在 里，且浏览器会阻塞渲染直到该 CSS 加载并解析完成。
常见错误是把 <link> 放在 底部，导致样式闪动或布局错乱；或者漏写 rel="stylesheet"，浏览器直接忽略该标签。
-
<link rel="stylesheet" href="style.css">是最基本写法 - 加
media="print"可指定仅打印时生效 - 加
as="style"和rel="preload"（配合<link>预加载）能提升关键 CSS 加载优先级 - 不要用
@import在 CSS 文件里再导入其他 CSS——它会串行加载，拖慢渲染
style 标签写内联 CSS 适合小量页面专属样式
<style></style> 写在 里，作用域是当前 HTML 文档。它不产生额外请求，但无法被缓存，也不利于复用和团队协作。
典型误用是把它塞进 或多个位置重复定义，造成样式覆盖混乱；还有人误以为 <style scoped></style> 在所有浏览器都有效——其实只有 Vue 单文件组件支持原生 scoped，普通 HTML 中无效。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 只在原型、邮件模板、或极简单页中用
<style></style> - 避免在
<style></style>里写@import，同样有加载阻塞问题 - 如果用了 CSS 自定义属性（
--main-color），<style></style>是快速调试的好位置
style 属性写行内样式仅用于动态/临时覆盖
style 属性直接写在 HTML 标签上，比如 <div style="color: red; margin: 0">。它的优先级最高，会覆盖 <code><style></style> 和外部 CSS，但可维护性极差，且无法使用伪类、媒体查询、选择器组合等 CSS 核心能力。
常见滥用场景：用 JS 拼接大段 style 字符串赋值，或为了“快速改一点”在模板里硬编码样式。这会让样式逻辑散落在 HTML 和 JS 中，后期难定位。
- 仅限 JS 动态控制（如
element.style.opacity = '0.5'）或服务端渲染时的极简状态标记（如禁用态style="pointer-events: none; opacity: 0.4"） - 不要写多条规则用分号连写却漏空格，比如
style="color:red;margin:0"虽然能解析，但可读性差、易出错 - 行内样式不继承
!important，但自身带!important的声明（如style="color: red !important;"）在部分旧版 IE 中行为异常
三种方式的优先级与加载时机差异必须清楚
当同一样式属性出现在不同来源时，优先级顺序是：行内 style 属性 > <style></style> 标签 > 外部 <link>。但这只是“层叠”的一部分；真正影响首屏表现的是加载时机：<link> 是并行下载 + 阻塞渲染，<style></style> 是立即解析，style 属性无加载开销但无扩展性。
容易被忽略的一点：CSS 文件里的 @import 不仅降低性能，还会让后续规则的优先级“降级”——比如 style.css 里 @import "base.css"; .btn { color: blue; }，其中 .btn 规则的权重不会因为写在后面就更高，它仍和 base.css 里同名规则按源顺序比。
