使用不同的方法来引用css样式表，最终到达的效果相同，但是使用不同方法应用的css文件将影响到SEO及网页打开速度效率。掌握这三种引入样式方式是非常有必要的。
目标
- 掌握四种样式引入的方式？
- 明白四种引入方式的权重
css的四种引入方式
行内样式 \ 行内式
内部样式 \ 嵌入式
外部样式 \ 链接式
导入样式 \ 导入式
这四种写法都不一样，而且也有各自的特点，所以根据合适的场景，选用合适的写法。
行内样式 \ 行内式
最简单粗暴的写法，直接在标签设定样式。
通过在标签的style属性中设定CSS样式。
优点：非常适合简单的页面
缺点：文件体积过大的时候，导致页面不纯净，不利于蜘蛛爬行，后期维护不方便。
内部样式 \ 嵌入式
将css样式分离出html结构，集中写在网页的head标签里的style标签。按照对应标签来修饰效果。
这种方式更适合代码量不算太多的情况下使用，或者是一个独立的文件。
优点：将样式分离出来，达到样式与结构分离，有利于前后期的开发与维护
缺点：每个页面都要定义；修饰代码量过大时，会增加文件体积
外部样式 \ 链接式
在head标签里，通过link标签导入一个css文件。
这是使用频率最高，最实用的样式方式。一般开发项目，都是采用这种方式。
优点：实现了页面框架代码与表现CSS代码的完全分离，使得前后期的开发与维护
都十分方便；有利于代码的复用。
缺点：额外增加多一个css文件。
link标签
link标签是放在head标签里，不需要style标签，它有3个参数，其中只有2个是必填。
href 值为外部资源地址，这里是css的地址（必填）
rel 定义当前文档与被链接文档之间的关系,这里是外部css样式表即stylesheet（必填）
type 规定被链接文档的 MIME 类,这里是值为text/css（非必填）
导入样式 \ 导入式
导入样式和链接样式比较相似，采用@import样式导入CSS样式表。
但是这种方式一般不会使用，因为他有一个缺点，先加载HTML结构再加载CSS文件，就导致了一个问题，如果网页比较大则会儿出现先显示无样式的页面，闪烁一下之后，再出现网页的样式。
所以这种样式的方式基本就没人使用，这也是为什么大多数网站都只会说只有3种引入方式，忽略掉这种方式。
四种引入方式的优先级
理论上是：行内>内嵌>链接>导入，但实际上还是遵循就近原则，即是最后的样式。
上面的例子，因为最后的样式是红色，所以就是红色。