当前位置：首页 > 文章列表 > 文章 > 前端 > HTML引入CSS文件的常见方法有以下几种，具体选择哪种方式取决于项目需求和开发习惯：1. 内联样式（不推荐）虽然不推荐用于大型项目，但可以直接在 HTML 标签中使用 style 属性添加样式。

这是一个段落。

link 是唯一推荐用于生产环境的引入方式，其他方式要么阻塞渲染、要么无法缓存、要么破坏样式优先级规则。

为什么不能用 @import 引入 CSS 文件

@import 会延迟加载 CSS，浏览器必须先下载并解析完主 CSS 文件，才会发起对 @import 中路径的请求。这意味着：页面可能先无样式渲染（FOUC），尤其在慢网或大文件下明显；无法并行加载多个样式表；不支持 media 属性做条件加载；IE6–8 对嵌套 @import 支持极差。

常见错误现象：@import url("base.css"); 写在 .header { ... } 规则之后 → 整行被忽略；路径写成相对 HTML 而非相对当前 CSS 文件 → 404。

• 必须放在 CSS 文件最开头（@charset 后、任何规则前）
• 路径是相对于当前 CSS 文件位置，不是 HTML 文件
• 移动端 Safari 旧版本存在解析 bug，建议完全规避

link 标签的 href 路径怎么写才不翻车

路径错误是样式不生效的头号原因。浏览器按 HTML 文件所在位置解析 href，不是按开发者直觉。

假设目录结构为：/index.html 和 /css/style.css：

• ✅ 正确：（根路径，最稳）
• ✅ 正确：（相对路径，HTML 在根目录时有效）
• ❌ 危险：（. 在某些构建工具中会被忽略或报错）
• ❌ 错误：（HTML 若在 /blog/post.html 下就 404）

性能影响：用根路径可避免构建后路径错乱；不用查询字符串（如 style.css?v=1.2）更利于 CDN 缓存命中。

多个 link 标签的加载顺序和作用域

CSS 规则按 link 出现顺序逐个解析并应用，后加载的样式会覆盖前面同名选择器的声明（除非用 !important）。

典型使用场景：

• 基础重置：
• 通用组件：
• 当前页特有样式：

注意：media 属性不会阻止下载，只控制是否应用。例如 media="print" 的 CSS 仍会在页面加载时请求，但仅在打印预览时生效。

内联 style 和 style 标签什么时候能用

它们不是“引入外部 CSS 文件”的方式，但常被误当作替代方案。

这是带有样式的段落。