导入CSS的四种方式

导入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文件。

四种插入方式的优先级:

若四种方式同时使用,那么他们都会生效果。 若碰到相同的属性,且都修改了同样属性,后定义的生效。 若内嵌与导入式放到一起,始终是内嵌式起作用。

参考博文

手机上阅读

本文由 kivii创作, 采用 知识共享署名4.0 国际许可协议进行许可
本站文章除注明转载/出处外,均为本站原创或翻译,转载前请务必署名
原文地址:《导入CSS的四种方式》

 最后一次更新于2018-09-27

0 条评论

添加新评论

Markdown is supported.