HTML不加载CSS [英] HTML not loading CSS

问题描述

我试图加载一个css文件。我试过：

 < link href =./ css / style.css =stylesheettype = 文本/ CSS > 
  

和：

 < link href =css / style.css =stylesheettype =text / css> 
  

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

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

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

编辑：错误是

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

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

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

解决方案

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

<这个问题源于你如何使用路径。我会解释你尝试过的所有选项以及他们实际做了什么：

---

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

  href =css / style.css
  

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

>

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

   -  CSS（文件夹）
  -  STYLE.CSS（文件）
  -  PAGE.HTML（您的HTML文件）
  

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

2 - 开始点和斜杠

  href =../ css / style.css
  code> 

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



   -  CSS（文件夹）
  -  STYLE.CSS（文件）
  -  WEBSITE（文件夹）
  -  PAGE.HTML（您的HTML页面）
  

这个结构，HTML页面和CSS文件夹不是兄弟姐妹。但CSS文件夹和 HTML页面的父是兄弟姐妹。所以，你需要上升一个级别，你可以通过添加 ../ 来完成，例如



*注意：这可以堆叠。你可以把 href =../../../ css / style.css，然后你可以从



3 - 开始斜线

  href =/ css / style.css
  

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



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



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

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



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

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



---

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

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

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

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

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.

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

解决方案

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

href="css/style.css"

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

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.

2 - Starting dots and slash

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

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

- 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 parent are siblings. So, you need to go up one level, which you accomplish by adding ../ like in the example.

*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.

3 - Starting slash

href="/css/style.css"

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

Suppose your webpage is accessible via the following 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:

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.

---

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.

这篇关于HTML不加载CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！