页面样式不生效？检查link引入是否正确

页面样式不生效？别急着怀疑CSS代码写错了——90%的问题其实出在``标签的引入环节：是否遗漏`rel="stylesheet"`、路径是否因HTML位置变化而失效、href里有没有隐藏的空格或中文标号、文件编码是不是UTF-8无BOM、扩展名大小写是否匹配……打开开发者工具Network面板看状态码，200说明加载成功但可能被覆盖，404直接暴露路径错误，403则暗示本地双击打开而非通过服务器运行。从最基础的标签写法到容易忽略的编码和服务器配置，一步步排查，往往几秒钟就能让样式“起死回生”。

页面样式不生效，最常见的原因之一就是 link 标签引入外部 CSS 文件失败。这看似简单，但细节出错就完全没效果。

检查 link 标签是否写对了

确认 标签写在 里，且属性完整：

• rel="stylesheet" 不能漏，否则浏览器不认为这是样式表
• href 路径要准确：相对路径注意当前 HTML 所在目录，比如 CSS 在 css/style.css，而 HTML 在根目录，就写 href="css/style.css"；如果 HTML 在子文件夹（如 /pages/index.html），路径可能得写成 ../css/style.css
• 避免多写空格或中文标点，比如 href = "style.css" 中的空格、全角引号都可能导致解析失败

查看浏览器是否真的加载了 CSS 文件

打开开发者工具（F12）→ 切到 Network 标签 → 刷新页面 → 找到你的 CSS 文件名：

• 状态码是 200：说明文件加载成功，问题可能在 CSS 内容本身（比如选择器写错、优先级被覆盖）
• 状态码是 404：路径错了，按上面路径规则重新核对
• 状态码是 403 或空白：服务器拒绝访问，检查文件权限或服务器配置（常见于本地双击打开 HTML，而非通过本地服务器运行）

确认没有被其他样式覆盖或禁用

即使 CSS 加载成功，也可能“看起来没生效”：

• 打开开发者工具 → 选中目标元素 → 看右边 Styles 面板：被划掉的样式表示被更高优先级规则覆盖
• 检查是否有 !important 干扰，或内联样式（style=""）直接覆盖了外部样式
• 确认没有误写 display: none、visibility: hidden 或透明度为 0 等隐藏类

别忽略基础但关键的细节

这些小问题高频出现，却常被跳过：

• CSS 文件编码不是 UTF-8（尤其含中文注释时），会导致整个文件解析异常 —— 用编辑器另存为 UTF-8 无 BOM 格式
• 文件扩展名写错，比如写成 style.csss 或 style.CSS（部分服务器区分大小写）
• HTML 中混用了