Atom预览CSS需区分协议与监听范围：atom-html-preview内嵌渲染支持引入的CSS但不走HTTP，故fetch等API不可用；atom-live-server启本地HTTP服务实现保存即刷新，但必须用http://访问且仅监听HTML所在目录及子目录。
Atom 本身不解析 CSS，也不执行样式计算——所谓“实时预览”，本质是让浏览器渲染 HTML 时加载你写的 CSS，并在保存后触发重载或重绘。选错插件或配错路径，改完 CSS 没反应，不是代码问题，而是协议、监听范围或解析上下文没对上。
atom-html-preview 能看 CSS 效果，但不走 HTTP 协议
它把当前 index.html 文件当作纯文本解析，在 Atom 右侧开一个内嵌面板渲染，支持 <style></style>、<link rel="stylesheet">（含 CDN），但所有资源必须能被文件系统直接读取：
- 相对路径如
./css/style.css或../assets/main.css可以加载；/css/style.css或http://cdn.example.com/style.css会失败 -
@import的 CSS 文件不会被解析，只认<link>标签引入的资源 - 快捷键
Ctrl+Shift+H（Windows/Linux）或Cmd+Shift+H（macOS）仅在文件已保存、扩展名为.html、右下角状态栏显示HTML（不是Plain Text）时生效 - 所有 JS 动态行为（如
fetch()、document.write()）和现代 API（Service Worker、WebSockets）均不可用
atom-live-server 才真能“改 CSS 就刷新”，但必须用 http://
它起一个本地 HTTP 服务（默认端口 3000），监听文件变更后调用 location.reload()，这是唯一支持真正热响应的方案，但硬性前提很明确：
- 浏览器地址必须是
http://localhost:3000/index.html，绝不能是file:///path/to/index.html——后者会导致跨域、@import失效、fetch报错 - 只监听「当前打开的 HTML 文件所在目录及其子目录」：比如你在
/project/src/index.html启动服务，而style.css在/project/assets/，改它不会触发刷新 - 端口被占时会静默顺延到
3001、3002……但无提示；若页面打不开，先查控制台是否报ERR_CONNECTION_REFUSED - 不响应
@import的 CSS 变更，只识别主 HTML 中<link>和<script></script>引入的资源
Color-Helper 插件可在代码行旁显示颜色预览方块
它不渲染页面，只帮你快速确认颜色值是否被 Atom 正确识别并可视化：
立即学习“前端免费学习笔记（深入）”；
- 默认不启用行内色块，需手动勾选设置里的
Enable Inline Swatches - 必须配置
Inline Swatch Selector，例如.source.css、.source.scss、.text.html.basic（用于 HTML 内联 style） - 支持
#abc、rgb()、hsl()、transparent和预定义色名；不支持color(display-p3)、lab()等新函数 - 如果预览方块位置偏移或遮挡文字，把
Inline Swatch Width和Inline Swatch Height改为16，并关闭Use Editor Font Size
最容易被忽略的是监听路径和协议混用：一边用 atom-live-server 启了 http:// 服务，一边还在双击打开 file:// 地址；或者 CSS 放在监听范围外却以为“改了就该刷”。确认浏览器地址栏、文件物理位置、插件监听逻辑三者对齐，比反复重装插件更有效。
