CSS中的@import 与 <link href="style.css" rel="stylesheet" >& @import 'style.css'

[niaogege]

CSS引入文件

MDN@import

1. HTML中使用link标签
<link rel="stylesheet" href="style.css" />
2.CSS中@import
@import "style.css";

@import 规则

The @import CSS at-rule allows to import style rules from other style sheets. These rules must precede all other types of rules, except @charset rules; as it is not a nested statement, it cannot be used inside conditional group at-rules. @import CSS@规则，用于从其他样式表导入样式规则。这些规则必须先于所有其他类型的规则，@charset 规则除外; 因为它不是一个嵌套语句，@import不能在条件组的规则中使用。

[niaogege]

媒体查询(media queries)

html中定义的方式

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

@import定义的方式

@import url("fineprint.css") print;
@import url("bluish.css") projection, tv;
@import 'custom.css';
@import url("chrome://communicator/skin/");
@import "common.css" screen, projection;
@import url('landscape.css') screen and (orientation:landscape);

[niaogege]

建议采用__标签，让多个css可以并行下载：

<link rel="stylesheet" href="base.css">   
<link rel="stylesheet" href="a.css">   

但是，另外一种情况下我们是可以使用import的，比如使用预编译的时候，因为最终还是会编译生成一份CSS. @import 两个文件的加载是串行的，消耗时间的性能不好。 link因为是html元素，可以通过js DOM动态的添加样式，但是@import却不可以