页面引入CSS的四种方式及区别
一个前端页面（原生）由HTML+CSS+JS+Image组成，页面效果由CSS负责，好的页面会吸引用户访问、停留。那么页面是如何靠css来达到效果的呢？下面说说页面中css使用的几种方式。
一、引入方式
1、直接在div中使用css样式制作div+css网页
2、html中使用style自带式
3、使用@import引用外部CSS文件
4、使用link引用外部CSS文件（推荐此方法）
下面依次说下四种方式；
二、讲解
1、直接在div中使用css样式制作div+css网页
示例代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <!--header strat--> <div style="width: 1024px;height: 150px;margin:0 auto;"></div> <!--header end--> <!--main start--> <div style="width: 1024px;height: 550px;margin:0 auto;"></div> <!--main end--> <!--footer start--> <div style="width: 1024px;height: 100px;margin:0 auto;"></div> <!--footer end--> </body> </html>
优点：加载速度快
缺点：不易于维护，复用性差，不利于优化
2、html中使用style自带式
示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.commonWidth{width: 1024px;margin:0 auto;}
.header{height: 150px;}
.main{height: 150px;}
.footer{height: 150px;}
</style>
</head>
<body>
<!--header strat-->
<div class="header commonWidth"></div>
<!--header end-->
<!--main start-->
<div class="main commonWidth"></div>
<!--main end-->
<!--footer start-->
<div class="footer commonWidth"></div>
<!--footer end-->
</body>
</html>优点：加载速度快
缺点：不易于维护，复用性差，不利于优化
3、使用@import引用外部CSS文件
示例代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> @import url(style.css); </style> </head> <body> <!--header strat--> <div class="header commonWidth"></div> <!--header end--> <!--main start--> <div class="main commonWidth"></div> <!--main end--> <!--footer start--> <div class="footer commonWidth"></div> <!--footer end--> </body> </html>
优点：无
缺点：会等到页面全部被下载完再被加载、只有在IE5以上的才能识别、DOM不可控制、只能引入31次css文件
4、使用link引用外部CSS文件
示例代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="style.css"> </head> <body> <!--header strat--> <div class="header commonWidth"></div> <!--header end--> <!--main start--> <div class="main commonWidth"></div> <!--main end--> <!--footer start--> <div class="footer commonWidth"></div> <!--footer end--> </body> </html>
优点：易于维护、可复用、利于蜘蛛抓取（源代码量少，抓取速度快）、分线程加载（页面打开速度快）
缺点：暂无
三、综合对比
建议使用link引入方式，加载css样式文件，link方式是HTML方式，而import方式是css方式，有着本质上的区别。在优缺对比方面，以上四种方式而言，link有着非常明显的优势。
