стиль и сценарий тег последовательность

Question

Обычно HTML-страница содержит следующие теги

<script> 
<link> 
<style> 

я нашел несколько раз, что изменение последовательности этих тегов, бардак с макета страницы.

Итак, что было бы причиной и в чем были бы причины, чтобы избежать этой ситуации?

EDIT

После просмотра ответ на @Anurag, я на самом деле при условии, что мы не имеем случай, когда мы имеем два определения одного и того же класса CSS, в другом стиле или ссылку тега.

Моей главной заботой является последовательность css и сценария. Должен ли мы иметь весь класс css, прежде чем писать какой-либо JavaScript или вообще не имеет значения (что я не думаю).

Например, jqtouch floaty extension. В этом случае, если я определяю класс .floaty перед тегом JavaScript, то он не работает. Надеюсь, вы поняли мою точку зрения.

Answer 1

Порядок важен для всех этих тегов.

теги выполняются последовательно, если не используются атрибуты async или defer, поэтому тег скрипта, который появляется позже на странице, может переопределять ранее объявленные функции/переменные /.

Аналогичные таблицы стилей применяются последовательно и имеют правила специфичности в отношении обработки конфликтов и т. Д. Например, атрибут стиля имеет приоритет над всем, и если стиль появляется позже, он переопределяет предыдущий стиль. Например,

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

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

Цвет страницы будет #222.

Answer 2

Я не могу сказать вам конкретно, не видя больше вашего HTML. Однако, если я могу сделать рекомендацию, я бы предложил не встраивать ни один из стилей или скриптов в ваш HTML. Существует ряд причин, по которым вы не хотите этого делать, но other articles and websites гораздо лучше объясняют, почему вы этого не хотите.

И, не встраивая, он может исправить проблемы, которые вы в настоящее время испытываете.

Answer 3

В этом случае наиболее важными являются теги <link> и <style>.

Тег <link> будет содержать ссылку на ваши таблицы стилей, в которых вы определили большую часть макета страницы. Тег <style> определит исключения или дополнения в определениях, сделанных в ваших таблицах стилей.

Итак, сначала вам нужно знать, что такое по умолчанию, прежде чем вы сможете что-то добавить или сделать исключение. Вот почему теги <link> должны появиться перед тегами <style>. Определения стилей (листы и встроенные) применяются последовательно. Последнее определение переопределяет предыдущие определения.

Тогда у нас также есть теги (0) <script>. Они не имеют никакого отношения к испортить ваш макет. Как правило, я всегда объявляю их после тегов <link>. Зачем? Сначала покажите посетителю приятную страницу, скрипты должны использоваться для поддержки дополнительных функций.