最推荐通过在中引入外部css文件，实现样式与结构分离，提升缓存、复用及维护性；路径以html为基准，需确保200响应和text/css类型，避免fouc与选择器失效。
HTML 模板不能“添加”样式，只能通过关联或嵌入让样式生效；直接写 style="" 或硬塞 CSS 代码看似快，但后续改一个颜色就得翻遍所有 HTML 文件——这不是美化，是给自己埋技术债。
怎么给 HTML 模板加外部 CSS 文件（最推荐）
这是工程化项目的标准做法，样式可缓存、可复用、可协作维护。
-
<link rel="stylesheet" href="css/main.css">必须放在里，不能丢到底部，否则页面先闪白再变样（FOUC） - 路径以 HTML 文件位置为基准：如果 HTML 在网站根目录，
href="css/main.css"就表示找/css/main.css；写成href="./css/main.css"也行，但别漏掉开头的.或/ - 本地双击打开 HTML（
file://协议）时，Chrome 和 Edge 会拦截外部 CSS 加载——必须起本地服务，比如终端运行python3 -m http.server - 检查是否加载成功：打开浏览器开发者工具 → Network 标签页 → 刷新 → 找
main.css这一行，状态码不是200或Content-Type不是text/css，说明路径或服务器配置错了
为什么写了 class 却没反应（常见选择器失效）
不是 CSS 写错了，而是 HTML 和 CSS 没对上号——这是新手卡住最多的地方。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- HTML 里写的是
class="btn-primary"，CSS 却写了.button-primary { }—— 名字不一致，完全不匹配 - 用了
id="header"，CSS 却写成.header { }（少了个#），或者反过来，HTML 没写id却用#header选中 - 自定义元素如
<my-card></my-card>，在 Shadow DOM 内部的子元素（比如<div class="card-title">）无法被外部 <code>.card-title { }选中——Shadow DOM 天然隔离，样式必须写进组件内部或用::slotted() - 浏览器缓存了旧 CSS：强制刷新（
Ctrl+Shift+R），或 DevTools 的 Network 面板勾选Disable cache - JS 动态控制单个元素：比如拖拽时实时更新
left和top，用element.style.left = x + "px"比改 class 更直接 - 临时调试：想快速验证某个 margin 是否合理，直接加
style="margin: 20px;"，验证完立刻删 - 邮件模板等受限环境：部分客户端只认内联样式，这时是被迫用，不是主动选
- 千万别在 Vue/React 模板里大量写
style="color: {{ color }}"—— 改成绑定:class或使用 CSS-in-JS 方案更可持续 - checkbox/radio 要扩大点击区：必须用
position: absolute; opacity: 0;隐藏原生控件，再用label::before绘制新框，input:checked + label::before控制选中态——display: none会让屏幕阅读器失效 -
appearance: none不是银弹：Chrome 支持好，Firefox 对<select></select>基本无效，IE 完全不认；清完 appearance 后还得手动处理下拉箭头（比如select::-ms-expand { display: none; }） -
<textarea></textarea>的 resize 手柄消失？大概率是父容器有overflow: hidden，或者你加了padding把手柄挤出可视区了——手柄固定在右下角，不会随内容流动 - 所有自定义表单样式，都得保留
cursor: pointer和键盘焦点逻辑（:focus-visible），否则可访问性直接归零
内联样式 style="" 什么情况下能用
它优先级最高，但代价是破坏结构、无法复用、没法用预处理器——只适合极少数场景。
自定义表单控件样式为什么总失败
原生 <input type="checkbox">、<select></select> 等默认样式强、可定制弱，硬改容易失效。
真正难的从来不是“怎么写 CSS”，而是搞清样式作用域在哪、谁覆盖了谁、浏览器到底加载了没有。每次样式不生效，先开 DevTools 的 Elements 面板点元素，看右边 Styles 里哪些属性被划掉了、来源是哪——比重写十遍 CSS 都管用。
