Question

我原本想在我的HTML文档中包含一个.css，它加载多个其他.css文件，以便为开发目的划分一些代码块。

我创建了一个测试页面：

<!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> 
 <title>The Recipe Site</title>
 <link rel='stylesheet' href='/css/main.css'>
 <link rel='stylesheet' href='/css/site_header.css'>
 <!-- Let google host jQuery for us, maybeb replace with their api -->
 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
 <script type="text/javascript" src="/js/main.js"></script> 
</head> 
<body> 
  <div id="site_container"> 
   <div id="site_header"><?php include_once($r->base_dir . "inc/site_header.inc.php"); ?><!-- Include File, Update on ajax request. --></div> 
   <div id="site_content">
    Some main content.
   </div> 
   <div id="site_footer"><?php include_once($r->base_dir . "inc/site_footer.inc.php"); ?><!-- Include File, Update on ajax request. --></div>
  </div> 
</body> 
</html>

文件：/css/main.css

/* Reset Default Padding & Margin */
* { 
 margin: 0; 
 padding: 0; 
 border: 0; 
}


/* Set Our Float Classes */
.clear { clear: both; } 
.right { float: right; } 
.left { float: left; }


/* Setup the main body/site container */
body { 
 background: url(/images/wallpaper.png) repeat; 
 color: #000000;     
 text-align: center; 
 font: 62.5%/1.5  "Lucida Grande", "Lucida Sans", Tahoma, Verdana, sans-serif; 
} 

#site_container {  
 background-color: #FFFFFF; 
 height: 100%;
 margin-left: auto;  
 margin-right: auto;  
 text-align: left;   
 width: 100%;  
}


/* Some style sheet includes */
/* @import "/css/site_header.css"; */


/* Default Font Sizes */
h1 { font-size: 2.2em; } 
h2 { font-size: 2.0em; } 
h3 { font-size: 1.8em; }
h4 { font-size: 1.6em; } 
h5 { font-size: 1.4em; } 
p { font-size: 1.2em; }


/* Default Form Layout */
input.text { 
 padding: 3px; 
 border: 1px solid #999999;     
}


/* Default Table Reset */
table {  
 border-spacing: 0; 
 border-collapse: collapse; 
} 

td{ 
 text-align: left; 
 font-weight: normal; 
}


/* Cause not all browsers know what HTML5 is... */
header { display:block;}
footer { display:block;}

现在文件：/css/site_header.css：

#site_header {
 background-color: #c0c0c0;
 height: 100px;
 position: absolute;
 top: 100px;
 width: 100%;
}

问题：

当我使用上面的代码时，site_header div没有任何格式/背景。当我从site_header.css的HTML文档中删除链接行，而是使用@import url（“/ css / site_header.css”）;在我的main.css文件中，相同的结果 - 没有为同一个div渲染任何内容。

现在当我从site_header.css获取CSS标记并将其添加到main.css时，div被渲染得很好......

所以我想知道是否有多个css文件在某种程度上不起作用...或者在我之前的css结尾处可能有css标记有点冲突，但我找不到它为什么会这样做的原因。

Answer 1

@import指令必须在CSS中排在第一位。只要浏览器触发了一个样式，就会忽略所有其他导入行。

引用WC3：

“任何@import规则必须先于所有其他规则（@charset规则除外，如果存在）“

请参阅http://www.w3.org/TR/CSS2/cascade.html#at-import

要考虑的一件事是，每个@import仍会导致HTTP请求，因此它不比使用多个链接标记更有效。事实上，它可能效率较低，因为导入可能是顺序请求而不是并行请求。 See this article。 IMO它还增加了复杂性，因为你最终在两个地方管理CSS引用（标记的头标记加上一个或多个CSS文件）与一个简单的链接标记列表。

我还建议您在网站投入生产时将CSS文件合并到哪里，因为这样可以减少HTTP开销。

Answer 2

我可以这么说，但是请将与CSS文件相关的图像放在CSS文件夹本身中，而不是放在/ images /中。

CSS的重点是风格和内容的分离，只有内容图像应该放在/ images /中。 CSS调用的任何图像都应放在同一目录中并无路径调用，例如：

body { 
 background: url(wallpaper.png) repeat; 
}

如果要改变样式，或者制作多个样式，那么稍后会更新一个链接并移动一个文件夹（/ css /），而不是在整个文件系统中散布一堆图像。另外，使用文件的绝对路径（例如/images/wallpaper.png）总是一个坏主意。

Answer 3

首先，您的标记无效。必须关闭链接标记...

<link rel="stylesheet" href="/css/main.css" />

其次，为什么不对元素属性使用双引号（在链接标记中，您恰好使用单引号）？这不是问题的一部分，但我发现你很难将这样的各种语法约定混合在一起。

最后，我不建议使用@import，因为它没有提供令人信服的好处。它必须是CSS文件中的第一件事。还必须为每个附加CSS文件进行额外的HTTP请求。最重要的是，当您为导入指定目标媒体时，IE会感到焦躁不安。我坚持使用旧的经典链接标签，因为它只是有效（假设您有有效的标记！）。

Answer 4

使用firebug检查div并查看正在应用的样式，您可能会获得更多洞察力。

Answer 5

对于像这样的CSS的任何问题，我建议使用firebug。您将能够看到您的site_header.css是否正确加载。

如果它正在加载，你将能够看到哪些样式被应用于哪些元素，或许有些被覆盖？

Answer 6

将 @import 规则用于 main.css 文件，例如：

@import url("css/site_header.css");（此代码应位于main.css）

之上

上述导入代码段会将您的多个css文件绑定到单个css中然后将main.css文件用于您的HTML。

CSS导入或多个CSS文件

6 个答案: