Какая разница, если я ставлю файл css внутри <head> или <body>?

Обычно файлы css помещаются внутри <head></head>, что, если я помещаю его внутри <body></body>, какая разница?

Ответ 1

Просто добавьте к тому, что jdelStrother упомянул о спецификациях w3 и ARTstudio о рендеринге браузера.

Рекомендуется, потому что, когда у вас есть CSS, объявленный до начала <body>, ваши стили уже загружены. Поэтому очень быстро пользователи видят что-то на экране (например, цвета фона). Если нет, пользователи видят пустой экран в течение некоторого времени, пока CSS не достигнет пользователя.

Кроме того, если вы оставите стили где-то в <body>, браузер должен повторно отобразить страницу (новую и старую при загрузке), когда объявленные стили были проанализированы.

Ответ 2

Тег <style> не допускается в пределах <body> в соответствии со спецификациями w3. (Разумеется, вы можете применять встроенные стили с помощью <div style="color:red">, если это необходимо, но, как правило, считается плохим разделением стиля и контента).

Ответ 3

Помещение CSS в тело означает, что оно загружается позже. Это технология, позволяющая браузеру быстрее рисовать интерфейс (т.е. Удаляет шаг блокировки). Это важно для пользователей с помощью SmartPhones.

Я делаю все возможное, чтобы сохранить один маленький css на <head>, и я перемещаю остальные внизу. Например, если страница использует JQuery UI CSS, я всегда перемещаю ее в нижней части <body>, непосредственно перед ссылками на JQuery javascript. По крайней мере, весь элемент не JQuery уже может быть нарисован.

Ответ 4

Голова предназначена для (цитирование W3C):

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

См. Глобальная структура HTML-документа. Поскольку CSS не является содержимым документа, он должен быть в голове.

Также каждый другой веб-разработчик будет ожидать увидеть его там, поэтому не путайте вещи, помещая их в тело, даже если он работает!

Единственный CSS, который вы должны положить в тело, встроенный CSS, хотя я обычно избегаю встроенных стилей.

Ответ 5

Стандарты (HTML 4.01: элемент стиля) четко указывает, что тег стиля разрешен только внутри основного тега. Если вы поместите теги стиля в тег тела, браузеры попытаются сделать все возможное, если это возможно.

Возможно, браузер будет игнорировать тег стиля в теле, если вы укажете строгий тип документа. Я не знаю, будет ли текущий браузер делать это, но я не буду рассчитывать на то, что все будущие версии будут настолько расслаблены, когда вы поместите элемент стиля.

Ответ 6

Хотя тег style не допускается в теле, тег link, так что пока вы ссылаетесь на внешнюю таблицу стилей, все браузеры должны отображать и правильно использовать CSS при использовании в body.

Источник: https://html.spec.whatwg.org/multipage/semantics.html#the-link-element

Ответ 7

В дополнение к более ранним ответам, хотя размещение блока кода стиля внутри элемента может работать в современных браузерах (хотя это все еще не делает это правильно), всегда существует опасность, особенно со старыми браузерами, которые браузер будет отображать код в виде текста, если раздел стиля не включен в раздел CDATA.

Конечно, другая вещь, помещая ее внутри элемента, кроме встроенных стилей, заключается в том, что, поскольку она не соответствует спецификациям W3C HTML/XHTML, это то, что любая страница с ней внутри тела будет терпеть неудачу на валидаторе W3C, Всегда легче обнаруживать ошибки при отображении ошибок, если весь ваш код действителен, что облегчает обнаружение ошибок. Недействительный элемент HTML может отрицательно влиять на размывание любого и всех элементов за пределами того места, где он встречается в коде, поэтому вы можете получить неожиданные эффекты с элементами в тех местах, где их не должно быть, потому что, когда браузер находит недопустимый элемент, он просто позволяет лучше догадываться о том, как он должен отображать его, и разные браузеры могут принимать различные решения в том, как они это делают.

Если вы используете переходный или строгий doctype, он все равно будет недействительным в соответствии со спецификациями (X) HTML.

Ответ 8

Фактически вы проиграете цель использования CSS, поместив стили в тело. Дело в том, чтобы разделить контент от представления (и функции). Таким образом, любые изменения стиля могут быть сделаны в таблице стилей, а не в содержимом. Когда вы используете метод встроенного стиля, каждая страница, которая имеет встроенный стиль, должна меняться один за другим. Сложно и рискованно, так как вы могли пропустить страницу или три, или десять.

Используя таблицу стилей, вам нужно только изменить таблицу стилей; изменения распространяются автоматически на каждую страницу HTML, которая ссылается на таблицу стилей.

неоновая точка также является еще одной большой причиной; если вы испортите HTML, добавив CSS inline, рендеринг станет проблемой. HTML не генерирует исключения для вашего кода. Вместо этого он выходит и делает его наилучшим способом и может двигаться дальше.

Придерживаясь веб-стандартов, используя таблицу стилей, вы получаете лучший веб-сайт. И когда вам нужна помощь, потому что вещи на вашей странице не совсем так, как вы хотите, размещение вашего CSS в голове, в отличие от тела, позволяет значительно улучшить устранение неполадок самостоятельно и для тех, кого вы просите о помощи.

Ответ 9

Разница есть. Загрузка страницы асинхронна, поэтому, если у вас есть внешняя таблица стилей, она сразу же загрузит файл css, когда достигнет тега ссылки, поэтому хорошо иметь верхнюю часть головы.

Ответ 10

Какая разница?

Плюсы: иногда проще применять определенные атрибуты в определенных местах, особенно если код генерируется "на лету" (например, создание через php, а каждому из динамически отсортированного списка нужен свой класс... например, для таймингов элемента для преобразует).

Минусы: Немного медленнее, возможно, не сработает в отдаленном будущем.

Мое общее мнение по этому поводу: Не делайте этого, чего вам не нужно, но если вам это нужно, не теряйте сна над ним.

Ответ 11

Помещение <style> в тело хорошо работает со всеми современными браузерами.

Я использовал это в eBay.

Если он работает, не пинайте его.