一、我们都知道div+css模式，拥有众多的优点：
（1）便于对网页的改版，只需要修改CSS文件
（2）结构和表现的分离，更有利于网页的加载优化，结构更加简洁明了
（3）提高了网页的加载速度，更优的用户体验
二、对于css的样式我们拥有四种导入方式
（1）使用<link>元素链接到外部的样式文件
<link rel="stylesheet" type="text/css" href="my.css">
（2） 使用CSS "@import"标记来导入样式表单
<style type="text/css">
@import url(my.css);
</style>
（3）在<head>元素中使用"style"元素来指定
（4） 在<body>内部的元素中使用"style"属性来定义样式
这四种方式都能成功地使用CSS样式，CSS选择器具有一定的优先级。而相应的css导入也会有优先级的顺序，我们采取就近原则：行内>内嵌>链接>导入 以上的标签顺序就是 4、3、1、2
三、link和@import的区别
之前我不是很了解这两个的区别，在我看来都是对于外部文件的导入，除了那一点优先顺序。其他还有什么样的区别呢？
1.从属关系区别@import是 CSS 提供的语法规则，只有导入样式表的作用；link是HTML提供的标签，不仅可以加载 CSS 文件，还可以定义 RSS(内容聚合）、rel 连接属性（表示默认或备选css 下面案例有介绍）等。
2.加载顺序区别
加载页面时，link标签引入的 CSS 被同时加载；@import引入的 CSS 将在页面加载完毕后被加载。
3.兼容性区别@import是 CSS2.1 才有的语法，故只可在 IE5+ 才能识别；link标签作为 HTML 元素，不存在兼容性问题。
4.DOM可控性区别
可以通过 JS 操作 DOM ，插入link标签来改变样式；由于 DOM 方法是基于文档的，无法使用@import的方式插入样式。
（以下的实例，就是使用JS进行样式的操作）
5.权重区别link引入的样式权重大于@import引入的样式
这里是一定的应用的环境：
（1）如果要javascript进行样式选择；
这个时候就要用link,因为link是html元素，可用javascript去控制dom元素最后达到改变样式的效果。
看下列代码
<link rel="stylesheet" href="/css/styles.css" type="text/css" media="screen" />
<link rel="stylesheet" href="/css/orange.css" type="text/css" media="screen" title="orange" />
<link rel="alternate stylesheet" href="/css/blue.css" type="text/css" media="screen" title="blue" />
<link rel="alternate stylesheet" href="/css/pink.css" type="text/css" media="screen" title="pink" />
<link rel="alternate stylesheet" href="/css/slate.css" type="text/css" media="screen" title="slate" />
这是一段很经典的改变页面风格的代码，
[1]rel:用来声明链接对象的作用或者类型。
譬如上面的的代码："stylesheet"表示链接一个默认的css,而"alternate stylesheet"表示备选的css
[2]href:引用css的文件路径。
[3]type:文件类型
[4]media:应用的设备，"screen"是说明应用在屏幕上。
[5]title:是css的名称。
这段代码中一共有5个css,第一个是基本样式，而其他四个是风格样式,利用javascript去控制默认显示的样式title就ok了。