单纯的css文件
当我们创建一个css文档时,经常遇到样式定义冲突的情况,这时遵从以下规则。
-
当一个HTML元素被定义多重CSS样式时,只有最后一个是可见的。如:
p {color: red}p {color: blue}/* 效果为蓝色 */ 当CSS样式定义在DOM元素的父级节点时,所有的自己元素都会继承该样式。
-
同一元素存在不同的选择方式时,根据权重进行计算:
- ID属性=100
- class属性=10
- HTML标签=1
-
使用 !important 标记,可以把选择器优先级提高到最前。
立即学习“前端免费学习笔记(深入)”;
Hello World
在HTML文件中使用CSS
有多种方法可以把CSS文件导入到HTML中,通常在HTML中出现位置的顺序为:
在部分通过导入外部样式 在部分直接写入 在CSS部分通过 @import 导入外部样式 直接定义在HTML标签中的style属性
然而,优先级的顺序确是:
- 直接定义在HTML标签中的style属性
- 在部分直接写入的
- 在CSS部分通过 @import 导入的外部样式
- 在部分通过导入的外部样式
在以下代码片段中四种导入CSS的方法都使用了,最终呈现出的效果,是级别最高的p标签中的style定义。除非,有 !important 在其他定义方式中出现。
/* Link in head */ /* Style tag in head */ /* @import in CSS area */ /* Style attribute in HTML element */Hello World











