是否可以将一个CSS文件包含在另一个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标记调用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>

无论出于什么原因,@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的效果相同。

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

使用altervista和wordpress导入引导

我用这个在altervista中用wordpress导入bootstrap.css

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

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

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

@import url("mycssfile.css");

or

@import "mycssfile.css";