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

779

css

— 加兹卡·阿连德
source

26

只是一个麻烦，这样做不会保存HTTP请求。它只是使您不必在其他位置包括导入的.css文件。

— T. Brian Jones

1

我将与之前包含另一个CSS几乎一样，而不是最佳实践

— Gaizka Allende 2014年

1084

是：

@import url("base.css");

注意：

该@import规则必须先所有其他规则（除@charset）。
其他@import语句需要其他服务器请求。或者，将所有CSS连接到一个文件中，以避免多个HTTP请求。例如，复制的内容base.css和special.css入base-special.css和仅供参考base-special.css。

— 凯文·雷德
source

143

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

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

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

唯一的警告是较旧的Web浏览器将不支持它。实际上，这是对旧浏览器隐藏CSS样式的CSS“ hack”之一。

请参阅此列表以获取浏览器支持。

— 罗尼·刘（Ronnie Liew）
source

42

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

— 基因
source

2

不缓存CSS文件吗？因此，它只会请求一次文件？似乎微不足道。

— endlith 2014年

1

如果您没有将css缩小到一个文件，那么是的，您是正确的，但是一旦确定，那么您只是在调用一个css文件。如果我当然错了，请纠正我。

— mjwrazor

27

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

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

— 索伦·库克劳
source

16

是。

@import "your.css";

该规则记录在这里。

— 戈登·威尔逊
source

11

在某些情况下，可以使用@import“ file.css”，并且大多数现代浏览器都应支持此功能，而诸如NN4之类的较旧的浏览器会有些许不适。

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

— 西恩
source

8

是的，使用@import

详细信息可轻松搜索，http： //webdesign.about.com/od/beginningcss/f/css_import_link.htm上的好信息

— 达伦
source

6

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

@import url("mycssfile.css");

要么

@import "mycssfile.css";

— 维迪
source

6

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

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

— 弗洛伊德
source

6

“ @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文件“ 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>

— 车tab
source

只是指出，@hylp指出可以从导入中覆盖类（类projection和screen？），这通常不是一件好事。;）

— Tcll

2

@import url('style.css');

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

— 彼得C_
source

2

使用Altervista和Wordpress导入Bootstrap

我用这个用wordpress导入altervista中的bootstrap.css

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

而且效果很好，因为如果我将其放入页面，它将删除html链接相关代码

— 乔凡尼·PY
source

1

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

@import url("url_path");

— NARGIS帕文
source

1

出于某种原因，@ import不适用于我，但这不是必须的吗？

这是我在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”具有2个样式表：myap-print.css和myap-screen.css。与将myap-screen.css包含在myap-print.css中的效果相同。

— 科林·基南
source

不，这是不正确的。这包括一个HTML文件中的多个CSS文件，不包括另一个CSS文件中的CSS文件。

— TylerH

0

在这里唱CSS @import Rule

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

— Pocky_泰国
source

0

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

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

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

— Dinesh Vaitage
source

-3

我偶然发现了这个，我只是想说请在CSS中不要使用@IMPORT ！！！导入语句将发送到客户端，客户端再执行另一个请求。如果要在各种文件之间划分CSS，请使用Less。在Less中，import语句在服务器上发生，并且输出被缓存，并且不会通过强制客户端建立另一个连接而对性能造成不利影响。Sass也是我没有探索过的一种选择。坦白说，如果您不使用Less或Sass，则应该开始。http://willseitz-code.blogspot.com/2013/01/using-less-to-manage-css-files.html

— 威尔·塞兹
source

1

客户端将执行另一个请求，而不是另一个连接。对于质量，这是使用导入CSS的好方法。最好使用这些导入文件，而不要使用随项目而增长的大型css文件...

— YvesR 2013年

3

这是Google（developers.google.com/speed/docs/best-practices/…）和Yahoo（developer.yahoo.com/performance/rules.html#csslink）的建议

— WillSeitz 2013年

1

不过-这只是另外一项要求。完整页面加载的数量可能不足数百。

— 史蒂夫·本内特

8

对？！再有一个要求几乎不能保证挥臂和全大写的免责声明。请求不是坏习惯。答案的-1-LESS和SASS货物崇拜。

— 克里斯·贝克

好吧，这只是一个更多的请求..但是您可以将更多的CSS导入到一个中，然后并行下载它们。

— wh1sp3r 2014年