HTML 未加载 CSS 文件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9480773/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML not loading CSS file
提问by Asem H.
I am completely stumped as to why this doesn't work. It seems the HTML file can't load the CSS for some reason, even though both are in the same directory. Any idea what might be the problem?
我完全不明白为什么这不起作用。似乎 HTML 文件由于某种原因无法加载 CSS，即使两者都在同一目录中。知道可能是什么问题吗？
index.html
索引.html
<!DOCTYPE html>
<html>
<head>
<title>Home Page</title>
<link rel="stylesheet" href="style.css" media="screen" />
<meta name="viewport" content="width=1100">
</head>
<body>
<div id="main"> Hello </div>
</body>
</html>
style.css
样式文件
body{
background-color: #F9F9F9;
background-image: url(images/bg3.png);
background-position: center top;
background-repeat: repeat;
text-shadow: #FFFFFF 0px 1px 0px;
font-family: "Georgia", "Times", serif;
-webkit-font-smoothing: antialiased;
}
a{
text-decoration: none;
}
#main{
margin: 50px auto 50px auto;
width: 1000px;
min-height: 500px;
padding: 0px 20px 0px 20px;
}
The above doesn't work. Adding the css inline in index.html works fine though
以上是行不通的。虽然在 index.html 中添加 css inline 工作正常
<!DOCTYPE html>
<html>
<head>
<title>Homepage</title>
<style type="text/css" media="screen">
body {
background-color: #F9F9F9;
background-image: url(images/bg3.png);
background-position: center top;
background-repeat: repeat;
text-shadow: #FFFFFF 0px 1px 0px;
font-family: "Georgia", "Times", serif;
-webkit-font-smoothing: antialiased;
}
a {
text-decoration: none;
}
#main {
margin: 50px auto 50px auto;
width: 1000px;
min-height: 500px;
padding: 0px 20px 0px 20px;
}
</style>
<meta name="viewport" content="width=1100">
</head>
<body>
<div id="main"> Hello </div>
</body>
</html>
回答by Simon West
Add
添加
type="text/css"
to your link tag
到您的链接标签
While this may no longer be necessary in modern browsers the HTML4 specificationdeclared this a required attribute.
虽然这在现代浏览器中可能不再需要，但HTML4 规范将其声明为必需属性。
type = content-type [CI]
This attribute specifies the style sheet language of the element's contents and overrides the default style sheet language. The style sheet language is specified as a content type (e.g., "text/css"). Authors must supply a value for this attribute; there is no default value for this attribute.
类型 = 内容类型 [CI]
此属性指定元素内容的样式表语言并覆盖默认样式表语言。样式表语言被指定为内容类型（例如，“text/css”）。 作者必须为此属性提供一个值；此属性没有默认值。
回答by Ghost Answer
Check both files in the same directory and then try this
检查同一目录中的两个文件，然后试试这个
<link href="style.css" rel="stylesheet" type="text/css"/>
回答by hayonj
You have to add type="text/css"you can also specify href="./style.css"which the .specifies the current directory
您必须添加type="text/css"您还可以指定指定当前目录的href="./style.css"哪个.
回答by Stan Ralph
I have struggled with this same problem (Ubuntu 16.04, Bluefish editor, FireFox, Google Chrome.
我也遇到过同样的问题（Ubuntu 16.04、Bluefish 编辑器、FireFox、Google Chrome。
Solution: Clear browsing data in Chrome "Settings > Advanced Settings > Clear Browsing Data", In Firefox, "Open Menu image top right tool bar 'Preferences' > Advanced ", look for this image in the menu: Cached Web Content click the button "Clear Now". Browser's cache the .css file and if it has not changed they usually won't reload it. So when you change your .css file clear this web cache and it should work unless a problem exists in your .css file. Peace, Stan
解决方法：在Chrome“设置>高级设置>清除浏览数据”中清除浏览数据，在Firefox中，“打开菜单图像右上角工具栏'首选项'>高级”，在菜单中查找此图像：缓存的Web内容单击按钮“立即清除”。浏览器缓存 .css 文件，如果它没有改变，他们通常不会重新加载它。因此，当您更改 .css 文件时，请清除此 Web 缓存，除非您的 .css 文件中存在问题，否则它应该可以工作。和平，斯坦
回答by w3uiguru
As per you said your both files are in same directory. 1. index.html and 2. style.css
正如你所说，你的两个文件都在同一个目录中。1. index.html 和 2. style.css
I have copied your code and run it in my local machine its working fine there is no issues.
我已经复制了您的代码并在我的本地机器上运行它，它工作正常，没有任何问题。
According to me your browser is not refreshing the file so you can refresh/reload the entire page by pressing CTRL + F5 in windows for mac CMD + R.
根据我的说法，您的浏览器不会刷新文件，因此您可以通过在 windows 中按 CTRL + F5 来刷新/重新加载整个页面 for mac CMD + R。
Try it if still getting problem then you can test it by using firebugtool for firefox.
如果仍然遇到问题，请尝试一下，然后您可以使用firefox 的firebug工具对其进行测试。
For IE8 and Google Chrome you can check it by pressing F12 your developer tool will pop-up and you can see the Html and css.
对于 IE8 和谷歌浏览器，您可以按 F12 进行检查，您的开发人员工具将弹出，您可以看到 Html 和 css。
Still you have any problem please comment so we can help you.
仍然您有任何问题，请发表评论，以便我们可以帮助您。
回答by Koen Peters
You could try this:
你可以试试这个：
<link href="style.css" rel="stylesheet" type="text/css" media="screen, projection"/>
Make sure that the browser actually makes the request and doesn't return a 404.
确保浏览器实际发出请求并且不返回 404。
回答by sharkySharks
With HTML5 all you need is the rel, not even the type.
随着HTML5所有你需要的是rel，甚至没有type。
<link href="custom.css" rel="stylesheet"></link>
<link href="custom.css" rel="stylesheet"></link>
回答by jeff-ziligy
Your css file should be defined as UTF-8. Put this in the first line of you css file.
您的 css 文件应定义为 UTF-8。把它放在你的 css 文件的第一行。
@charset "UTF-8";
回答by Tejas
<link href="style.css" rel="stylesheet" type="text/css"/>回答by rbashish
Well I too had the exactly same question. And everything was okay with my CSSlink. Why html was not loading the CSSfile was due to its position (as in my case).
好吧，我也有完全相同的问题。我的CSS链接一切正常。为什么 html 没有加载CSS文件是由于它的位置（如我的情况）。
Well I had my custom CSSdefined in the wrong place and that is why the webpage was not accessing it. Then I started to test and place the CSS link to different place and voila it worked for me.
好吧，我CSS在错误的地方定义了我的自定义，这就是网页无法访问它的原因。然后我开始测试并将 CSS 链接放置到不同的地方，瞧它对我有用。
I had read somewhere that we should place custom CSSright after Bootstrap CSSso I did but then it was not loading it. So I changed the position and it worked.
我在某个地方读过我们应该立即放置的地方custom CSS，Bootstrap CSS所以我读了，但后来没有加载它。所以我改变了立场，它奏效了。
Hope this helps.
希望这可以帮助。
Thanks!
谢谢！
