CSS 文件未链接到 HTML
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27574753/
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
CSS file not linking to HTML
提问by Inflames626
I've recently started learning to code HTML and CSS by hand for the first time since the mid 90s (last time I tried to build a site, Netscape Communicator Gold 3.0 was out--so bear with me here).
我最近开始学习手工编写 HTML 和 CSS 代码，这是自 90 年代中期以来的第一次（上次我尝试建立一个站点，Netscape Communicator Gold 3.0 已经过时了——所以请耐心等待）。
I cannot get my CSS to link up with my HTML. I am using HTML5 conventions and following the code examples in the popular book "Learning Web Design," 4th edition, by Jennifer Robbins. Many of the code examples I see use conventions that are no longer required in HTML 5.0, so my code may be a bit sparse.
我无法让我的 CSS 与我的 HTML 链接。我正在使用 HTML5 约定并遵循 Jennifer Robbins 所著的畅销书“Learning Web Design”（第 4 版）中的代码示例。我看到的许多代码示例使用了 HTML 5.0 中不再需要的约定，因此我的代码可能有点稀疏。
I have tried to directly embed the styles in the HTML and they work. However, they do not work when in a CSS sheet. I have tried to load the page in both IE11 and the newest version of Chrome and the page displays in white with default browser settings. My HTML file and my CSS file are in the same directory: c:/RogersReviews. There is an images folder in the directory, c:/RogersReviews/Images. I have linked to an image file in that folder and my code works.
我试图直接将样式嵌入 HTML 中，并且它们起作用了。但是，它们在 CSS 表中不起作用。我尝试在 IE11 和最新版本的 Chrome 中加载该页面，并且该页面在默认浏览器设置下以白色显示。我的 HTML 文件和 CSS 文件位于同一目录中：c:/RogersReviews。目录中有一个图像文件夹，c:/RogersReviews/Images。我已链接到该文件夹中的图像文件，并且我的代码有效。
However, I cannot change the background color of my page using a linked CSS style sheet. I have tried to make it red to prove that the link is working. Below is my CSS code followed by my HTML code.
但是，我无法使用链接的 CSS 样式表更改页面的背景颜色。我试图让它变成红色以证明链接有效。下面是我的 CSS 代码，然后是我的 HTML 代码。
I have used Eric Meyer's browser reset code in the CSS to clear out any browser settings that might be messing things up. I have omitted it for your convenience.
我在 CSS 中使用了 Eric Meyer 的浏览器重置代码来清除任何可能使事情变得混乱的浏览器设置。为了您的方便，我省略了它。
It is probably something minor that I have missed. Thank you in advance for your help.
这可能是我错过的一些小事。预先感谢您的帮助。
EDIT: The page seems to be linking just fine when I post it here, but not when I run it from my hard drive by opening the HTML file. I would like to be able to see the page as it would look online, but from my hard drive.
编辑：当我在这里发布页面时，该页面似乎链接得很好，但当我通过打开 HTML 文件从硬盘驱动器运行它时却没有。我希望能够看到该页面，就像它在网上看起来一样，但来自我的硬盘。
body {
background-color: red;
}<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<title>Rogers Reviews: Academic Book Reviews </title>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
<body>
<header>
<img src="Images/Rogers-Reviews-logo-3.gif" alt="Rogers%20Reviews">
<ul id="menu">
<li><a href="">Home</a></li>
<li><a href="">Authors</a></li>
<li><a href="">Subjects</a></li>
</ul>
</header>
<h1> Welcome </h1>
<p> This site is a collection of academic book reviews, mostly in the humanities and the social sciences. </p>
<p> The purpose of this site is to assist high school, undergraduate, and graduate history students with choosing appropriate secondary sources for their research papers. An emphasis is placed on older works written before 1960.</p>
<p> <a href="RRindex.html"> Back to home </a> </p>
<footer>
<p> © 2014 </p>
<p> <a href=""> About </a> </p>
<p> <a href=""> Contact </a> </p>
</footer>
</body>
</html>采纳答案by Aeolingamenfel
I inserted your code, verbatim, into a JSFiddle, and the background is red, as you wanted.
我将您的代码逐字插入JSFiddle 中，背景为红色，如您所愿。
The code is not the issue, then. Instead, its a problem of the stylesheet loading properly. Try some or all of the following:
那么代码不是问题。相反，它是样式表正确加载的问题。尝试以下部分或全部方法：
- Check your stylesheet name, and that it is the same in the directory as it is in your HTML code; make sure
stylesheet.cssexists properly. - Double-check that the file exists in the right place, which is in the same directory as your index that you are opening.
- Make sure the stylesheet is loading. In Chrome, if you right-click -> inspect element and go to the sources tab, you can see all loaded resources, including your CSS. If it's not loading here, it could be that it tries to load from your cache. You can force Chrome to load sites without the cache by opening the inspector again, clicking on the gear menu, and checking "Disable cache (while DevTools is open)', and reloading your site.
- Check your local apache/webhost server to make sure that it doesn't have any settings blocking the loading of certain files or types of files. This is assuming you are running one and not just opening the file in Chrome/IE. If that is the case, you should have no problems with the file loading.
- Make sure you saved the file. It's silly, but I can personally vouch for the time when I couldn't make my site update, and I forgot to save/update the file I was viewing.
- 检查您的样式表名称，它在目录中是否与在 HTML 代码中相同；确保
stylesheet.css正确存在。 - 仔细检查该文件是否位于正确的位置，该位置与您打开的索引位于同一目录中。
- 确保样式表正在加载。在 Chrome 中，如果您右键单击 -> 检查元素并转到源选项卡，您可以看到所有加载的资源，包括您的 CSS。如果它没有在此处加载，则可能是它尝试从您的缓存加载。您可以通过再次打开检查器，单击齿轮菜单，并选中“禁用缓存（DevTools 打开时）”，然后重新加载您的站点来强制 Chrome 加载没有缓存的站点。
- 检查您的本地 apache/webhost 服务器以确保它没有任何阻止加载某些文件或文件类型的设置。这是假设您正在运行一个，而不仅仅是在 Chrome/IE 中打开文件。如果是这种情况，则文件加载应该没有问题。
- 确保您保存了文件。这很愚蠢，但我可以亲自保证我无法更新我的网站，并且我忘记保存/更新我正在查看的文件。
回答by neil abella
simple solution: no changes to you html code
简单的解决方案：不更改您的 html 代码
I logged into ubunto as a "root" user.
then go the /var/www and right click on the www folder then properties and i change the permission on "view content", "change content", and "access content" to allow "anyone"
我以“root”用户身份登录 ubunto。
然后转到 /var/www 并右键单击 www 文件夹，然后单击属性，然后更改“查看内容”、“更改内容”和“访问内容”的权限以允许“任何人”
view content: anyone change content: anyone access content: anyone
查看内容：任何人更改内容：任何人访问内容：任何人
- restart apache2 server type: service apache2 restart
- then test the webpage
- 重启 apache2 服务器类型：service apache2 restart
- 然后测试网页
hope this helps
希望这可以帮助
