我原本想在我的HTML文档中包含一个.css,它加载多个其他.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">
<head>
<title>The Recipe Site</title>
<link rel='stylesheet' href='/css/main.css'>
<link rel='stylesheet' href='/css/site_header.css'>
<!-- Let google host jQuery for us, maybeb replace with their api -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script type="text/javascript" src="/js/main.js"></script>
</head>
<body>
<div id="site_container">
<div id="site_header"><?php include_once($r->base_dir . "inc/site_header.inc.php"); ?><!-- Include File, Update on ajax request. --></div>
<div id="site_content">
Some main content.
</div>
<div id="site_footer"><?php include_once($r->base_dir . "inc/site_footer.inc.php"); ?><!-- Include File, Update on ajax request. --></div>
</div>
</body>
</html>
文件:/css/main.css
/* Reset Default Padding & Margin */
* {
margin: 0;
padding: 0;
border: 0;
}
/* Set Our Float Classes */
.clear { clear: both; }
.right { float: right; }
.left { float: left; }
/* Setup the main body/site container */
body {
background: url(/images/wallpaper.png) repeat;
color: #000000;
text-align: center;
font: 62.5%/1.5 "Lucida Grande", "Lucida Sans", Tahoma, Verdana, sans-serif;
}
#site_container {
background-color: #FFFFFF;
height: 100%;
margin-left: auto;
margin-right: auto;
text-align: left;
width: 100%;
}
/* Some style sheet includes */
/* @import "/css/site_header.css"; */
/* Default Font Sizes */
h1 { font-size: 2.2em; }
h2 { font-size: 2.0em; }
h3 { font-size: 1.8em; }
h4 { font-size: 1.6em; }
h5 { font-size: 1.4em; }
p { font-size: 1.2em; }
/* Default Form Layout */
input.text {
padding: 3px;
border: 1px solid #999999;
}
/* Default Table Reset */
table {
border-spacing: 0;
border-collapse: collapse;
}
td{
text-align: left;
font-weight: normal;
}
/* Cause not all browsers know what HTML5 is... */
header { display:block;}
footer { display:block;}
现在文件:/css/site_header.css:
#site_header {
background-color: #c0c0c0;
height: 100px;
position: absolute;
top: 100px;
width: 100%;
}
问题:
当我使用上面的代码时,site_header div没有任何格式/背景.当我从site_header.css的HTML文档中删除链接行,而是使用@import url("/ css/site_header.css"); 在我的main.css文件中,相同的结果 - 没有为同一个div渲染任何内容.
现在当我从site_header.css获取CSS标记并将其添加到main.css时,div被渲染得很好......
所以我想知道是否有多个css文件在某种程度上不起作用...或者可能在我之前的css结束时有css标记是某种程度上相互矛盾,但我找不到它为什么会这样做的原因.
KP.*_*KP. 14
该@import指令必须首先出现在CSS中.只要浏览器触发了一个样式,就会忽略所有其他导入行.
引用WC3:
"任何@import规则必须先于所有其他规则(@charset规则除外,如果存在)"
见http://www.w3.org/TR/CSS2/cascade.html#at-import
需要考虑的一件事是,每个@import仍会导致HTTP请求,因此它不比使用多个链接标记更有效.事实上,它可能效率较低,因为导入可能是顺序请求而不是并行请求.看到这篇文章.IMO它还增加了复杂性,因为你最终在两个地方管理CSS引用(标记的头标记加上一个或多个CSS文件)与一个简单的链接标记列表.
我还建议您在网站投入生产时将CSS文件组合在哪里,因为它会减少HTTP开销.
我可以这么说,但是请将与CSS文件相关的图像放在CSS文件夹本身中,而不是放在/ images /中.
CSS的重点是风格和内容的分离,只有内容图像应该放在/ images /中.CSS调用的任何图像都应放在同一目录中并无路径调用,例如:
body {
background: url(wallpaper.png) repeat;
}
这样在以后的日子里,如果要改变风格,或者制作多个样式,只需要更新一个链接并移动一个文件夹(/ css /),而不是在整个文件系统中分散一堆图像.另外,使用文件的绝对路径(例如/images/wallpaper.png)总是一个坏主意.