Question

我正在尝试加载css文件。我试过了：

<link href="./css/style.css" rel="stylesheet" type="text/css">

和

<link href="css/style.css" rel="stylesheet" type="text/css">

我甚至将它移动到与html相同的目录，并尝试了上述两个选项而没有名称中的“css”目录。

我尝试刷新页面，并将我的CSS通过W3学校验证器并通过..

我不是网络开发人员所以我不熟悉这些问题。有谁知道它是什么？

编辑：错误是

[02/Jun/2014 10:37:23] "GET /css/style.css HTTP/1.1" 404 1953

我的IDE（PyCharm），识别它的存在，它在运行时无法识别。

目前在另一个名为“css”的目录中。我已将它移到同一目录之间，并且“css”之一并且都没有工作

Answer 1

我不能给你一个具体的答案，因为我不知道你的本地文件结构是什么样的（如果你在问题中发帖，我可能会给你一个直接答案）。

问题源于您如何使用路径。我会解释你尝试过的所有选项以及它们实际做的事情：

1 - 没有起点，没有起始斜线

href="css/style.css"

如果没有带前缀的字符，则表示您正在与html文件相同的目录中工作。

对于上面的例子，我希望结构如下：

- CSS (folder)
    - STYLE.CSS (file)
- PAGE.HTML (your HTML file)

这意味着HTML文件和CSS文件夹应该是兄弟姐妹。

2 - 起点和斜线

href="../css/style.css"

现在，您正在使用HTML文件位置的父目录。假设您的文件夹结构如下：

- CSS (folder)
    - STYLE.CSS (file)
- WEBSITE (folder)
    - PAGE.HTML (your HTML page)

在此结构中，HTML页面和CSS文件夹不是兄弟。但CSS文件夹和 HTML页面的父是兄弟姐妹。因此，您需要上升一个级别，您可以通过在示例中添加../来完成此任务。

*注意：这可以叠加。您可以放置href="../../../css/style.css"，然后您将使用 HTML页面父级父级的父级进行工作。

3 - 开始斜线

href="/css/style.css"

现在您正在使用网站的根目录（而不是您的网页！）

假设您的网页可通过以下网址访问：

http://my.website.com/myapplication/newversion/page.html

使用前导斜杠表示工作文件夹设置为尽可能高的父级（始终为Web域）。因此，对于给定的示例，将在以下位置搜索css文件：

http://my.website.com/css/style.css

使用绝对路径时，最好使用这种表示法。一般来说，我认为这适用于您的情况，您需要相对路径。选项1和2更适合这种情况。

就像我说的，如果我不知道你的文件夹结构，我就不能给你具体的答案。如果您更新了问题，我可以进一步更新我的答案。

Answer 2

尝试style.css它会起作用，因为它位于同一目录中。

Answer 3

如果您移动到同一目录

<link href="style.css" rel="stylesheet" type="text/css">

应该工作......

Answer 4

您不使用./，当文件比原始HTML目录低一级时，您必须使用../，或者简单地使用css / style.css没有正斜杠。我认为问题在于您的命名约定，请仔细检查文件夹和文件的名称。如果文件在同一目录中，则只需使用style.css无正斜杠或目录名。

Answer 5

<!DOCTYPE html>
   <head>
       <title id="HtmlTitle" runat="server">YadaYada</title>
       <link href="style.css" rel="stylesheet" type="text/css">
   </head>
   <body>
      <span>GoodBye World!</span>
   </body>
</html>

Answer 6

好的，这就是你需要做的事情

创建目录css
将此添加到主标记<link rel="stylesheet" href="css/style.css">

相对路径以这种方式工作以“/”开头，返回根目录并从那里开始从“../”开始向后移动一个目录并从那里开始

Answer 7

错误是找不到页面错误，表示Web服务器找不到它被告知要在“/css/style.css”查找的文件。没有点的前导/表示网站的根级别。

如果您可以加载包含css文件的网页，则路径将相对于网页。 "./style.css"和"style.css"都指向文件style.css与网页相同的目录; "../style.css"指向一个目录。 "../css/style.css"指向一个目录，然后指向css目录。

如果路径似乎正确，请仔细检查目录和文件名的大小写 - 如果您的服务器区分大小写，它会将名为Style.css和style.css的文件视为不同的文件。

您可以直接浏览网站/css/style.css上的文件吗？

不太可能，但值得检查文件是否具有网络服务器用户的读取权限。

您的浏览器或干预代理是否可能正在缓存该文件？如果您的网络浏览器有一个或清除缓存，请尝试进行硬刷新。

Answer 8

如果您使用的是家酿啤酒网络服务器（例如，不是Apache），则* .css文件的内容类型可能不会设置为“text / css”。

确保您的网络服务器正在放入

字段

 Content-Type: text/css

http头中的

。

Answer 9

我想在这个非常老的线程上发布我自己的答案版本，因为我刚刚发现一种可能已知的但“解决后被忽略的方式”，可以解决CSS问题，只是拒绝与HTML链接。我花了数小时试图解决这个问题，最后，结果证明这是一件非常琐碎的事情。不想别人经历同样的磨难。所以我们开始：

由于我是HTML / CSS的新手，所以我尝试从Internet复制一些示例代码段。这样做时，我按如下方式链接了我的CSS文件：

C:\>"C:\Program Files\JetBrains\IntelliJ IDEA Community Edition 2018.2.4\bin\format.bat" -r E:\project\java style -m *.java -s e:\project\config-files\CodeStyleSettings.xml

乍一看，代码看起来非常不错，但仔细查看（不幸的是，我经过数小时的搜索后才发现），结果发现我使用的引号（从互联网代码复制）不是真正的引号，而是一些引号其他字符。我发现这是因为，与我在其他地方的代码中键入的其他引号相比，它们看起来更小：<link rel=¨stylesheet¨ type=¨text/css¨ href=¨chat.css¨>

意识到这一点后，我更改了CSS链接中的引号：

""

而且，别忘了一切都可以很好地工作（感谢CSS）。

经验教训-提防互联网上的复制/粘贴。

我希望我早些时候更加勤奋。

希望这有助于将来寻找灵魂的人！

Answer 10

尝试在 URL 前添加 ../；例如：

href="css/styles.css" ----[BECOMES]---->>  href="../css/styles.css";

HTML没有加载CSS

10 个答案: