CSS引入方式及优先级、区别

在网页中CSS主要负责HTML文档的样式显示，目前主流的CSS引入方式有四种：行内式、内嵌式、导入式、连接式。

1、行内式

行内式也叫内联式，是指在标记的style属性中设定CSS样式，通俗的来讲就是
在HTML里的标签中，直接添加style属性。
例如：

<div style="width: 100px; height: 100px; background-color: red;"></div>

缺点：行内式是直接写在HTML文档中，如果要改某个CSS样式，开发者很难找到其对应的CSS属性，所以不推荐使用

2、内嵌式

内嵌式写在网页源文件的头部，位于head标签内部，用style标签来书写，使
用type属性来指定CSS代码的文档类型。
例如：

1.	<style type="text/css">  
2.	    div{width: 100px; height: 100px; background-color: red;}  
3.	</style>

优点：相对于行内式来说，代码相对减少，不易造成代码混乱，减少页面负担
缺点：其代码只能在该页面中使用，开发人员不易查找，后期书写代码工作量大

3、导入式

与链接式都是从外部导入样式，主要通过@import方式导入外部CSS样式，一般使用url方式导入
例如：

1.	<style type="text/css">  
2.	    @import url("CSS样式表.css");  
3.	    @import "CSS样式表.css"  
4.	</style>

  优点：通过外部导入样式表的方式，减轻了页面代码混乱，让开发人员修改样式
时方便查找
  缺点：有兼容性

4、链接式

用一个HTML标签来导入外部的样式表，在HTML里的head标签中使用，这是网
络上网站应用最多的方式，也是最实用的方式。

例如：

1.	<head>  
2.	    <meta charset="utf-8">  
3.	    <title></title>  
4.	    <link rel="stylesheet" type="text/css" href="CSS样式表.css"/>  
5.	</head>

  优点：使CSS文件与HTNL文档完全分离，减轻网页的负担，开发人员在修改的
时候方便查找，增加CSS的可维护性。
  注意：必须要有<link></link>标签

导入时与链接式的区别

1、 link是HTML标签，除了加载CSS外，还可以加载其他；而@import是CSS
方式，只能导入CSS
2、加载方式：
link是HTML与CSS同时加载，显示出来时自带样式，
@import是先加载HTML，在加载css，当网速不够的时候，网页会出现初始状态，会产生差别。
3、兼容问题：
link是HTML标签，无兼容问题
@import是CSS2.1提出的，在低版本浏览器无法兼容
4、@import可以在其他的CSS文件中再次引入其他的样式表，而link不支持
5、当使用JavaScript控制DOM去改变样式的时候，只能使用link方式，@import则不行