html - 在元素或单独的标签/文件中定义样式：有区别吗

Question

考虑以下 html 片段

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">

在.some-class {color:red;}一个单独的 CSS 文件中。1、2、3有区别吗？

Answer 1

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

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

Answer 2

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

Answer 3

是，有一点不同。

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

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

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