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

Posted 2023-02-23

技术标签:

【中文标题】是否可以在另一个中包含一个 CSS 文件？【英文标题】：Is it possible to include one CSS file in another? 【发布时间】：2010-09-13 22:24:18 【问题描述】：

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

【问题讨论】：

仅供参考，这样做不会保存 HTTP 请求。它只是让您不必在其他地方包含导入的 .css 文件。我几乎和之前包含另一个 CSS 一样，而不是最佳实践 【参考方案1】：

是的：

@import url("base.css");

注意：

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

【讨论】：

【参考方案2】：

无论出于何种原因，@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-print.css 中包含 myap-screen.css 的效果相同。

【讨论】：

不，这是不正确的。这包括 HTML 文件中的多个 CSS 文件，不包括另一个 CSS 文件中的 CSS 文件。【参考方案3】：

使用 altervista 和 wordpress 导入引导程序

我用它来用 wordpress 在 altervista 中导入 bootstrap.css

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

它工作正常，因为如果我把它放到页面中，它会删除 html 链接 rel 代码

【讨论】：

【参考方案4】：

@import url('style.css');

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

【讨论】：

【参考方案5】：

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

@import url("url_path");

【讨论】：

【参考方案6】：

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

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

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

【讨论】：

【参考方案7】：

唱 CSS @import 规则 here

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

【讨论】：

【参考方案8】：

“@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 don't use 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>

【讨论】：

只是指出，而@hylp 指出可以从导入中覆盖类（类projection 和screen？）这通常不是一件好事。 ;)【参考方案9】：

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

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

【讨论】：

【参考方案10】：

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

@import url("mycssfile.css");

或

@import "mycssfile.css";

【讨论】：

【参考方案11】：

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

【讨论】：

客户端将执行另一个请求，而不是另一个连接。对于质量来说，这是使用 import css 的好方法。拥有这些导入而不是随着项目不断增长的大型 css 文件要好得多...... 这是 Google (developers.google.com/speed/docs/best-practices/…) 和 Yahoo (developer.yahoo.com/performance/rules.html#csslink) 的建议仍然 - 这只是一个请求。一个完整的页面加载可能有数百个。对吗？！再有一项要求几乎不能保证挥舞手臂和全大写的免责声明。请求不是坏习惯。 -1 答案——LESS 和 SASS 货物崇拜。好吧，这只是多了一个请求......但是你可以将更多的 CSS 导入到一个请求中，然后并行下载它们。【参考方案12】：

是的。

@import "your.css";

规则记录在here。

【讨论】：

【参考方案13】：

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

【讨论】：

没有缓存 CSS 文件吗？所以它只会请求一次文件？担心似乎微不足道。如果你没有将你的 css 压缩到一个文件，那么你是正确的，但是一旦它是那么你只是调用一个 css 文件。当然，如果我错了，请纠正我。【参考方案14】：

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

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

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

唯一需要注意的是旧的网络浏览器不支持它。事实上，这是从旧浏览器隐藏 CSS 样式的 CSS 'hack' 之一。

有关浏览器支持，请参阅this list。

【讨论】：

【参考方案15】：

是的，使用@import

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

【讨论】：

【参考方案16】：

在某些情况下可以使用@import "file.css"，并且大多数现代浏览器都应该支持这一点，旧版浏览器（例如 NN4）会有点发疯。

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

【讨论】：

【参考方案17】：

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

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

【讨论】：

以上是关于是否可以在另一个中包含一个 CSS 文件？的主要内容，如果未能解决你的问题，请参考以下文章

在另一个css中包含一个css类[重复]

我们可以在另一个 css 类中包含常见的 css 类吗？

在另一个中包含一个 C 源文件？

如何在另一个 php.ini 文件中包含一个 php.ini 文件？

如何在另一个 javascript 文件中包含 jquery [重复]

在另一个 html 文件中包含 html [重复]