CSS 文件未链接到 HTML [英] CSS file not linking to HTML
问题描述
我最近开始学习手工编写 HTML 和 CSS 代码，这是自 90 年代中期以来的第一次(上次我尝试构建网站时，Netscape Communicator Gold 3.0 已经过时了——所以请耐心等待).
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).
我无法让我的 CSS 与我的 HTML 链接.我正在使用 HTML5 约定并遵循 Jennifer Robbins 所著的畅销书Learning Web Design"第 4 版中的代码示例.我看到的许多代码示例都使用了 HTML 5.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.
我尝试将样式直接嵌入到 HTML 中并且它们有效.但是，它们在 CSS 表中不起作用.我尝试在 IE11 和最新版本的 Chrome 中加载该页面，并且该页面在默认浏览器设置下以白色显示.我的 HTML 文件和 CSS 文件位于同一目录中:c:/RogersReviews.目录中有一个图像文件夹，c:/RogersReviews/Images.我已链接到该文件夹中的图像文件，并且我的代码有效.
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.
但是，我无法使用链接的 CSS 样式表更改页面的背景颜色.我试图让它变成红色以证明链接有效.下面是我的 CSS 代码，然后是我的 HTML 代码.
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 中使用了 Eric Meyer 的浏览器重置代码来清除任何可能使事情变得混乱的浏览器设置.为了您的方便，我省略了它.
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.
这可能是我遗漏的一些小事.预先感谢您的帮助.
It is probably something minor that I have missed. Thank you in advance for your help.
当我在此处发布该页面时，该页面似乎链接得很好，但当我通过打开 HTML 文件从硬盘驱动器运行它时却没有.我希望能够看到该页面，就像它在网上看到的一样，但来自我的硬盘.
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.
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>推荐答案
我将您的代码逐字插入 JSFiddle，背景为红色，如您所愿.
I inserted your code, verbatim, into a JSFiddle, and the background is red, as you wanted.
那么，代码不是问题.相反，它是样式表正确加载的问题.尝试以下部分或全部:
The code is not the issue, then. Instead, its a problem of the stylesheet loading properly. Try some or all of the following:
- 检查您的样式表名称，它在目录中是否与在 HTML 代码中相同；确保
stylesheet.css正确存在. - 仔细检查该文件是否位于正确的位置，该位置与您要打开的索引位于同一目录中.
- 确保样式表正在加载.在 Chrome 中，如果您右键单击 -> 检查元素并转到源选项卡，您可以看到所有加载的资源，包括您的 CSS.如果它没有在此处加载，则可能是它尝试从您的缓存加载.您可以通过再次打开检查器、点击齿轮菜单并选中禁用缓存(DevTools 打开时)"并重新加载您的网站来强制 Chrome 加载没有缓存的网站.
- 检查您的本地 apache/webhost 服务器以确保它没有任何阻止加载某些文件或文件类型的设置.这是假设您正在运行一个，而不仅仅是在 Chrome/IE 中打开文件.如果是这种情况，文件加载应该没有问题.
- 确保您保存了文件.这很愚蠢，但我可以亲自保证我无法更新我的网站，并且我忘记保存/更新我正在查看的文件.
这篇关于CSS 文件未链接到 HTML的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
