黑豹程序员-CSS四种样式的定义方式及冲突后的就近原则

4种样式定义

1. 浏览器缺省设置（即默认）
2. 外部样式表（引用的css）
3. 内部样式表（位于 标签内部）
4. 内联样式（在 HTML 元素内部）

样式冲突如何解决？

若多重样式将层叠为一个：

一般而言，所有的样式会根据下面的规则层叠于一个新的虚拟样式表中，其中数字 4 拥有最高的优先权。

这是使用CSS时最大的难点。实际开发中会产生不同人写的样式去修饰同一个元素的情况，此时谁的修饰生效？

内联样式（在 HTML 元素内部）拥有最高的优先权，我们也称为就近原则。

案例

外部样式表：

<span style="font-size:18px;"><link href="style.css" rel="stylesheet" type="text/css"></span>

内部样式表：

<span style="font-size:18px;"><style type="text/css">.classname{width:100%}</style></span>

内联样式

<span style="font-size:18px;"><div width="80"></div></span>