前言：
当前同学们对“css 引入”可能比较珍视，兄弟们都想要剖析一些“css 引入”的相关内容。那么小编同时在网摘上汇集了一些对于“css 引入””的相关知识，希望看官们能喜欢，兄弟们快快来学习一下吧！一个前端页面（原生）由HTML+CSS+JS+Image组成，页面效果由CSS负责，好的页面会吸引用户访问、停留。那么页面是如何靠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>
优点：加载速度快
缺点：不易于维护，复用性差，不利于优化
CSS网页设计
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有着非常明显的优势。
版权声明：
本站文章均来自互联网搜集，如有侵犯您的权益，请联系我们删除，谢谢。
标签： #css 引入
