外部引用CSS中 link与@import的区别

CSS中link与@import的使用：经典与现代的选择

在网页开发中，如何引入CSS样式表是一个重要的环节。对于使用import还是link，开发者们一直存在争议。让我们从经典论坛和各大网站的实际应用情况来这个问题。

让我们了解一下两大主流引入方式的基本格式。淘宝网页中大多采用@import的方式，其代码如下：

```css

```

而许多其他网站，如jb51，则选择使用link标签：

```html

```

这两种方式都有其优点和缺点。从本质上来说，它们都是为了加载外部的CSS文件。但它们之间还是存在一些细微的差别。

差别一：标签属性的差别。link是XHTML标签，除了加载CSS，还可以定义RSS、定义rel连接属性等。而@import是CSS提供的一种方式，只能用于加载CSS。

差别二：加载顺序的差别。当页面被加载时，link引用的CSS会立即加载，而@import引用的CSS则会等到页面全部下载完毕后再加载。在使用@import的页面中，页面初始可能会出现无样式的情况，特别是在网速较慢的情况下。

差别三：浏览器兼容性的差别。由于@import是CSS2.1提出的，所以在一些老版本的浏览器中可能不被支持。而link标签则没有这个问题。

差别四：DOM控制样式的差异。当使用JavaScript控制DOM去改变样式时，只能使用link标签，因为@import不是DOM可以控制的。

综合来看，虽然@import和link都能实现外部CSS的引入，但在实际使用中，link标签似乎更具优势。它的兼容性更好，加载速度更快，而且除了加载CSS外，还能执行其他功能。具体选择哪种方式还需要根据项目的实际需求来决定。在进行网页开发时，我们应灵活运用这两种方式，以最大程度地提高网页的性能和用户体验。