是否可以将一个 CSS 文件包含在另一个文件中？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/147500/
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
Is it possible to include one CSS file in another?
提问by Gaizka Allende
Is it possible to include one CSS file in another?
是否可以将一个 CSS 文件包含在另一个文件中？
回答by Kevin Read
Yes:
是的：
@import url("base.css");
Note:
笔记：
- The
@importrule must precedeall other rules (except@charset). - Additional
@importstatements require additional server requests. As an alternative, concatenate all CSS into one file to avoid multiple HTTP requests. For example, copy the contents ofbase.cssandspecial.cssintobase-special.cssand reference onlybase-special.css.
回答by Ronnie Liew
Yes. Importing CSS file into another CSS file is possible.
是的。可以将 CSS 文件导入另一个 CSS 文件。
It must be the first rule in the style sheet using the @import rule.
它必须是使用@import 规则的样式表中的第一条规则。
@import "mystyle.css";
@import url("mystyle.css");
The only caveat is that older web browsers will not support it. In fact, this is one of the CSS 'hack' to hide CSS styles from older browsers.
唯一需要注意的是，较旧的 Web 浏览器将不支持它。事实上，这是在旧浏览器中隐藏 CSS 样式的 CSS 'hack' 之一。
Refer to this listfor browser support.
请参阅此列表以获取浏览器支持。
回答by Gene
The @import url("base.css");works fine but bear in mind that every @importstatement is a new request to the server. This might not be a problem for you, but when optimal performance is required you should avoid the @import.
该@import url("base.css");工作正常，但要记住，每一个@import语句是对服务器的新请求。这对您来说可能不是问题，但是当需要最佳性能时，您应该避免@import.
回答by S?ren Kuklau
The CSS @importrule does just that. E.g.,
CSS@import规则就是这样做的。例如，
@import url('/css/common.css');
@import url('/css/colors.css');
回答by seanb
In some cases it is possible using @import "file.css", and most modern browsers should support this, older browsers such as NN4, will go slightly nuts.
在某些情况下，可以使用@import "file.css"，并且大多数现代浏览器都应该支持这一点，较旧的浏览器（例如 NN4）会有点疯狂。
Note: the import statement must precede all other declarations in the file, and test it on all your target browsers before using it in production.
注意：import 语句必须在文件中的所有其他声明之前，并在生产中使用它之前在所有目标浏览器上测试它。
回答by DarenW
Yes, use @import
是的，使用@import
detailed info easily googled for, a good one at http://webdesign.about.com/od/beginningcss/f/css_import_link.htm
详细信息很容易用谷歌搜索，一个很好的在http://webdesign.about.com/od/beginningcss/f/css_import_link.htm
回答by Floyd
@import("/path-to-your-styles.css");
@import("/path-to-your-styles.css");
That is the best way to include a css stylesheet within a css stylesheet using css.
这是使用 css 在 css 样式表中包含 css 样式表的最佳方法。
回答by vidhi
yes it is possible using @import and providing the path of css file e.g.
是的，可以使用@import 并提供 css 文件的路径，例如
@import url("mycssfile.css");
or
或者
@import "mycssfile.css";
回答by Chetabahana
The "@import" rule could calls in multiple styles files. These files are called by the browser or User Agent when needed e.g. HTML tags call the CSS.
“@import”规则可以调用多个样式文件。这些文件在需要时由浏览器或用户代理调用，例如 HTML 标签调用 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" lang="EN" dir="ltr">
<head>
<title>Using @import</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
@import url("main.css");
</style>
</head>
<body>
</body>
</html>
CSS File "main.css" Contains The Following Syntax:
CSS 文件“main.css”包含以下语法：
@import url("fineprint.css") print;
@import url("bluish.css") projection, tv;
@import 'custom.css';
@import url("chrome://communicator/skin/");
@import "common.css" screen, projection;
@import url('landscape.css') screen and (orientation:landscape);
To insert in style element use createTexNode don't use innerHTMLbut:
要插入样式元素，请使用createTexNode 不要使用 innerHTML而是：
<script>
var style = document.createElement('style');
style.setAttribute("type", "text/css");
var textNode = document.createTextNode("
@import 'fineprint.css' print;
@import 'bluish.css' projection, tv;
@import 'custom.css';
@import 'chrome://communicator/skin/';
@import 'common.css' screen, projection;
@import 'landscape.css' screen and (orientation:landscape);
");
style.appendChild(textNode);
</script>
