HTML5中引入外部CSS的唯一标准方式是将标签置于内,路径需正确且区分大小写,否则会静默失败。
在
里用
标签引入外部 CSS
HTML5 中导入外部样式表,唯一标准方式是把
标签写在
内部。
浏览器
按顺序解析 HTML,
里的
会提前加载 CSS,避免页面先无样式渲染(FOUC)。
属性必须为
,写成
或漏掉都会失效
值是 CSS 文件路径,支持相对路径(如
)、绝对路径(如
)、甚至完整 URL(如
)
不要把
放在
里——虽部分浏览器能“凑合”加载,但不符合规范,且可能阻塞后续脚本或导致
重绘
异常
检查路径是否正确:404 是最常见失败原因
外部 CSS 加载失败,90% 以上是路径写错。浏览器控制台(F12 → Console 或 Network 标签页)会明确报出
。
确认 CSS 文件真实存在,且文件名大小写完全匹配(Linux/服务器区分大小写,
≠
)
相对路径以 HTML 文件所在目录为基准,不是以当前网页 URL 或项目根目录为准
如果 HTML 在
,想引用
,应写
,而不是
(后者是根对齐,仅当服务器配置了正确
路由
才有效)
避免内联
和
标签干扰调试
当外部 CSS 没生效时,很多人会临时加
或写
rel"stylesheet""style"href"css/style.css""/assets/main.css""https://cdn.example.com/theme.css"Failed to load resource: the server responded with a status of 404 ()"Style.css""style.css"/pages/index.html/css/base.csshref="../css/base.css"href="/css/base.css"stylestyle="color:red"