css的导入有三种方式：
- 行内样式：通过hmtl元素的style属性
<div style="width: 200px;"></div>
- 内部样式表
在head元素中添加style元素
<head>
<style type="text/css">
div{
width: 300px;
}
</style>
</head>
- 外部样式表
- 通过link元素引入css外部样式表
<link type="text/css" rel="styleSheet" href="CSS文件路径" />- 通过@import导入
<style type="text/css"> @import url("css/style.css"); </style>
其实在css的外部文件中同样还可以使用@import导入其他样式表，同样是外部样式表，link和@import有啥区别呢？
- 页面载入时加载时机不同
页面是自上而下进行加载，使用link的方式，页面在加载的同时，link导入的样式表同时被加载，而@import引入的样式表需要在页面被加载完成之后才会加载 - 兼容性
link输入xhtml的范畴，没有兼容性问题，而@import时css2.1提出的，所以低版本浏览器不兼容，ie5+ - javascript控制
link支持dom控制修改样式，而@import不支持 - 加载内容不同
link不仅仅可以加载css文件，还可以定义RSS等其他事务，而@import是css的概念，只能加载css
拓展：@import书写方式
- @import 'style.css' //Windows IE4/ NS4, Mac OS X IE5, Macintosh IE4/IE5/NS4不识别
- @import "style.css" //Windows IE4/ NS4, Macintosh IE4/NS4不识别
- @import url(style.css) //Windows NS4, Macintosh NS4不识别
- @import url('style.css') //Windows NS4, Mac OS X IE5, Macintosh IE4/IE5/NS4不识别
- @import url("style.css") //Windows NS4, Macintosh NS4不识别
综上：
推荐使用link加载css外部文件，使用@import的方式推荐@import url(style.css) 和@import url("style.css")是最优的选择，兼容的浏览器最多
网友评论