是否可以将一个CSS文件包含在另一个文件中？

是否可以将一个CSS文件包含在另一个文件中？

Josh Crozier
已编辑的问题 20日 十月 2013 в 7:26
编程
css
29日 九月 2008 в 4:23
30 种观点
对该问题的评论 (2)
解决办法

是的。

@import url("base.css");

注意。

  • @import 规则必须先于 所有其他规则（除了@charset）。
  • 额外的@import'语句需要额外的服务器请求。作为一种选择，将所有的CSS串联到一个文件中，以避免多次HTTP请求。例如，将base.css和special.css的内容复制到base-special.css中，只引用base-special.css`。
MultiplyByZer0
编辑本段答案22日 八月 2019 в 1:19
评论(1)

是的，可以导入CSS文件到另一个CSS文件中。 可以将CSS文件导入到另一个CSS文件中。

它必须是使用[@import rule][1]的样式表中的第一条规则。

@import "mystyle.css";
@import url("mystyle.css");

唯一需要注意的是，旧的网页浏览器将不支持。 事实上，这也是CSS 'hack&#39之一。 来隐藏旧浏览器的CSS样式。

参考[本列表][2]的浏览器支持。

[1]: http://www.w3.org/TR/CSS21/cascade.html#at-import [2]: http://www.westciv.com/style_master/academy/browser_support/basic_concepts.html

评论(0)

@import url("base.css");可以很好地工作，但请记住，每一个@import语句都是对服务器的一个新请求。 这对你来说可能不是问题，但当需要最佳性能时，你应该避免使用@import。

评论(2)

CSS的@import规则就是这样做的。例如。

@import url('/css/common.css');
@import url('/css/colors.css');
评论(1)

是的。

@import "your.css";

该规则在这里中得到记载。

1:

Arsen7
编辑本段答案22日 十一月 2011 в 4:06
评论(1)

在某些情况下，可以使用@import "file.css"，大多数现代浏览器应该支持这个，旧的浏览器，如NN4，会稍微有点疯狂。

注意：导入语句必须先于文件中的所有其他声明，在生产中使用之前要在所有的目标浏览器上进行测试。

评论(0)

是的，使用@import

详细的信息很容易被搜索到，一个好的信息是http://webdesign.about.com/od/beginningcss/f/css_import_link.htm。

评论(0)

是的，可以使用@import并提供css文件的路径。 例如

@import url("mycssfile.css");

或

@import "mycssfile.css";
vidhi
编辑本段答案5日 四月 2013 в 2:08
评论(0)

@import("/path-to-your-styles.css");。

这是使用css在css样式表中包含一个css样式表的最好方法。

Floyd
编辑本段答案17日 七月 2014 в 7:36
评论(0)

"@import&quot.规则可以在多个样式文件中调用。 规则可以调用多个样式文件。 这些文件会在需要的时候被浏览器或用户代理调用，如 HTML标签调用CSS。




Using @import
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

@import url("main.css");

CSS文件"main.css&quot。 包含以下语法。

@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);

在样式元素中插入使用[createTexNode don't use innerHTML][1]但是。

<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>

[1]: https://stackoverflow.com/a/5229978/4058484

Community
编辑本段答案23日 五月 2017 в 12:18
评论(1)

是的 你可以很容易地将一个CSS导入到另一个（网站的任何地方）。 你要用喜欢。

@import url("url_path");
评论(0)
@import url('style.css');

相对于最佳答案，当使用HTTP/2.0时，不建议将所有CSS文件聚合成一个块。

评论(0)

用altervista和wordpress导入bootstrap

评论(0)

不管什么原因，@import没有为我工作，但它'不是真的有必要，是吗？

下面是我在 html 中的做法。

请注意，media="print&quot。 有2个样式表，分别是myap-print.css和myap-screen.css。 myap-print.css和myap-screen.css。 这和在myap-print.css中包含myap-screen.css的效果是一样的。

评论(1)

我已经创建了main.css文件，并将所有的css文件包含在其中。

我们只能包含一个main.css文件。

@import url('style.css');
@import url('platforms.css');
评论(0)

歌唱CSS @import规则 这里

@import url('/css/header.css') screen;
@import url('/css/content.css') screen;
@import url('/css/sidebar.css') screen;
@import url('/css/print.css') print;
kernal lora
编辑本段答案30日 八月 2016 в 10:06
评论(1)

我偶然发现了这个问题，我只想说，请不要在CSS中使用@IMPORT!!! 导入语句发送到客户端，客户端再做一次请求。 如果你想在不同的文件之间划分你的CSS，请使用Less。 在Less中，导入语句发生在服务器上，输出会被缓存，不会因为强迫客户端进行另一个连接而造成性能惩罚。 Sass也是一个选项，另一个我没有探讨过。 坦白说，如果你没有使用Less或Sass，那么你应该开始使用。 http://willseitz-code.blogspot.com/2013/01/using-less-to-manage-css-files.html

评论(7)