CSS 样式表不会链接答案

【问题标题】：CSS style sheets wont linkCSS 样式表不会链接
【发布时间】：2017-02-08 11:03:12
【问题描述】：

链接我的 CSS 样式表突然停止工作？

CSS 文件是一个文件夹。另外，我使用了 IDE 的自动填充功能来填写 href。

另外，这是来自 Lynda.com 的练习文件

<cfquery datasource="photogallerydb" name="qPhotographer">
  SELECT * FROM Photographer WHERE featured = 1
</cfquery>
<cfquery datasource="photogallerydb" name="qPhotos">
  SELECT * FROM Photo WHERE photographerid = #qPhotographer.photographerid#
</cfquery>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Our Photo Gallery</title>
  <link rel="stylesheet" type="text/css" href="../styles.css" media="all" />
</head>

<body>

  <div id="main">
    <div id="header">
    </div>
    <div id="navbar" align="center">
      <a href="../home">Home</a>
      <a href="../photographers">Photographers</a>
      <a href="../photos">Photos</a>
    </div>
    <br class="clearfloat" />
    <div id="content">
      <h1>Our Featured Photographer</h1>
      <cfoutput>
        <h2>#qPhotographer.Firstname# #qPhotographer.Lastname#</h2>
      </cfoutput>

      <cfdump var="#qPhotos#">

    </div>
    <div id="footer">
      Copyright &copy;2009 Our Photo Gallery
    </div>
  </div>

</body>

</html>

CSS：

body {
	background-color: #ABBAF1;
	margin:0px;
	padding:0px;
}
body, table {
	font-family:Arial, Helvetica, sans-serif; 
}
h1 {
	font-size:1.2em;
	font-weight:bold;
}
h2 {
	font-size:1.1em;
	font-weight:normal;
}
h3 {
	font-size:.9em;
	font-weight:normal;
}
img {
	border:0px;
}
div {
	margin:0px;
	padding:0px;
	font-size:16px;
}
.clearfloat {
	clear:both;
	height:0px;
}
a {
	color:#000000;
	text-decoration:underline;
}
a.hover {
	text-decoration:underline;
}
#main {
	background-image: url(images/background.jpg);
	width:760px;
	border: 0px;
	height: 1400px;
	margin-top: 20px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;

}
#header {
	background-image: url(images/banner.jpg);
	height: 100px;
	width:inherit;
}
#navbar {
	background-color: #434DD1;
	height:2em;
	width:inherit;
	color: #CCC;
	padding-top: 15px;
}
#navbar a {
	color: #FFF;
	font-size: 18px;
	font-weight:bold;
	text-decoration:none;
	margin-left:15px;
	margin-right:15px;
}
#navbar a.visited {
	color: #FFF;
}
#content {
	padding-left:20px;
	padding-right:40px;
	padding-bottom:20px;
	padding-top:10px;
	min-height:300px;
}
#footer {
	padding-left:20px;
	padding-right:20px;
	font-size:12px;
	font-style:italic;
}
.oddrow {
	background-color:#fff;
}
.evenrow {
	background-color:#00ffff;
}

Firefox 调试器：

Status report</p><p><b>message</b> <u>/photogallery/styles.css</u>  </p><p><b>description</b> <u>The requested resource is not available.</u></p><hr class="line"><h3>Apache Tomcat/8.0.27</h3></body></htm

文件位置：

网址： http://localhost:8500/photogallery/home/index.cfm

HTML: C:\ColdFusion2016\cfusion\wwwroot\Photogallery\home\index.cfm

CSS： C:\ColdFusion2016\cfusion\wwwroot\Photogallery\styles.css

【问题讨论】：

我刚刚尝试使用绝对引用：我不再在 Firefox 中收到错误消息。但是没有样式出现。
你的 html 的完整路径是什么？它的网址是什么？...
网址：localhost:8500/photo%20gallery/home/index.cfm HTML:C:\ColdFusion2016\cfusion\wwwroot\Photo Gallery\home\index.cfm CSS:C:\ColdFusion2016\cfusion\wwwroot\Photo Gallery\styles.css
尝试直接访问css：localhost:8500/photo%20gallery/styles.css
这很奇怪，因为来自服务器的错误消息使用小写的p 谈论photogallery，但您的路径用大写的p 指示Photogallery。它是哪一个？您可能对 Windows 在路径中区分大写和小写的方式和/或服务器如何处理它们有疑问。我个人建议不要在 Windows 的路径中使用大写字母，或者为此使用空格。当您指定主页的 URL 时，您使用的是小写版本还是大写版本？

标签： html css

【解决方案1】：

您来自服务器的错误消息使用小写的p 谈论photogallery，但您的路径指示Photogallery 带有大写的P。它是哪一个？您可能对 Windows 在路径中区分大写和小写的方式和/或服务器如何处理它们有疑问。我个人建议不要在 Windows 的路径中使用大写字母，或者为此使用空格。当您指定主页的 URL 时，您使用的是小写版本还是大写版本？

有关此问题的更多信息，请参阅this answer。

【讨论】：

【解决方案2】：

您的 h3 没有关闭 } 可能导致 css 无法正确显示。还尝试从路径和文件夹中删除空间：photo%20gallery

相关问题请见本帖：HTML: href syntax : is it okay to have space in file name

【讨论】：

这可能是个问题，但错误信息明确指出找不到styles.css。目录名中的空格也没有错。
把目录名的空格取出来还是不开心。