样式和脚本标记序列

Question

通常，HTML页面包含以下标记

<script>
<link>
<style>

我发现改变这些标签序列的次数，弄乱了页面布局。

那么原因是什么以及避免这种情况的要点是什么？

修改

在查看@Anurag的答案之后，我实际上假设我们没有一个案例，我们在不同的样式或链接标记中有两个相同css类的定义。

我主要担心的是css和脚本序列。我们是否应该在编写任何JavaScript之前拥有所有css类，或者根本不重要（我不认为）。

例如jqtouch floaty extension。 如果我在.floaty标记之前定义JavaScript类，那么它就不起作用了。 希望你明白我的意思。

Answer 1

在这种情况下，<link>和<style>代码的顺序最为重要。

<link>标记将保留对样式表的引用，您可以在其中定义大部分页面布局。 <style>标记将定义样式表中定义的例外或添加。

因此，您首先需要知道什么是默认值，然后才能添加内容或对其进行例外处理。这就是<link>标记应出现在<style>标记之前的原因。 样式定义（工作表和内联）按顺序应用。最后一个定义覆盖了以前的定义。

然后我们还有<script>标签。这些与搞乱布局无关。 根据经验，我总是在我的<link>标签之后声明它们。为什么？首先向访问者展示一个漂亮的页面，脚本应该用于支持其他功能。

Answer 2

如果没有看到更多HTML，我无法告诉你。但是，如果我可以提出建议，我建议不要在HTML中插入任何样式或脚本。您不希望这样做有很多原因，但other articles and websites可以更好地解释您不想这样做的原因。

而且，如果没有内联，它可能会解决您目前遇到的问题。

Answer 3

订单对所有这些标签都很重要。

<script>标记是按顺序执行的，除非使用async或defer属性，因此页面后面出现的脚本标记可以覆盖先前声明的函数/ variables / ..

同样，样式表是按顺序应用的，并且具有关于如何处理冲突的特殊规则等。例如，style属性优先于所有内容，如果样式稍后出现，则它会覆盖先前的样式。例如，

<style>
    .page {
        background-color: #CCC;
    }
</style>

<style>
    .page {
        background-color: #222;
    }
</style>

页面的颜色为#222。