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

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

555287 次浏览
小开
最佳答案

有：

@import url("base.css");

备注：

  • @import规则必须先于所有其他规则（@charset除外）。
  • 额外的@import语句需要额外的服务器请求。作为替代方案，将所有CSS连接到一个文件中以避免多个HTTP请求。例如，将base.css和special.css的内容复制到base-special.css中并仅引用base-special.css。
小开

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

@import url('/css/common.css');@import url('/css/colors.css');
小开

在某些情况下，可以使用“file.css”，大多数现代浏览器应该支持这一点，较旧的浏览器（如NN4）会稍微疯狂。

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

小开

是的，使用@导入

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

小开

是滴

@import "your.css";

该规则记录为这里。

小开

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

它必须是样式表中使用@导入规则的第一条规则。

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

唯一需要注意的是，旧的Web浏览器将不支持它。事实上，这是CSS“黑客”之一，用于从旧浏览器中隐藏CSS样式。

有关浏览器支持，请参阅这份名单。

小开

@import url("base.css");运行良好，但请记住，每个@import语句都是对服务器的新请求。这对您来说可能不是问题，但当需要最佳性能时，您应该避免@import。

小开

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

这是使用css在css样式表中包含css样式表的最佳方式。

小开

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

@import url("mycssfile.css");

或 

@import "mycssfile.css";
小开

我偶然发现了这个，我只想说请不要在CSS中使用@IMPORT！！！！导入语句被发送到客户端，客户端执行另一个请求。如果你想在不同的文件之间划分CSS，请使用less。在less中，导入语句发生在服务器上，输出被缓存，不会通过强制客户端建立另一个连接来造成性能损失。Sass也是一个选项，我没有探索过。坦率地说，如果你没有使用less或Sass，那么你应该开始。http://willseitz-code.blogspot.com/2013/01/using-less-to-manage-css-files.html

小开

唱CSS@导入规则这里

@import url('/css/header.css') screen;@import url('/css/content.css') screen;@import url('/css/sidebar.css') screen;@import url('/css/print.css') print;
小开

“@导入”规则可以调用多种样式文件。这些文件由浏览器或用户代理在需要时调用，例如超文本标记语言标签调用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文件“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);

要插入样式元素，请使用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>
小开

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

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

@import url('style.css');@import url('platforms.css');
小开

是的，您可以轻松地将一个css导入到另一个css（网站的任何位置）您必须使用喜欢：

@import url("url_path");
小开 
@import url('style.css');

与最佳答案相反，不建议在使用HTTP/2.0时将所有CSS文件聚合为一个块

小开

导入bootstrap与Altvista和WordPress

我用它来导入bootstrap.css与WordPress的AltVista

@import url("https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css");

它工作得很好，因为如果我把它放到一个页面中，它会删除html链接rel代码

小开

不管出于什么原因，@进口对我不起作用，但这并不是真的必要，是吗？

这是我在html中所做的：

  <link rel="stylesheet" media="print" href="myap-print.css"><link rel="stylesheet" media="print" href="myap-screen.css"><link rel="stylesheet" media="screen" href="myap-screen.css">

请注意media="print"有两个样式表：myap-print.css和myap-screen.css.它与myap-print.css.中包含myap-screen.css的效果相同


提交答案