HTML5中引入外部CSS的唯一标准方式是将标签置于内，路径需正确且区分大小写，否则会静默失败。

在 里用 标签引入外部 CSS

HTML5 中导入外部样式表，唯一标准方式是把 标签写在 内部。浏览器按顺序解析 HTML， 里的 会提前加载 CSS，避免页面先无样式渲染（FOUC）。

• rel 属性必须为 "stylesheet"，写成 "style" 或漏掉都会失效
• href 值是 CSS 文件路径，支持相对路径（如 "css/style.css"）、绝对路径（如 "/assets/main.css"）、甚至完整 URL（如 "https://cdn.example.com/theme.css"）
• 不要把 放在 里——虽部分浏览器能“凑合”加载，但不符合规范，且可能阻塞后续脚本或导致重绘异常

检查路径是否正确：404 是最常见失败原因

外部 CSS 加载失败，90% 以上是路径写错。浏览器控制台（F12 → Console 或 Network 标签页）会明确报出 Failed to load resource: the server responded with a status of 404 ()。

• 确认 CSS 文件真实存在，且文件名大小写完全匹配（Linux/服务器区分大小写，"Style.css" ≠ "style.css"）
• 相对路径以 HTML 文件所在目录为基准，不是以当前网页 URL 或项目根目录为准
• 如果 HTML 在 /pages/index.html，想引用 /css/base.css，应写 href="../css/base.css"，而不是 href="/css/base.css"（后者是根对齐，仅当服务器配置了正确路由才有效）

避免内联 style 和 标签干扰调试

当外部 CSS 没生效时，很多人会临时加 style="color:red" 或写 覆盖，这反而掩盖真实问题。

• 临时注释掉所有内联样式和内部 ，专注验证外部 CSS 是否加载成功
• 用浏览器开发者工具的 Elements 面板查看目标元素，看 computed 样式里有没有来自外部 CSS 的规则；如果没有，说明没加载或选择器不匹配
• 注意 CSS 优先级：外部样式表的规则可能被后面加载的样式、!important 或内联样式覆盖，不是“引入了就一定生效”

HTML5 基础结构示例（含正确 link）

  
  
  


  
欢迎

这个例子中，styles/main.css 必须和 HTML 文件在同一级目录下有 styles 子文件夹，且里面包含 main.css。少一个斜杠、多一个点、拼错字母，都会让样式消失——它不报错，只是静默失败。