4种样式定义
- 浏览器缺省设置(即默认)
- 外部样式表(引用的css)
- 内部样式表(位于 标签内部)
- 内联样式(在 HTML 元素内部)
样式冲突如何解决?
若多重样式将层叠为一个:
一般而言,所有的样式会根据下面的规则层叠于一个新的虚拟样式表中,其中数字 4 拥有最高的优先权。
这是使用CSS时最大的难点。实际开发中会产生不同人写的样式去修饰同一个元素的情况,此时谁的修饰生效?
内联样式(在 HTML 元素内部)拥有最高的优先权,我们也称为就近原则。
案例
外部样式表:
cpp
<span style="font-size:18px;"><link href="style.css" rel="stylesheet" type="text/css"></span>
内部样式表:
cpp
<span style="font-size:18px;"><style type="text/css">.classname{width:100%}</style></span>
内联样式
cpp
<span style="font-size:18px;"><div width="80"></div></span>