最稳妥的引入css方式是用标签而非@import，需确保路径正确、大小写一致，并清除浏览器缓存；文件结构应使href路径相对于html文件位置，推荐初始结构为同级index.html与style.css。
直接用 <link> 标签引入，别用 @import
零基础写 HTML 时，最稳妥、最通用的方式就是在 里写 <link rel="stylesheet" href="style.css">。这个标签浏览器一加载就并行请求 CSS，渲染不卡顿。@import 是 CSS 里的语法，得先加载 HTML、再解析 CSS 才触发，容易造成样式闪动或阻塞渲染，新手完全没必要碰。
常见错误现象：
— 页面刚打开是纯文字，等 1–2 秒才变样式（@import 或 JS 动态插入导致）
— 本地双击 HTML 文件打不开样式（路径写错，且没开本地服务器）
-
href值必须是相对路径或绝对路径，比如href="css/style.css"、href="../assets/main.css"，不能写成href="style.css"却把 HTML 和 CSS 放在不同文件夹 - 确保文件名和大小写完全一致：Windows 上
Style.CSS和style.css可能都能打开，但部署到 Linux 服务器（如 Nginx）就 404 - 浏览器控制台报错
net::ERR_FILE_NOT_FOUND，基本就是路径不对，右键检查<link>的href值，对照文件管理器里的真实层级
HTML 文件和 CSS 文件怎么放才不乱套
新手最容易卡在“文件放哪”——不是随便建个文件夹拖进去就行。推荐从最简结构起步：
my-website/ ├── index.html └── style.css
这时 <link href="style.css"> 就能直接命中。如果想分类管理，常见合理结构是：
my-website/ ├── index.html ├── css/ │ └── style.css ├── js/ └── images/
对应 <link href="css/style.css">。记住：路径是相对于 index.html 的位置算的，不是相对于 CSS 文件本身。
- 别把
style.css放进css/文件夹，却还在 HTML 里写href="style.css" - 别用中文路径或空格，比如
href="我的样式.css"或href="css/my style.css"，浏览器可能编码异常 - 本地双击 HTML 打不开样式？试试用 VS Code 装 Live Server 插件点「Go Live」，它会起一个真实 HTTP 服务，避免
file://协议下的跨域/路径限制
验证样式表是否真被加载了
光看 HTML 里写了 <link> 不代表成功。得动手确认：
- 打开浏览器开发者工具（F12），切到
Network标签页，刷新页面，找类型为stylesheet的请求，状态码要是200，Size 不是(pending)或0 KB - 切到
Elements标签页，选中任意 HTML 元素，右侧Styles面板里能看到来自style.css的规则（带文件名和行号） - 临时在
style.css里加一句body { background: red !important; }，保存后刷新 —— 如果背景没变红，说明根本没加载进来
为什么改了 CSS 看不到效果
不是代码写错，而是浏览器缓存了旧版本。尤其本地开发时特别明显：
- 普通刷新（F5）经常不重载 CSS，强制刷新用
Ctrl+Shift+R（Windows/Linux）或Cmd+Shift+R（Mac） - Chrome 开发者工具里勾选
Disable cache（在 Network 标签页左上角），开发期间一直开着 - 如果用了构建工具（如 Vite）、或者部署到 GitHub Pages 等平台，上线后仍看到旧样式，大概率是缓存问题，可给
href加版本参数：href="css/style.css?v=1.0.1"
路径、大小写、缓存——这三个点卡住 90% 的新手。其他语法细节可以往后学，先把这三关过了，样式就能稳稳落进页面里。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
