正确引用外部CSS需根据HTML与CSS文件的相对位置使用路径。同一目录用href="style.css"，子目录用href="css/style.css"，上级目录用href="../style.css"，多级跳转如href="../../assets/css/main.css"；注意大小写敏感、使用正斜杠/、避免以/开头导致根路径误用，并通过开发者工具Network面板验证加载情况。
在HTML中引用外部CSS文件时，使用相对路径是一种常见且高效的方式。它能确保网页结构清晰，便于迁移和维护。关键在于理解当前文件与目标CSS文件之间的目录关系。
相对路径的基本写法
相对路径是相对于当前HTML文件的位置来定位CSS文件的路径，不包含协议或域名。常见的写法有以下几种：
-
同一目录下：如果CSS文件和HTML文件在同一文件夹中，直接写文件名即可。
例如：link rel="stylesheet" href="style.css" -
子目录中：如果CSS文件位于当前目录的子文件夹（如css/）中，需加上文件夹名。
例如：link rel="stylesheet" href="css/style.css" -
上级目录中：如果CSS文件在上一级目录，使用
../返回上级。
例如：link rel="stylesheet" href="../style.css"或href="../css/common.css" -
多级目录：可组合使用
../和文件夹名跳转到任意相对位置。
例如：href="../../assets/css/main.css"
常见问题与注意事项
虽然相对路径灵活，但容易因路径错误导致样式未加载。以下是需要注意的关键点：
-
区分大小写：在Linux服务器或某些系统中，文件名大小写敏感，
Style.css和被视为不同文件。 -
避免斜杠错误：路径使用正斜杠
/，即使Windows系统支持反斜杠，也推荐统一用/以保证兼容性。 - 检查目录层级：务必确认HTML文件与CSS文件的实际位置关系，路径错误将导致404，浏览器控制台会提示资源未找到。
-
不要以
/开头：以/开头的路径会被视为从网站根目录开始的绝对路径，不再是相对路径，容易出错。 -
保持结构清晰：建议将CSS文件集中放在
css或assets/css目录中，便于管理。
实际应用示例
假设项目结构如下：
立即学习“前端免费学习笔记（深入）”；
project/
│
├── index.html
├── about/
│ └── info.html
└── css/
└── style.css
在不同HTML文件中引用style.css的写法：
-
index.html 中：
link rel="stylesheet" href="css/style.css" -
info.html 中：
link rel="stylesheet" href="../css/style.css"（先退回上级，再进入css目录）
基本上就这些。只要理清文件之间的位置关系，正确使用./、../和目录名，相对路径引用CSS就不会出问题。调试时打开浏览器开发者工具，查看Network面板是否成功加载CSS文件，是最直接的验证方式。
