link与@import

HTML导入外部样式表有link标签和@import两种方式，它们有很多方面的不同

link：

• link标签必须放在head中，不能放在其他元素内部；

• link链接的样式表中不能有其他标记语言，只能有样式规则，样式表内部不能嵌套样式表；

• link标签属于html标签，没有兼容问题；

• link可以定义候选样式表，将rel属性设置为alertnate style，由用户自行选择样式，使用title属性生成一个候选样式列表(候选样式表名)，如果没有指定title属性，那么它将作为永久样式表，例：

<link rel="alertnate stylesheet" type="text/css" href="XXX.css" title="hello" />

• link标签有一个meta属性，用于指定媒体类型,常见的值有：all、screen、print、projection，例；

<link rel="stylesheet" type="text/css" href="XXX.css" media="all" />

• 如果浏览器加载多个link样式表，那么将会合并规则；

• link引用CSS时，在加载CSS时可以同时加载页面；

• link支持JavaScript控制DOM改变样式

@import：

• @import必须放在style容器中：

<style type="text/css">    @import url(XXX.css);</style>

• 如果有一个外部样式表，它可以引用另一个外部样式表，只是要放在样式表最开始的地方（其他CSS之前）：

<style type="text/css">    @import url(XXX.css);    p { font-size:12px;}</style>

• @import用于导入外部样式，不属于html专有；

• @import不能生成候选样式表；

• @import也可以指定样式应用的媒体类型；

<style type="text/css">    @import url(XXX.css) all;</style>

• 每个@import指令导入的样式都会加载并使用；

• @import引用CSS时，要在页面加载完毕时才能加载CSS，所以可能会导致页面闪烁；

• @import不支持JavaScript控制DOM改变样式