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

Gai*_*nde 767 css

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

Kev*_*ead 1063

是:

@import url("base.css");
Run Code Online (Sandbox Code Playgroud)

注意:

  • @import规则必须先于所有其他规则(除@charset规则); 和
  • 其他@import声明需要其他服务器请求.

将CSS聚合到一个文件中以避免多个HTTP请求.也就是说,复制内容base.cssspecial.css进入base-special.css并仅参考base-special.css).

2008年,并非所有浏览器都受支持@import(请参阅浏览器兼容性).


Ron*_*iew 142

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

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

@import "mystyle.css";
@import url("mystyle.css");
Run Code Online (Sandbox Code Playgroud)

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

有关浏览器支持,请参阅此列表.


Gen*_*ene 42

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

  • 是不是缓存了CSS文件?所以它只会要求一次文件?担心似乎微不足道. (2认同)

Sör*_*lau 27

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

@import url('/css/common.css');
@import url('/css/colors.css');
Run Code Online (Sandbox Code Playgroud)


Gor*_*son 16

是.

@import "your.css";
Run Code Online (Sandbox Code Playgroud)

这里记录规则.


sea*_*anb 11

在某些情况下,可以使用@import"file.css",并且大多数现代浏览器都应该支持这一点,NN4等旧版浏览器会稍微坚固一些.

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


Dar*_*enW 8

是的,使用@import

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


Flo*_*oyd 6

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

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


vid*_*dhi 6

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

@import url("mycssfile.css");
Run Code Online (Sandbox Code Playgroud)

要么

@import "mycssfile.css";
Run Code Online (Sandbox Code Playgroud)


Che*_*ana 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>
Run Code Online (Sandbox Code Playgroud)

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);
Run Code Online (Sandbox Code Playgroud)

要插入样式元素,请使用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>
Run Code Online (Sandbox Code Playgroud)