标签是 HTML 中引入外部 CSS 的唯一标准化方式,必须写 rel="stylesheet" 才能生效,需置于 内、使用可解析的相对路径,禁用 @import 以避免性能与兼容性问题。
css引入方式">
标签是 HTML 中引入外部 CSS 样式表的唯一标准化方式, 和 内联写法不属于“引入”,而 @import 是 CSS 规则,非 HTML 机制,且有性能与兼容性风险。
必须用 rel="stylesheet" 声明关系
浏览器靠 rel 属性识别资源用途。仅写 不会加载 CSS —— 缺少 rel,它会被忽略或当作无意义链接处理。
-
rel="stylesheet"是强制要求,不可省略、不可拼错(如rel="style"或rel="css"都无效) -
rel="preload"或rel="prefetch"不会触发样式应用,只用于预加载 - 若误写成
rel="alternate stylesheet",该样式表默认不启用,需用户手动切换(如浏览器「视图 → 页面样式」菜单)
href 路径必须可解析,且优先用相对路径
href 指向的 CSS 文件必须能被浏览器成功请求到,否则控制台报 Failed to load resource: net::ERR_ABORTED,页面无样式。
- 推荐使用相对于 HTML 文件的路径,例如 HTML 在
/pages/index.html,CSS 在/css/main.css,则写href="../css/main.css" - 避免绝对路径如
href="C:/project/css/main.css"(本地文件协议下可能偶然生效,但部署后必挂) - 以
/开头的根对路径(如href="/css/main.css")依赖服务器配置,静态服务器通常 OK,但某些嵌入式环境或子路径部署时可能 404
加载时机与位置:必须放在 内,且越早越好
CSS 是渲染阻塞资源(render-blocking),浏览器会暂停 HTML 解析,直到关键 CSS 加载并解析完成。放错位置会导致 FOUC(Flash of Unstyled Content)或布局偏移。
2013年07月06日 V1.60 升级包更新方式:admin文件夹改成你后台目录名,然后补丁包里的所有文件覆盖进去。1.[新增]后台引导页加入非IE浏览器提示,后台部分功能在非IE浏览器下可能没法使用2.[改进]淘客商品管理 首页 列表页 内容页 的下拉项加入颜色来区别不同项3.[改进]后台新增/修改淘客商品,增加淘宝字样的图标和天猫字样图标改成天猫logo图标4.[改进]为统一名称,“分类”改
立即学习“前端免费学习笔记(深入)”;
- 必须置于
内,不能放在底部(即使 DOM 已就绪,也不会补应用样式) - 应紧贴
开始处,早于或其他元信息(部分浏览器在解析前就开始下载 CSS) - 多个
按顺序加载和应用,后声明的规则可覆盖前面同名选择器(层叠顺序依赖 HTML 中的书写顺序,而非文件内容)
不要用 @import 替代
@import 是 CSS 语法,在 块或另一个 CSS 文件中使用,它会阻塞后续 CSS 解析,并导致串行加载(A @import B,B 必须等 A 下载完才开始请求),显著拖慢首屏。
- 例如
—— 这比直接多一次 HTTP 往返(除非开启 HTTP/2 多路复用,但仍无法并行) - IE6–IE8 对
@import的解析有 bug,例如不支持媒体查询条件中的@import - 构建工具(如 Webpack、Vite)通常将
@import提前编译合并,但源码中仍建议统一用控制加载链路
真正容易被忽略的是:当使用构建工具产出带哈希的 CSS 文件(如 main.a1b2c3.css)时, 的 href 必须与实际输出路径严格一致;任何路径拼接错误、缓存未更新、CDN 同步延迟,都会让样式表静默失效——此时页面看起来“没写 CSS”,但其实只是 404 了。









