在元素或单独的标记/文件中定义样式：是否存在差异

Question

考虑以下html-pieces

1

<div class="some-class" style="key: value;">

2

<style type="text/css">
  .some-class {color:red;}
</style>
...
<div class="some-class">

3

<div class="some-class">

在单独的CSS文件中使用.some-class {color:red;}。 1号，2号和3号有什么不同吗？

Answer 1

当然有：每个都有不同的优先级：http://www.hongkiat.com/blog/css-priority-level/。

从另一个角度来看 - 最后一个是最好的，因为它可以用最简单的方式维护。

Answer 2

使用外部CSS的第三个选项被认为是最佳实践，因为您的标记不包含任何样式信息。它创建了一个关注点分离，为您留下更清晰的标记。

Answer 3

是的，有区别。

在第一种情况下，您使用的内联CSS具有最高优先级，因此将应用它。

在第二种情况下，css在HTML中使用，那么这不是一个好习惯。

在第三种情况下，您在外部文件中声明CSS，以便它可以在不同的html页面中使用，并且也易于维护。