HTML与CSS结合的三种方式：优先级比较

所谓实践出真知，只有自己动手去做了，才能得到正确的结论。

首先我们看看三种结合方式：

1. 通过link标签引入外部css文件
2. 通过style标签
3. 通过style属性

  很长一段时间我受这个一段话影响：在html文件中，代码的执行顺序是从外到内，由上到下执行的。所以一直认为的优先级是这样的：3>2>1。这是当初看视频时理解不到位。发现这个细节还是自己偶然间的测试。不是什么很重要的东西，所以先把结论摆出来。由于我也是个初学者，所以站在初学者的角度，我认为能用视频解决的就不用图片，能用图片解释的我就不用文字描述。

测试过的优先级是：3>2=1。

结果图：

  这个其他情况我就不在测试了，这里style属性的优先级最高，没什么争议。

  接下来就是重点了，分为两种情况来说明问题：

1. 测试一：style标签在link标签上方
2. 测试二：style标签在link标签下方

测试一：style标签在link标签上方。不在给测试标签div设置style属性。只比较style标签和外部引入的优先级

测试一结论：外部引入的优先级高

---

测试二：style标签在link标签下方。不在给测试标签div设置style属性。只比较style标签和外部引入的优先级

测试二结论：style标签优先级高

---

测试二结论：style标签优先级高

---

  总结：通过测试一和测试二不难知道，style标签和外部引入的css文件是没有绝对的优先级的，决定优先级的是位置先后。从图中可以看出，位置在后的优先级高。