html引入外部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网页

示例代码：

 Title

优点：加载速度快

缺点：不易于维护，复用性差，不利于优化

CSS网页设计

2、html中使用style自带式

示例代码：

 Title

优点：加载速度快

缺点：不易于维护，复用性差，不利于优化

3、使用@import引用外部CSS文件

示例代码：

 Title

优点：无

缺点：会等到页面全部被下载完再被加载、只有在IE5以上的才能识别、DOM不可控制、只能引入31次css文件

4、使用link引用外部CSS文件

示例代码：

 Title

优点：易于维护、可复用、利于蜘蛛抓取(源代码量少，抓取速度快)、分线程加载(页面打开速度快)

缺点：暂无

三、综合对比

建议使用link引入方式，加载css样式文件，link方式是HTML方式，而import方式是css方式，有着本质上的区别。在优缺对比方面，以上四种方式而言，link有着非常明显的优势。