@import调用css和link href调用有什么区别？
2010-01-26
@import调用css和link href调用有什么区别？
文章分类:Web前端
大家去分析一些大站的css代码时，都会发现调用css有以下两种方法：
方法一：
<style type="text/css">
<!--
@import url("css/main.css");
@import url("css/font.css");
@import url("css/layout.css");
-->
</style>
方法二：
<link href="css/tianyi.css" rel="stylesheet" type="text/css" />
那么这两各方法有什么区别和优缺点呢？
本质上，这两种方式都是为了加载CSS文件，但还是存在着细微的差别。
差别1：老祖宗的差别。link属于XHTML标签，而@import完全是CSS提供的一种方式。
link标签除了可以加载CSS外，还可以做很多其它的事情，比如定义RSS，定义rel连接属性等，@import就只能加载CSS了。
差别2：加载顺序的差别。当一个页面被加载的时候（就是被浏览者浏览的时候），link引用的CSS会同时被加载，而@import引用的CSS会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时开始会没有样式（就是闪烁），网速慢的时候还挺明显（梦之都加载CSS的方式就是使用@import，我一边下载一边浏览梦之都网页时，就会出现上述问题）。
差别3：兼容性的差别。由于@import是CSS2.1提出的所以老的浏览器不支持，@import只有在IE5以上的才能识别，而link标签无此问题。
差别4：使用dom控制样式时的差别。当使用javascript控制dom去改变样式的时候，只能使用link标签，因为@import不是dom可以控制的。
/*
大致就这几种差别了，其它的都一样，从上面的分析来看，还是使用link标签比较好。
标准网页制作加载CSS文件时，还应该选定要加载的媒体（media），比如screen，print，或者全部all等。
*/
差别5：@import可以在css中再次引入其他样式表，比如可以创建一个主样式表，在主样式表中再引入其他的样式表，如：
main.css
———————-
@import “sub1.css”;
@import “sub2.css”;
sub1.css
———————-
p {color:red;}
sub2.css
———————-
.myclass {color:blue}
这样更利于修改和扩展．
提示：这样做有一个缺点，会对网站服务器产生过多的HTTP请求，以前是一个文件，而现在却是两个或更多文件了，服务器的压力增大，浏览量大的网站还是谨�
相关文档：
垂直居中对表格来说是小菜一碟，只需指定单元格为vertical-align: middle即可，
但这在css布局中不管用。假设你将一个导航菜单的高度设为2em，
然后在css中指定垂直对齐的规则，文字还是会被排到盒的顶部，根本没有什么区别。
要解决这一问题，只需将盒的行高设为与盒的高度相同即可，
以这个例子来说，盒高2em,那么只� ......
1、网页居中显示：
需要设置两个地方，一个是body，一个是外边框div。
CSS：
body{
margin:0;
padding:0;
text-align:center;
}
#main{ /*最外层DIV*/
width:760px;
margin:0 auto;
padding:0
}
2、文字垂直� ......
CSS 概述
CSS 指层叠样式表 (Cascading Style Sheets)
样式定义如何显示 HTML 元素
样式通常存储在样式表中
把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
外部样式表可以极大提高工作效率
外部样式表通常存储在 CSS 文件中
多个样式定义可层叠为一
样式解决了一个普遍的问题
HTML 标签原本� ......
平 时拿CSS布局都是一些内容比较多的网站,前两天用CSS+DIV弄了个内容少的页面,发现了一个小问题,可能大家都会遇到,那就是网站FOOTER的定 位,如果内容比较少的话,页面的FOOTER就会随着内容的减少跑到上面去,不是乖乖的在下面呆着,害得我研究了半天找高人终于给搞定了,也算一个小小的 技巧给大家分享
首先我们要在外层设定一 ......
function $import(path,type,title,idname){
var s,i;
if(type=="js"){
&nb ......
