【技术等级】初级
本文重点讲解CSS技术中一些与HTML标记的属性相冲突的设置、CSS自身之间相冲突的设置应该如何解决。本文属于前端开发的初级教程，适合于刚刚开始接触CSS技术的学习者。
在CSS技术中，某些属性与HTML标记特定的属性含义是相同或相似的。也就是说，CSS的某些属性利用HTML自带标记的属性也是可以实现的。那么，如果代码中出现了这样的冲突该如何解决呢？
首先，我们来看一看CSS的某些属性与哪些HTML标记的属性相同或相似。
-
font-family属性类似于<font></font>标记对的face属性。
-
font-size属性类似于<font></font>标记对的size属性。
-
color属性类似于<font></font>标记对的color属性。
-
text-align属性类似于<p></p>标记对的align属性。
-
font-weight:bold; 类似于<strong></strong>标记对。
-
font-style:italic; 类似于<em></em>标记对。
-
text-decoration:underline; 类似于<u></u>标记对。
-
background-color属性用于整个页面时类似于<body></body>标记对的bgcolor属性。
-
list-style-type属性类似于<ul></ul>和<ol></ol>标记对的type属性。
-
……
再或者，如果对于相同的CSS属性作用在同一个对象上，而设置了不同的取值。这种样式内部发生的冲突又该如何解决呢？
例如：让我们一块看下列代码。
代码分析：上述代码中<div>标记对中的“小海前端 头条号”字样应该是遵循style属性规定的#ff5857的颜色样式呢，还是应该遵循名为co的类所规定的#5857ff的颜色样式呢？
上面描述的种种冲突情况，在书写代码时应该如何理解呢？本文小海老师带领大家一同学习CSS的冲突解决方案。
对于上述冲突，我们给出了三个CSS样式使用时的规则。
规则一：样式叠加。
当多个不同的样式作用于同一元素时，若样式之间互不矛盾，则所有样式均生效。
例如下列代码：
代码分析：上述代码中，“示例文本”字样显示为14px大小红色文字。“第二行示例文本”字样显示为14px大小黑色文字（默认字色）。
规则二：样式优先。
当 HTML 与 CSS 发生矛盾时，则忽略 HTML 效果，以 CSS 样式为先。
例如下列代码：
代码分析 ：上述代码中，<font></font>标记对中color属性设置为红色（#ff0000），style属性设置为青色（#00ffff）。则“示例文本”字样显示为青色。
规则三：距离优先。
当多个不同的样式作用于同一元素时，若样式之间互相矛盾，则以距离元素较近的样式为先。
例如下列代码：
代码分析：上述代码中，“网页开发技术”字样显示为14px大小。“前台设计”字样显示为16px大小。这种样式显示遵循了距离优先的规则。
由于“距离优先”原则的存在，因此样式的三种结合方式有以下的优先级：内联样式 > 内部样式表 >外部样式表
文章预告
下一次小海老师会为大家讲解CSS中有关文本段落的属性，结合前面HTML的内容，可以对页面中的段落进行更为细致的调整。千万不要错过哦。
小海声明
如果大家希望得到更加全面的关于HTML和CSS技术讲解的内容，可以私信我，我会免费将小海老师自己编写的HTML和CSS的PDF教材发给你，帮助你在前端开发的道路上阔步前行。