CSS引入样式的4种方式以及link和@import之间的区别

た入场券 2022-05-13 06:56 179阅读 0赞

CSS引入样式的方式目前有四种：

1.  直接在[div][]中使用css样式制作[div+css][div]网页；
2.  在style标签中书写css样式；
3.  使用@import引用外部CSS文件；
4.  **使用[link][]引用外部CSS文件，推荐此方法**。

**▍内联方式：**直接在div中使用css样式

结构与样式混合在一起，不易于代码维护，不建议使用。

**▍嵌入方式：**在style标签中书写css样式

**▍链接方式：**使用@import引入外部css文件

**▍导入方式：**使用link引入外部css文件

同样是引入外部css文件，使用link与使用@import又有怎样的区别呢？

> 1、link属于HTML标签，而@import完全是CSS提供的一种方式。link标签除了可以加载CSS外，还可以做很多其它的事情，比如定义RSS，定义rel连接属性等，@import就只能加载CSS了。
> 
> 2、加载顺序的差别。当一个页面被加载的时候，link引用的CSS会同时被加载，而@import引用的CSS会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时开始会没有样式，网速慢的时候页面会闪烁。
> 
> 3、兼容性的差别。由于@import是CSS2.1提出的所以老的浏览器不支持，@import只有在IE5以上的才能识别，而link标签无此问题。
> 
> 4、当使用javascript控制dom去改变样式的时候，只能使用link标签，因为@import不是dom可以控制的。

[div]: http://www.divcss5.com/
[link]: http://www.divcss5.com/html/h64.shtml