如何处理CSS无法加载资源错误

Question

我一直在尝试将网站的html文件放在不同的文件夹中，以使它们更加结构化。 CSS主文件夹与index.html文件位于同一位置。 但是，当我尝试使用href =“ css / style.css”从新创建的文件夹内的HTML文件访问CSS文件时，我不断收到错误消息“无法加载资源”。 我试图给出完整的路径，但无济于事。 因此，我复制了CSS文件夹并将其粘贴到新文件夹中，它们正在工作。 但是，现在我必须对所有文件夹执行此操作。

无论如何，我可以避免在所有文件夹中复制CSS文件并从其原始位置访问它们吗？

Answer 1

无论您的调用文件位于何处，您的href="css/style.css"都会尝试从该点开始读取。 因此，它必须直接在树上。 解决此问题的一种很好的安全方法是简单地使用href="/css/style.css" ，这将迫使它从根目录开始搜索。

尝试放入整个路径是行不通的，因为那样便会尝试从您所在的位置读取整个路径。 这也将是不正确的。

无论您使用什么结构，您都根本没有指向树中的正确位置。

Answer 2

css文件必须加载到html文件中-可能是您写错了文件夹。 如果在文件夹内创建新文件夹，请从指定html文件所在的位置查找，例如/home/root/subsite/file.html，您必须在该文件中设置css文件夹的相对路径。 例如，如果css驻留在/home/root/css/style.css中，则html文件中的相对路径将为“ ../css/style.css”。

另一个原因可能是对具有css的文件夹没有读取权限。 另一件事可能是反斜杠而不是斜杠。

Answer 3

您需要../的魔力。

在相对文件路径中， ../表示将当前文件夹移出一级。

以以下示例文件结构为例：

    [root]
     |- index.html
     |
     |- [css]
     |   |- style.css
     |
     |- [animals]
     |   |- bird.html
     |   |- cat.html
     |   |
     |   |- [dogs]
     |   |   |- dog1.html
     |   |   |- dog2.html
     |
     |- [food]
     |   |- apple.html
     |   |- banana.html

以下文件中style.css的相对路径为：

• index.html ：

  css/style.css

---

• bird.html ：

  ../css/style.css

---

• dog1.html ：

  ../../css/style.css

---

• apple.html ：

  ../css/style.css