1. 概述
1.1 说明
在项目开发中，我们经常使用css样式使页面丰富多彩，编写过程中，CSS有四种引入方式。
2. CSS引入方式
2.1 引入方式一：内联样式
内联样式(行内样式)：直接在 HTML 标签中的 style 属性中添加CSS
<div style="width:200px;height:200px;background:red;"></div>
内联样式只能改变当前标签的样式，如果想要多个<div>拥有相同样式，则需要重复的对多个<div>添加相同的样式，如果要修改一种样式，又要进行批量的去修改style中的代码。
缺点：内联样式引入CSS代码会导致HTML代码变得冗长，页面维护成本过高。
2.2 引入方式二：嵌入样式
嵌入样式：在HTML头部中的<style>标签下书写CSS代码
<head>
<style>
.div-content{
width: 200px;
height: 200px;
background: red;
}
</style>
</head>
嵌入样式的CSS只对当前的网页有效。因为CSS代码是在HTML文件中，所以会使得代码比较集中，可以很清晰的查看HTML结构和CSS样式，通常会在模板网页中使用。
缺点：多个页面中需要引入相同的CSS代码时，嵌入样式会导致代码冗余，不利于维护。
2.3 引入方式三：链接样式
链接样式：使用HTML头部的标签引入所需的外部CSS文件。
<head>
<link ref="stylesheet" type="text/css" href="style.css">
</head>
链接样式是最推荐引入CSS的方式。使用这种方式，所有的CSS代码只存在于单独的CSS文件中，所以具有良好的可维护性。并且所有的CSS代码只存在于CSS文件中，CSS文件会在第一次加载时引入，以后切换页面时只需加载HTML文件即可。
ref：定义当前文档与目标文档之间的关系
2.4 引入方式四：导入样式
导入样式：使用CSS规则引入外部CSS文件。并且@import必须得在<style></style>中使用。
<style> @import url(style.css); </style>
导入样式类似链接样式
注意：@import url(xxx.css) 有最大次数的限制，经测试：IE6的最大次数是31次，第32个import及以后的都不生效；
3. link 和 @import 的区别
- 加载内容
- link是XHTML标签，除了加载CSS外，还可以加载网站网页图标(网页标签图标)等多种文件
<link rel="icon" href="https://file.iviewui.com/file/favicon.ico">
- @import属于CSS范畴，只能加载CSS
- link是XHTML标签，除了加载CSS外，还可以加载网站网页图标(网页标签图标)等多种文件
- 加载顺序
- link引入CSS时，在页面载入时同时载入 --- 浏览器一边下载HTML网页，一边开始解析；解析过程中，发现link标签，浏览器继续往下解析HTML网页，同时并行下载link标签中的css样式。
- @import需要页面完全载入以后才加载 --- 在网速慢的情况下，会出现一开始没有css样式，闪烁一下出现样式后的页面。
- 兼容问题
- link是XHTML标签，无兼容问题
- @import是在CSS2.1提出的，低版本的浏览器不支持(IE5以下不兼容)
- 操作DOM
- link支持使用JavaScript操作DOM动态引入样式表改变样式
- @import不支持，因为@import是css语法故无法动态修改