HTML 未加载 CSS

HTML not loading CSS

提问by Maximas

I'm trying to load a css file. I've tried:

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

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

And:

和：

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

I even moved it to the same directory as the html and tried both of the above options without the "css" directory in the name..

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

I tried refreshing the page, and putting my CSS through the W3 schools validator and it passed..

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

I'm not a web developer so I'm not familiar with these sort of issues. Does anyone have any idea what it is?

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

EDIT: The error is

编辑：错误是

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

My IDE (PyCharm), recognizes it's existence, it isn't recognized when it's ran.

我的 IDE (PyCharm) 识别出它的存在，但在运行时无法识别。

It is currently in another directory called "css". I have moved it between the same directory, and the "css" one and neither has worked

它目前位于另一个名为“css”的目录中。我已经在同一个目录之间移动了它，“css”一个都没有工作

回答by Flater

I can't give you a specific answer as I don't know what your local file structure is like (if you post it in the question, I might be able to give you a direct answer).

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

The issue stems from how you use the path. I'll explain all options you've tried and what they actually do:

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

---

---

1 - No starting dots, no starting slash

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

href="css/style.css"

If there is no prefixed character, you're working in the same directory as your html file.

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

For the above example, I'd expect the structure to be as follows:

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

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

That means the HTML file and the CSS folder should be siblings.

这意味着 HTML 文件和 CSS 文件夹应该是同级的。

2 - Starting dots and slash

2 - 开始点和斜线

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

Now you're working in the parent directoryof the HTML file's location. Suppose your folder structure is as follows:

现在您正在HTML 文件所在位置的父目录中工作。假设您的文件夹结构如下：

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

In this structure, the HTML page and the CSS folder are not siblings. But the CSS folder and the HTML page's parentare siblings. So, you need to go up one level, which you accomplish by adding ../like in the example.

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

*Note: This can stack. You could put href="../../../css/style.css", and then you'd be working from the parent of the parent of the parent of your HTML page.

*注意：这可以堆叠。你可以把href="../../../css/style.css"，然后你会从你的 HTML 页面的父级的父级的父级开始工作。

3 - Starting slash

3 - 起始斜线

href="/css/style.css"

Now you're working in the root directoryof your website(not your page!)

现在您正在网站的根目录中工作（而不是您的页面！）

Suppose your webpage is accessible via the following URL:

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

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

Using the leading slash means that the working folder is set to the highest possible parent (which is always the web domain). So for the given example, the css file will be searched on the following location:

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

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

This type of notation is better used when using an absolute path. Generally speaking, and I think this applies in your case, you'd want a relative path. Options 1 and 2 are much better suited for that.

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

---

---

Like I said, I can't give you the specific answer if I don't know your folder structure. If you update your question, I could update my answer further.

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

回答by devt204

ok this is what you need to do

好的，这就是你需要做的

1. create a directory css
2. add this to head tag <link rel="stylesheet" href="css/style.css">

1. 创建目录 css
2. 将此添加到头部标签 <link rel="stylesheet" href="css/style.css">

Relative path work this way Starting with "/" returns to the root directory and starts there Starting with "../" moves one directory backwards and starts there

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

回答by Nitesh

Try style.cssand it will work, as it is in the same directory.

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

回答by ZeroWorks

If you moved to the same directory

如果您移动到同一目录

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

Should work...

应该管用...

回答by Shashi

You do not use ./, you have to either use ../when the file is one level down from your original HTML directory or simple use css/style.css no forward slashes. I believe the problem is with your naming conventions, please double check the names of folder and files. If files are on same directory then simply use style.cssno forward slashes or directory name.

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

回答by Joakim M

<!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>

回答by morric

The error is a page not found error, which indicates the web server can't find the file it was told to look for at "/css/style.css". The leading /with no dots indicates the root level of the website.

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

If you can load the web page which includes the css file, the path will be relative to the web page. "./style.css"and "style.css"both point to file style.css the same directory as the webpage; "../style.css"points one directory up. "../css/style.css"points one directory up, then down through the css directory.

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

If the path seems right, double-check the case of the directory and filenames - if your server is case-sensitive, it will treat files called Style.css and style.css as different files.

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

Can you browse directly to the file at /css/style.csson your website?

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

Unlikely, but it can be worth checking that the files have read permissions for the webserver's user.

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

Is it possible that your browser, or an intervening proxy is caching the file? Try a hard refresh if you web browser has one, or clearing your cache.

您的浏览器或中间代理是否可能正在缓存文件？如果您的网络浏览器有刷新，请尝试硬刷新，或清除缓存。

回答by Mark Lakata

If you are using a home brew webserver (not Apache, for example), the content type of the *.css file might not be set as "text/css".

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

Be sure your webserver is putting in the field

确保您的网络服务器已投入使用

 Content-Type: text/css

in the http header.

在 http 标头中。

回答by Anshuman Manral

I want to post my own version of the answer on this very old thread as I just found a possibly known but 'ignored-after-solving' way of getting into this problem of CSS just refusing to link with the HTML. I spent hours on trying to solve the problem and in the end, it turned out to be a very trivial thing. Do not want others to go through the same ordeal. So here we go:

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

Since I was new to HTML/CSS I tried to copy some sample code snippets from the internet. While doing so I linked my CSS file as follows:

因为我是 HTML/CSS 的新手，所以我尝试从互联网上复制一些示例代码片段。这样做时，我按如下方式链接了我的 CSS 文件：

<link rel=¨stylesheet¨ type=¨text/css¨ href=¨chat.css¨>

While at first glance the code looks perfectly fine, on viewing carefully (which unfortunately I did after hours of googling around) it turns out that the quotation marks I had used (copied from internet code) were not really quotation marks but some other characters. I found this because they looked smaller when compared to other quotation marks typed in my code elsewhere and which looked more like: ""

虽然乍一看代码看起来非常好，但仔细查看（不幸的是，我在谷歌搜索了几个小时后才这样做），结果我使用的引号（从互联网代码复制）并不是真正的引号，而是一些其他字符。我发现这一点是因为与我在其他地方的代码中键入的其他引号相比，它们看起来更小，看起来更像：""

On realizing this I changed the quotations in the CSS link:

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

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

and lo-behold everything started working beautifully (thanks CSS).

并且您瞧，一切都开始运行得很漂亮（感谢 CSS）。

Lesson learned - Beware of copy/paste from the internet.

经验教训 - 谨防从互联网复制/粘贴。

I wish I had been more diligent earlier.

我希望我早点更勤奋。

Hope this helps some searching soul in future!!

希望这能帮助一些在未来寻找灵魂的人！！