1 内联样式表
-
可以放在页面各个地方,但是一般放在head标签中
-
不推荐使用,会造成页面体积很大的情况的产生,从而导致页面不能及时加载出来的情况
而如果采取外部样式导入的方式,则其可以异步加载的方式呈现。
<style> a { color: red; } </style>
2 嵌入式样式表
-
定义于标签内部的style属性中
-
和内联样式表一杨,不推荐使用
<div style="font-size:20px;"> </div>
3 外部样式表
-
引入<link rel=“stylesheet” href=“css路径”>
其中
stylesheet
为样式表关联,为默认的属性
4 导入方式导入外部样式表
-
<style> @import url(style.css) </style>
-
使用css规则引入外部文件,必须放在样式表的开头,否则无法正确导入,此方式不建议使用。
-
如果在外部css文件中采取此方式导入的话,可以引入其他css文件。
@import url("practice_01.css"); // 或者采取以下的方式也可以书写 @import "practice_01.css"; a { color: red; }
5 链接方式和在style标签中的导入方式差别
- link属于HTMl 而@import属于CSS,而@import是css2.1才出现的,对全部浏览器不兼容
- 当html加载的时候,link引用的文件会同时被加载,而@import引用的文件则会等页面全部加载完成之后再被加载
6 四种引入方式优先级
- 没有优先级之说
- 不重复的属性不影响渲染,重复的属性采取覆盖的方式显示,保留最后位置的属性,同时还要考虑多级分值导致比重
- 行内样式一定是运行逻辑上最后被解析的位置
- 加上!important会影响显示顺序