外链CSS是项目可维护性起点，需将置于中，确保路径正确、文件保存、浏览器刷新；推荐安装Live Server插件以启用HTTP服务和自动刷新。
VS Code 里怎么让 HTML 文件用上 CSS
直接在 HTML 文件里写 <style></style> 最快，但真要“添加一个 CSS”，通常是指外链样式表——这是项目可维护性的起点，不是炫技。
常见错误现象：link 标签写了，CSS 文件也建了，但页面完全没变；检查发现路径错、文件没保存、或者 VS Code 没刷新浏览器缓存。
- 确保
<link rel="stylesheet" href="style.css">放在里，不是底部 -
href值是相对路径：如果 HTML 和style.css在同一目录，就写style.css；如果 CSS 在css/style.css，就得写css/style.css - VS Code 不自动刷新浏览器，改完 CSS 后得手动刷新页面（或装 Live Server 插件）
Live Server 插件为什么几乎必装
不装它，你每次改 style.css 都得手动刷新页面，而且本地双击打开 HTML 时，file:// 协议下部分 CSS 功能（比如 @import 或某些字体加载）会失效。
Live Server 启动的是 http://127.0.0.1:5500/xxx.html，模拟真实服务器环境，路径解析、MIME 类型、CORS 行为才靠谱。
立即学习“前端免费学习笔记（深入）”；
- 安装后右键 HTML 文件 → “Open with Live Server”
- 它默认监听文件变化，保存
style.css会自动刷新浏览器（可关，但别关） - 注意看 VS Code 右下角状态栏：有 “Go Live” 按钮亮起，说明服务已运行
CSS 文件放哪？路径写错的典型表现
路径问题不是“会不会”，而是“什么时候崩”——往往改个文件夹结构就全乱。浏览器开发者工具的 Network 标签页里，style.css 显示 404 就是铁证。
假设项目结构是：index.html 和 css/style.css 同在根目录下：
<link rel="stylesheet" href="css/style.css">
但如果误写成 href="CSS/style.css"（大小写错），在 Windows 上可能侥幸通过，在 macOS/Linux 就 404——因为文件系统区分大小写。
- 路径全部小写，避免跨平台翻车
- 不用
./css/style.css，./在<link>里多余，且部分旧浏览器不认 - VS Code 的路径自动补全（Ctrl+Space）只对当前工作区有效，确认你打开的是整个文件夹，不是单个 HTML 文件
内联 style vs 外链 CSS：什么情况该选哪个
初学容易一股脑全写 <style></style> 里，结果改个颜色要翻三页找；老手又过度拆分，一个按钮配一个 CSS 文件——实际就两条线：
- 临时调试、单页小 Demo：直接用
<style></style>，改完立刻见效果，无路径烦恼 - 只要 HTML 文件超过 1 个，或 CSS 超过 20 行，立刻抽成
style.css外链——复用、缓存、分工都靠它 - 不要用
style="color: red;"写在标签上，除非是 JS 动态控制的临时样式，否则等于把样式逻辑锁死在 HTML 结构里
路径、协议、缓存这三件事，比语法细节更容易让 CSS “看起来没生效”。盯住浏览器地址栏是 file:// 还是 http://，比背选择器优先级管用得多。
