css link标签导入css和使用import导入css的区别 - Kaiqisan

大家好，都吃了吗？我是Kaiqisan,是一个不善言辞的羞射男孩,今天的问题由一道牛逼网（牛客网）的一道题引入。请看题.

下列关于使用link和@import，说法不正确的是（）

• 页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载
  

• link、@import均支持使用js控制DOM去改变样式
  

• @import就只能加载CSS ，link标签还可以定义RSS等
  

• import是CSS2.1 提出的，只在IE5以上才能被识别，而link是XHTML标签，无兼容问题
  

正确答案: B 你的答案: A (错误)

错误解析：link标签引入的 CSS 被同时加载；@import引入的 CSS 将在页面加载完毕后被加载

下面讲讲这两个东西之间的一些用途和使用方法把！

首先是<link>标签

它一般来引入外部资源，最常用的使用方法就是拿来引入css样式文件。它有以下属性值

• href: 目标资源位置
• hreflang: 连接文本的语言
• media: 规定被链接文档将被显示在什么设备上。这一般在使用css响应式设计的时候会用到这个属性
• rel: 声明引入文件是拿来干什么的。
• type: 引入文件的类型

link标签特点

• 可以在dom中找到并可以操纵其属性。
• 在页面加载前载入
• 可以定义导入rss文件
• 虽说是会无须地导入文件但是其css渲染样式优先度还是根据文件的引入先后，如果针对一个标签的样式在两个文件里面，且优先度还都是一样的，这就会根据导入顺序来决定最终样式，其原则就是后面的样式覆盖前面的样式。

然后是@import,

使用方法

@import "font/iconfont.css";
@import url("font/iconfont.css");

特点

• 在读取完文件之后加载
• 它是css2.1之后的版本，只有IE5+才可以识别。
• IE6最多可以引入31次

总结

html的细节知识，熟记，面试必备。