Html CSS 导入或多个 CSS 文件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2518807/
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 import or multiple CSS files
提问by David H
I originally wanted to include a .css in my HTML doc that loads multiple other .css files in order to divide up some chunks of code for development purposes.
我最初想在我的 HTML 文档中包含一个 .css 来加载多个其他 .css 文件，以便为开发目的划分一些代码块。
I have created a test page:
我创建了一个测试页面：
<!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>
File: /css/main.css
文件：/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;}
and now the file: /css/site_header.css:
现在文件：/css/site_header.css：
#site_header {
background-color: #c0c0c0;
height: 100px;
position: absolute;
top: 100px;
width: 100%;
}
Problem:
问题：
When I use the above code, the site_header div does not have any formatting/background. When I remove the link line from the HTML doc for site_header.css and instead use an @import url("/css/site_header.css"); in my main.css file, the same results -- nothing gets rendered for for the same div.
当我使用上面的代码时，site_header div 没有任何格式/背景。当我从 site_header.css 的 HTML 文档中删除链接行并改为使用 @import url("/css/site_header.css"); 在我的 main.css 文件中，相同的结果 - 没有为同一个 div 呈现任何内容。
Now when I take the CSS markup from site_header.css and add it to main.css, the div gets rendered fine...
现在，当我从 site_header.css 中获取 CSS 标记并将其添加到 main.css 时，div 呈现得很好......
So I am wondering if having multiple css files is somehow not working... or maybe having that css markup at the end of my previous css is somehow conflicting, though I cannot find a reason why it would.
所以我想知道是否有多个 css 文件无法正常工作……或者在我之前的 css 末尾使用那个 css 标记可能会有些冲突，尽管我找不到原因。
回答by KP.
The @importdirective has to come first in your CSS. As soon as one style is hit by the browser, all other import lines will be ignored.
该@import指令必须首先出现在您的 CSS 中。一旦浏览器命中一种样式，所有其他导入行都将被忽略。
To quote WC3:
引用WC3：
"any @import rules must precede all other rules (except the @charset rule, if present)"
“任何@import 规则必须先于所有其他规则（@charset 规则除外，如果存在）”
See http://www.w3.org/TR/CSS2/cascade.html#at-import
见http://www.w3.org/TR/CSS2/cascade.html#at-import
One thing to consider, is that each @import still causes an HTTP request, so it's not any more efficient than using multiple link tags. In fact it may be less efficient as imports may be sequential rather than parallel requests. See this article. IMO it also adds complexity because you end up managing CSS references in two places (head tag of markup plus 1 or more CSS files) vs a simple list of link tags.
需要考虑的一件事是，每个@import 仍然会导致一个 HTTP 请求，因此它并不比使用多个链接标签更有效。事实上，它可能效率较低，因为导入可能是顺序请求而不是并行请求。请参阅这篇文章。IMO 它还增加了复杂性，因为您最终在两个地方管理 CSS 引用（标记的头部标签加上 1 个或多个 CSS 文件）与一个简单的链接标签列表。
I'd also recommend where you can combining CSS files when your site is in production as it will reduce HTTP overhead.
我还建议在您的站点处于生产状态时可以在哪里组合 CSS 文件，因为它会减少 HTTP 开销。
回答by DCD
Can I just say, pet peeve here, but place images related to the CSS file in the CSS folder itself, not in /images/.
我可以说，这里很烦人，但是将与 CSS 文件相关的图像放在 CSS 文件夹本身中，而不是在 /images/ 中。
The point of CSS is the separation of style and content, and only content images should go in /images/. Any images called by the CSS should be placed in the same directory and called pathlessly, e.g.:
CSS 的重点是样式和内容的分离，只有内容图片应该放在 /images/ 中。CSS 调用的任何图像都应放在同一目录中并无路径调用，例如：
body {
background: url(wallpaper.png) repeat;
}
That way at a later date if it comes to changing the style, or making multiple styles it's just a case of updating one link and moving one folder (/css/) rather than having a mess of images scattered all over the filesystem. Plus it's always a bad idea to use absolute paths to files (such as /images/wallpaper.png).
这样，以后如果要更改样式或制作多种样式，只需更新一个链接并移动一个文件夹 (/css/)，而不是将一堆图像散布在整个文件系统中。另外，使用文件的绝对路径（例如/images/wallpaper.png）总是一个坏主意。
回答by Josh Stodola
First of all, you have invalid markup. The link tag must be closed...
首先，您的标记无效。链接标签必须关闭...
<link rel="stylesheet" href="/css/main.css" />
Second, why don't you use double-quotes consistently for element attributes (here in the link tag you happen to use single-quote)? This is not part of the problem, but I find it daunting that you would intermingle various syntax conventions like this.
其次，为什么不为元素属性始终使用双引号（在链接标签中，您碰巧使用了单引号）？这不是问题的一部分，但我发现您将像这样混合各种语法约定令人生畏。
Lastly, I would not recommend using @importbecause it does not offer a compelling benefit. It must be the first thing in the CSS file. An additional HTTP request still has to be made for each of the additional CSS file(s). And on top of that, IE cokes when you to specify a target media for imports. I stick to the good old classic link tag because it just works (given that you have valid markup!).
最后，我不建议使用，@import因为它没有提供令人信服的好处。它必须是 CSS 文件中的第一件事。仍然必须为每个额外的 CSS 文件发出额外的 HTTP 请求。最重要的是，当您为导入指定目标媒体时，IE 会出现问题。我坚持使用旧的经典链接标签，因为它可以正常工作（假设您有有效的标记！）。
回答by Chris Wagner
Use firebug to inspect the div and see what styles are being applied to it, you might get some more insight.
使用 firebug 检查 div 并查看应用了哪些样式，您可能会获得更多见解。
回答by Fermin
For any issues with CSS like this I would recommend using firebug. You will be able to see if your site_header.css is loading properly.
对于像这样的 CSS 的任何问题，我建议使用firebug。您将能够查看您的 site_header.css 是否正确加载。
If it is loading you will be able to see which styles are being applied to which elements, perhaps some are being overwritten?
如果正在加载，您将能够看到哪些样式被应用于哪些元素，也许有些被覆盖了？
回答by Binayak Hotta
use @importrule into your main.cssfile like:
在main.css文件中使用@import规则，例如：
@import url("css/site_header.css");(this code should be on top of your main.css)
@import url("css/site_header.css");（此代码应在您的 之上main.css）
the above importsnippet will bind your multiple css files into single css
then that main.cssfile use into your HTML.
上面的导入片段会将您的多个 css 文件绑定到单个 css 中，然后将该main.css文件用于您的 HTML。
