导入CSS的四种方式
行内导入（不推荐使用）
<html> <body> <div style="width:100px;"></div> </body> <!--给当前元素设置宽度为100像素--> </html>
缺点：HTML和CSS混淆，代码结构混乱，不便后期维护和管理。
内嵌导入
<html> <body> <style>div {
width: 100px;}
</style> </body> </html>
优点：解决了同一页面多个标签需要写多个style属性的问题。 缺点：内嵌式无法实现在多个html都要使用这个css样式的功能。
外链式导入（推荐使用）
<html> <body> <link rel="stylesheet" href="css/1.css"> <!--以当前HTML文件为依托，找到css文件夹下的“1.css”文件--> </body> </html>导入式导入（一般不用）
<html> <body> <style>@import "css/1.css";
<!--导入式一般放在内嵌CSS代码块最开始的位置-->
div {width: 100px;}
</style> </body> </html>
外链式与导入式的区别（要点）：
使用外链式时，会在装载页面主体部分之前装载css文件，这样显示出来的网页从一开始就是带有样式。所以即使网速再慢，这种情况下显示出来的网页还是跟我们预期的效果一样。 使用导入式时，会在整个页面装载完成后再装载css文件，对于有的浏览器来说，在一些情况下（例如网速较慢），如果网页文件的体积比较大，则会出现先显示无样式页面，闪一下之后再出现设置样式后的效果。但导入式可以避免过多页面指向一个css文件。 对于一些网络页面较多的网站，为了便于维护，可能会把所有的css样式分类别放到几个css文件中，这时如果使用外链式，就需要几个语句分别导入css，如果要调整css的文件分类，就需要同是调整HTML文件；而如果使用导入式，则可以只引进一个总的css文件，在这个文件中再导入其他独立css文件。
四种插入方式的优先级：
若四种方式同时使用,那么他们都会生效果。 若碰到相同的属性,且都修改了同样属性,后定义的生效。 若内嵌与导入式放到一起,始终是内嵌式起作用。
本文由 giao创作， 采用 知识共享署名4.0 国际许可协议进行许可 本站文章除注明转载/出处外，均为本站原创或翻译，转载前请务必署名 原文地址：《导入CSS的四种方式》
最后一次更新于2018-09-27
0 条评论