导入css样式表方式总结

1 内联样式表

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

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

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

   <style>
       a {
           color: red;
       }
   </style>
   

2 嵌入式样式表

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

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

   <div style="font-size:20px;">
       
   </div>
   

3 外部样式表

1. 引入<link rel=“stylesheet” href=“css路径”>

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

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

1. <style>
   	@import url(style.css)
   </style>
   

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会影响显示顺序