导入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 条评论