导入css样式表方式总结

1 内联样式表

  1. 可以放在页面各个地方,但是一般放在head标签中

  2. 不推荐使用,会造成页面体积很大的情况的产生,从而导致页面不能及时加载出来的情况

    而如果采取外部样式导入的方式,则其可以异步加载的方式呈现。

    
    

2 嵌入式样式表

  1. 定义于标签内部的style属性中

  2. 和内联样式表一杨,不推荐使用

3 外部样式表

  1. 引入

    其中stylesheet为样式表关联,为默认的属性

4 导入方式导入外部样式表

  1. 
    
  2. 使用css规则引入外部文件,必须放在样式表的开头,否则无法正确导入,此方式不建议使用。

  3. 如果在外部css文件中采取此方式导入的话,可以引入其他css文件。

    @import url("practice_01.css"); 
    // 或者采取以下的方式也可以书写
    @import "practice_01.css";
    
    a {
        color: red;
    }
    

5 链接方式和在style标签中的导入方式差别

  1. link属于HTMl 而@import属于CSS,而@import是css2.1才出现的,对全部浏览器不兼容
  2. 当html加载的时候,link引用的文件会同时被加载,而@import引用的文件则会等页面全部加载完成之后再被加载

6 四种引入方式优先级

  1. 没有优先级之说
  2. 不重复的属性不影响渲染,重复的属性采取覆盖的方式显示,保留最后位置的属性,同时还要考虑多级分值导致比重
  3. 行内样式一定是运行逻辑上最后被解析的位置
  4. 加上!important会影响显示顺序

你可能感兴趣的:(导入css样式表方式总结)