ChatGPT解决这个技术问题 Extra ChatGPT

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

css

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

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

M
MultiplyByZer0

是的:

@import url("base.css");

笔记:

@import 规则必须在所有其他规则之前(@charset 除外)。

额外的@import 语句需要额外的服务器请求。作为替代方案,将所有 CSS 连接到一个文件中以避免多个 HTTP 请求。例如,将 base.css 和 special.css 的内容复制到 base-special.css 中,仅引用 base-special.css。


v
viam0Zah

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

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

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

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

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


e
eldarerathis

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


CSS文件没有缓存吗?所以它只会请求一次文件?担心似乎微不足道。
如果您没有将您的 css 缩小到一个文件,那么是的,您是正确的,但是一旦是,那么您只是在调用一个 css 文件。当然,如果我错了,请纠正我。
S
Sören Kuklau

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

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

A
Arsen7

是的。

@import "your.css";

该规则记录在 here 中。


s
seanb

在某些情况下,可以使用@import "file.css",大多数现代浏览器都应该支持这一点,像 NN4 这样的旧浏览器会有点发疯。

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


D
DarenW

是的,使用@import

很容易在 Google 上搜索到的详细信息,http://webdesign.about.com/od/beginningcss/f/css_import_link.htm 上的一个很好的信息


v
vidhi

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

@import url("mycssfile.css");

或者

@import "mycssfile.css";

F
Floyd

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

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


C
Community

“@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 指出可以从导入中覆盖类(类 projectionscreen?),但这通常不是一件好事。 ;)
p
peterC_
@import url('style.css');

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


P
PythonProgrammi

使用 altervista 和 wordpress 导入引导程序

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

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

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


D
Dinesh Vaitage

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

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

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

N
NARGIS PARWEEN

是的,您可以轻松地将一个 css 导入另一个(网站中的任何位置)您必须使用如下:

@import url("url_path");

k
kernal_lora

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

C
Colin Keenan

无论出于何种原因,@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 文件。
W
WillSeitz

我偶然发现了这一点,我只想说请不要在 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 文件要好得多......
仍然 - 这只是另一个要求。一个完整的页面加载可能有数百个。
正确的?!再有一项要求几乎不能保证挥舞手臂和全大写的免责声明。请求不是坏习惯。 -1 答案——LESS 和 SASS 货物崇拜。
好吧,这只是一个请求,但您可以将更多 CSS 导入一个请求,然后并行下载它们。