CSS样式的引入&区别&权重&CSS层叠性&CSS样式的来源

CSS样式的引入：

内部样式：

• 内部样式：写在当前页面style标签中的样式
• 内联样式：写在style属性中的样式

外部样式：

• link标签引入的CSS文件
• @import引入的CSS文件，需要写在css标签中，属于css2.1,只有IE5以上才能识别，不建议使用

<!-- rel用于指定资源和页面的关系 -->
<link rel="stylesheet" type="text/css" href="./common.css">

<style type="text/css">
    @import url("css/common.css");
</style>

 

 

权重：

• 内联样式权重最大，内部样式和外部样式权重值相等，采用哪个取决于代码书写顺序，后写覆盖先写
• 先写的样式表有后写样式表中没有的样式，此则没有的样式会继续保留不会被覆盖

 

 

外部样式两种引入方式的区别：

• link导入的样式表属于html，可以被DOM操作，和html一起加载，不会出现只有结构没有表现的情况
• import需要写在style标签里，导入的样式属于CSS,不能被DOM操作，在HTML加载之后才加载，可能出现只有结构没有表现的情况
• import属于css2.1,有兼容性问题，不能被IE5以下识别

 

 

 

CSS层叠性：

• 1 CSS层叠性的产生：内部、外部、内联样式表，根据权重，相同的样式被覆盖，不同的样式继续执行。
• 2 只要产生权重关系，必然具有重叠性
• 3 从CSS样式的来源上来说：开发者样式>读者样式(用户能操作的)>浏览器样式，
• 4 CSS选择器权重也体现了层叠性：!important>id(100) > class(10)、伪类（10）> 标签、伪元素(1)