是否可以在另一个中包含一个CSS文件?
答案 0 :(得分:1022)
是:
@import url("base.css");
注意:
@import
规则必须precede所有其他规则(@charset
规则除外);和@import
语句需要其他服务器请求。将CSS聚合到一个文件中以避免多个HTTP请求。也就是说,将base.css
和special.css
的内容复制到base-special.css
并仅引用base-special.css
。)
2008年,并非所有浏览器都支持@import
(请参阅Browser Compatibility)。
答案 1 :(得分:136)
是。可以将CSS文件导入另一个CSS文件。
它必须是使用@import rule的样式表中的第一条规则。
@import "mystyle.css";
@import url("mystyle.css");
唯一需要注意的是,较旧的网络浏览器不支持它。事实上,这是从旧浏览器中隐藏CSS样式的CSS'hack'之一。
有关浏览器支持,请参阅this list。
答案 2 :(得分:40)
@import url("base.css");
工作正常但请记住,每个@import
语句都是对服务器的新请求。这对您来说可能不是问题,但是当需要最佳性能时,您应该避免使用@import
。
答案 3 :(得分:25)
CSS @import
规则就是这样做的。如,
@import url('/css/common.css');
@import url('/css/colors.css');
答案 4 :(得分:16)
答案 5 :(得分:11)
在某些情况下可以使用@import“file.css”,并且大多数现代浏览器应该支持这一点,NN4等旧版浏览器会略显疯狂。
注意:import语句必须位于文件中的所有其他声明之前,并在生产中使用之前在所有目标浏览器上对其进行测试。
答案 6 :(得分:9)
是的,请使用@import
在http://webdesign.about.com/od/beginningcss/f/css_import_link.htm
上轻松搜索的详细信息答案 7 :(得分:7)
是的,可以使用@import并提供css文件的路径 e.g。
@import url("mycssfile.css");
或
@import "mycssfile.css";
答案 8 :(得分:7)
@import("/path-to-your-styles.css");
这是使用css在css样式表中包含css样式表的最佳方法。
答案 9 :(得分:5)
" @ 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文件&#34; main.css&#34;包含以下语法:
@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>
答案 10 :(得分:3)
是您可以轻松地将一个CSS导入另一个(网站中的任何位置) 你必须使用:
@import url("url_path");
答案 11 :(得分:3)
O(1)
与最佳答案相反,建议不要在使用HTTP / 2.0时将所有CSS文件聚合到一个块中
答案 12 :(得分:2)
我使用它在altervista中使用wordpress
导入bootstrap.css@import url("https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css");
它工作正常,因为它会删除html链接rel代码,如果我把它放入页面
答案 13 :(得分: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”有两个样式表:myap-print.css和myap-screen.css。这与在myap-print.css中包含myap-screen.css的效果相同。
答案 14 :(得分:1)
唱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;
答案 15 :(得分:1)
我创建了main.css文件,并在其中包含了所有css文件。
我们只能包含一个main.css文件
l = filter(str.strip, l)
答案 16 :(得分:-2)
我偶然发现了这个,我只是想说请不要在CSS中使用@IMPORT !!!! import语句被发送到客户端,客户端执行另一个请求。如果要在各种文件之间划分CSS,请使用Less。在Less中,import语句在服务器上发生,并且输出被缓存,并且不会通过强制客户端建立另一个连接而造成性能损失。 Sass也是我探索过的另一种选择。坦率地说,如果你不使用Less或Sass那么你应该开始。 http://willseitz-code.blogspot.com/2013/01/using-less-to-manage-css-files.html