CSS 与 HTML 关联方式共有三种：内联式、嵌入式、外联式，其中还包括了一种特殊的 @import 指令。
内联式
将样式代码通过 style 属性写在 HTML 标签中。多条 CSS 样式之间使用;隔开。不推荐使用。
<p style="color:red;font-size:12px"></p>
嵌入式（内部样式表）
将样式代码写在<style></style>标签中。通常情况下<style></style>标签写在<head></head>中，其涉及了页面渲染性能问题。少量非重复性样式内容可采用该方式书写。
<head>
<style>
span {
color: red;
font-size:12px；
}
</style>
</head>
外联式（外部样式表）
将样式代码写在单独的 CSS 文件中，通过 <link> 标签引用。通常情况下<link>标签也是写在<head></head>中。推荐使用。
<head>
<link href="demo.css" rel="stylesheet" />
</head>
工程模块化
在 JS 文件中通过 import 引用
import './taskCreate.css';
@import
@import 指令可用于内部样式表和外部样式表，且必须放在其他 CSS 规则之前（可放在 @charset 规则之后），否则不起作用。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
@charset "utf-8";
@import './demo.css';
.test {
color: red;
}
/* 放在此处无效 */
/* @import './demo.css'; */
</style>
</head>
<body>
<div class="test">
测试 @import
</div>
</body>
</html>
总结
内联式、嵌入式、外联式都是在页面加载时，同时加载的。HTML 页面从头开始解析，当遇到 CSS 样式时就会开始加载并解析样式，此过程不会阻塞 HTML 的解析。
当一个页面中通过 <link> 引入多个外部样式表时，浏览器会并行下载多个 CSS 文件，以提高性能。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./demo.css">
<link rel="stylesheet" href="./demo1.css">
</head>
<body>
</body>
</html>
而 @import 指令引入的样式，是在开始解析 CSS 后，遇到 @import 指令时，才开始加载的，也就是串行加载，会导致页面渲染时间变长。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./demo.css">
</head>
<body>
</body>
</html>
demo.css 内容：
@import './demo1.css';
.test {
background: green;
}
demo1.css 内容：
.test {
background: red;
}
除此之外，<link> 与 @import 指令的其他区别：
<link>是 HTML 标签，@import是 CSS 指令；<link>可以通过 DOM 操作，如动态加载样式；@import是 CSS2.1 提供的语法，不兼容 IE5 及以下浏览器；- 样式的优先级问题：权重相同的情况下，
@import引入的样式优先级低于书写在@import指令后的样式（CSS 层叠特性）。我个人理解产生这种问题的原因是，@import相当于一个占位符，通过它引入的样式最终会填充到@import书写的位置，而与@import引入样式的加载时间无关。由于浏览器的流式渲染，使用@import可能会触发重排、重绘等问题。
请避免使用 @import
