版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
1.内联样式：
直接在html标签里书写
<div style="width: 100px;height: 100px;background: red;"></div>
优点：加载快（不用去引用其它文件的样式）
缺点：是代码冗余，维护困难，且无法复用
2.嵌入样式
在HTML头部的style里书写css样式。
<head>
<style>
.content {
background: red;
}
</style>
</head>
优点：本页面的样式都写在同一个页面内，维护时查看比较方便
缺点：只对当前页面有效，无法复用
3.链接样式
使用HTML头部的link引入
这是最推荐的一种方式。
优点：css样式都单独写在一个文件内，便于维护，只需一次加载，以后切换页面就无需再加载
4.导入样式
①在style里面引用
<style type="text/css">
@import url(test.css)
</style>
②在css样式前引用
test.css
@import url(test2.css);
.box{
width: 100px;
height: 100px;
background: #ccc;
}
test2.css
.box{
border: red solid 5px;
}
缺点：@import是在CSS2.1提出的，低版本的浏览器不支持。
优点:…貌似没有，现在也没用过，还是link好
@import与link的区别：
区别1：link是XHTML标签，除了加载CSS，还能加载RSS。@import属于CSS范畴，只能加载CSS。
区别2：link载入CSS时，在页面载入时同时加载，@import需要等页面加载完全时才会加载，所以网络差时会出现FOUC
区别3：link是XHTML标签，无兼容性问题，@import是CSS2.1引入的，低版本浏览器不兼容
区别4：link支持使用JavaScript去控制DOM样式，而@import不支持
参考：
https://blog.csdn.net/u013778905/article/details/52885924
https://www.cnblogs.com/yang5201314/p/5738447.html