是否可以将一个CSS文件包含在另一个文件中?
是的。
@import url("base.css");
注意。
是的,可以导入CSS文件到另一个CSS文件中。 可以将CSS文件导入到另一个CSS文件中。
它必须是使用[@import rule][1]的样式表中的第一条规则。
@import "mystyle.css";
@import url("mystyle.css");
唯一需要注意的是,旧的网页浏览器将不支持。 事实上,这也是CSS 'hack'之一。 来隐藏旧浏览器的CSS样式。
参考[本列表][2]的浏览器支持。
[1]: http://www.w3.org/TR/CSS21/cascade.html#at-import [2]: http://www.westciv.com/style_master/academy/browser_support/basic_concepts.html
"@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][1]但是。
<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>
不管什么原因,@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。 这和在myap-print.css中包含myap-screen.css的效果是一样的。
歌唱CSS @import规则 这里
@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中使用@IMPORT!!! 导入语句发送到客户端,客户端再做一次请求。 如果你想在不同的文件之间划分你的CSS,请使用Less。 在Less中,导入语句发生在服务器上,输出会被缓存,不会因为强迫客户端进行另一个连接而造成性能惩罚。 Sass也是一个选项,另一个我没有探讨过。 坦白说,如果你没有使用Less或Sass,那么你应该开始使用。 http://willseitz-code.blogspot.com/2013/01/using-less-to-manage-css-files.html