本地打开HTML文件时CSS未生效，通常是因为未正确链接外部CSS文件，需在HTML的中使用标签引入样式表，并确保路径正确。
本地打开html文件时css未生效，通常是因为未正确链接外部css文件，需在html的`
`中使用``标签引入样式表，并确保路径正确。 在CodePen等在线编辑器中，HTML、CSS、JS被自动整合运行，因此无需手动关联；但本地开发时，浏览器仅加载HTML文件本身，**不会自动识别同目录下的`.css`文件**——必须显式声明引用关系。✅ 正确引入CSS的步骤
-
确认文件结构清晰：例如将
index.html与style.css放在同一文件夹下：project-folder/ ├── index.html └── style.css
-
在HTML
中添加<link>标签：<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>我的网页</title> <!-- ✅ 正确引入同目录下的CSS --> <link rel="stylesheet" href="style.css"> </head> <body> <h1>欢迎来到本地页面</h1> </body> </html>
⚠️ 注意事项：
-
href值是相对路径，区分大小写（如Style.css≠style.css）； - 避免使用绝对路径（如
C:\...）或错误协议（如file:///style.css），这在多数浏览器中会被安全策略阻止； - 若CSS文件在子文件夹中（如
css/style.css），请相应调整路径：href="css/style.css"； - 修改后务必刷新浏览器（Ctrl+F5 强制重载），避免缓存旧版本。
? 小技巧：可在浏览器开发者工具（F12 → Network 选项卡）中查看 style.css 是否返回 200 OK；若显示 404，说明路径有误。
立即学习“前端免费学习笔记（深入）”；
只要确保 <link> 标签存在、路径准确、且位于 内，CSS即可正常渲染——这是本地静态网页开发中最常见也最关键的一步。
