HTML 是网页骨架，CSS 是其衣服；link 必须放在 head 中以防闪白，@import 性能差且易出错；选择器失效多因匹配失败、特异性冲突或路径错误。
HTML 和 CSS 是网页的“骨架”与“衣服”关系：HTML 定义内容结构（比如哪些是标题、段落、按钮），CSS 负责控制这些结构的外观（颜色、大小、位置、间距等）。没有 HTML，CSS 无处可作用；没有 CSS，HTML 页面只是纯文本堆叠。
为什么 link 标签必须写在 <head> 里
浏览器按顺序解析 HTML，遇到 <link rel="stylesheet"> 才开始下载并应用 CSS。如果把它错放到 <body> 底部，页面会先以无样式状态渲染一次（俗称“闪白”），再重绘——用户能看到明显的样式跳变。
-
<link>必须放在<head>内，且在<title>之后、<script>之前更稳妥 - 若用
<style>标签，也必须在<head>中，不能在<body>里（部分旧浏览器会忽略） - 现代浏览器支持
media属性做条件加载，例如<link media="print" href="print.css">，但基础引入仍需在<head>
@import 和 <link> 的加载行为差异
@import 是 CSS 规则，不是 HTML 标签。它在 CSS 文件内部或 <style> 块中使用，但会阻塞后续 CSS 解析和渲染，性能比 <link> 差。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
-
<link>是并行加载，浏览器能提前发现并发起请求 -
@import url("base.css")必须写在所有其他 CSS 规则之前，否则整条语句被忽略 - 嵌套
@import（比如 A.css 导入 B.css，B.css 又导入 C.css）会串行加载，拖慢首屏时间 - 除非用于媒体查询隔离（如
@import "theme.css" (prefers-color-scheme: dark)），否则不建议用
CSS 选择器失效的常见原因
即使 <link> 加载成功、路径正确，样式也可能不生效——大概率是选择器没匹配上目标元素。
立即学习“前端免费学习笔记（深入）”；
- 检查 HTML 元素是否有对应
class或id，比如写了.btn却忘了给按钮加class="btn" - 注意大小写和空格：
div .header（后代选择器）和div.header（类名紧贴标签）完全不是一回事 - 特异性冲突：内联
style属性优先级高于 class，class 高于元素选择器；用浏览器开发者工具的 Elements 面板看哪条规则被划掉 - 拼写错误：
backgroud-color不是background-color，CSS 不报错，但直接忽略该行
最易被忽略的是路径问题：当 HTML 和 CSS 不在同一目录时，href 的相对路径必须基于 HTML 文件位置计算，不是编辑器当前打开的文件位置。调试时直接在浏览器地址栏访问 http://localhost:5500/style.css 看是否返回 404，比反复检查代码更快。
