是否可以将一个CSS文件包含在另一个CSS中?
Yes:
@import url("base.css");
注:
@import规则必须先于所有其他规则(@charset除外)。额外的@import语句需要额外的服务器请求。作为替代方案,将所有CSS连接到一个文件中,以避免多个HTTP请求。例如,将base.css和special.css的内容复制到base-special.css中,并仅引用base-specific.css。
CSS@import规则就是这样做的。例如。,
@import url('/css/common.css');
@import url('/css/colors.css');
在某些情况下,使用@import“file.css”是可能的,大多数现代浏览器都应该支持这一点,但像NN4这样的旧浏览器会稍微有些疯狂。
注意:import语句必须在文件中的所有其他声明之前,并在生产中使用它之前在所有目标浏览器上测试它。
是,使用@import
详细信息很容易在谷歌上搜索http://webdesign.about.com/od/beginningcss/f/css_import_link.htm
对可以将CSS文件导入另一个CSS文件。
它必须是使用@import规则的样式表中的第一个规则。
@import "mystyle.css";
@import url("mystyle.css");
唯一需要注意的是,较旧的web浏览器将不支持它。事实上,这是从较旧的浏览器隐藏CSS样式的CSS“黑客”之一。
有关浏览器支持,请参阅此列表。
@import url(“base.css”);工作正常,但请记住,每个@import语句都是对服务器的新请求。这对您来说可能不是问题,但当需要最佳性能时,您应该避免@import。
是的,可以使用@import并提供css文件的路径例如
@import url("mycssfile.css");
or
@import "mycssfile.css";
我偶然发现了这一点,我只是想说,请不要在CSS中使用@IMPORT!!!!import语句被发送到客户端,客户端执行另一个请求。如果您想在不同的文件之间划分CSS,请使用Less。在Less中,import语句发生在服务器上,输出被缓存,并且不会通过强制客户端建立另一个连接而造成性能损失。Sass也是一个选项,我没有探索过。坦率地说,如果你没有使用Less或Sass,那么你应该开始。http://willseitz-code.blogspot.com/2013/01/using-less-to-manage-css-files.html
使用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;
“@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>
我已经创建了main.css文件,并在其中包含了所有css文件。
我们只能包含一个main.css文件
@import url('style.css');
@import url('platforms.css');
使用altervista和wordpress导入引导
我用这个在altervista中用wordpress导入bootstrap.css
@import url("https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css");
它工作得很好,因为如果我把html链接rel代码放到页面中,它会删除它
无论出于什么原因,@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”有两个样式表:myap-print.css和myap-screen.css。这与在myap-pprint.css中包含myap-screen.css的效果相同。