Ответы:
Просто чтобы добавить к тому, что jdelStrother упомянул о спецификациях w3 и ARTstudio о рендеринге браузера.
Рекомендуется, потому что когда у вас есть CSS, объявленный ранее <body> запуска, ваши стили уже загружены. Поэтому очень быстро пользователи видят что-то, появляющееся на их экране (например, цвета фона). Если нет, пользователи некоторое время видят пустой экран, прежде чем CSS достигает пользователя.
Кроме того, если вы оставляете стили где-то в <body>, браузер должен повторно отобразить страницу (новую и старую при загрузке), когда объявленные стили были проанализированы.
linkи styleне должны появляться в теле, если только они не определены как область (стиль) или не объявлен атрибут itemprop(ссылка).
styleэто элемент потока в html5 и html4.1 (даже если он не ограничен) и может быть помещен в тело.
scopedатрибут устарел.
Самые последние версии спецификации HTML теперь разрешают <style>тег внутри элементов тела. https://www.w3.org/TR/html5/dom.html#flow-content
Также scopedатрибут, который раньше был обязательным условием для наличия styleтега в, bodyтеперь устарел.
Это означает, что вы можете использовать style тег везде, где хотите, единственное влияние - это снижение производительности страницы из-за возможного перекомпоновки / перерисовки, когда браузер выбирает стили дальше в дереве страниц.
Устаревший ответ:
<style>Тег не допускается в <body>соответствии с w3 спецификации. (Конечно, вы можете применять встроенные стили <div style="color:red">при необходимости, но обычно это считается плохим разделением стиля и содержимого)
<style>это элемент потока в html 5 и 4.1 и может быть помещен в тело (как и все другие элементы потока).
Помещение CSS в тело означает, что он загружается позже. Эту технику используют, чтобы браузер начал быстрее рисовать интерфейс (т. Е. Он удаляет шаг блокировки). Это важно для удобства пользователей на смартфонах.
Я делаю все возможное, чтобы держать один маленький CSS на, <head>а я перемещаю остальные внизу. Например, если страница использует CSS JQuery UI, я всегда перемещаю ее внизу <body>, прямо перед ссылками на JQuery javascript. По крайней мере, все элементы, не относящиеся к Jquery, уже можно нарисовать.
Голова предназначена для (цитируя W3C):
«информация о текущем документе, такая как его заголовок, ключевые слова, которые могут быть полезны для поисковых систем, и другие данные, которые не считаются содержимым документа »
Посмотрите Глобальную структуру документа HTML . Поскольку CSS не является содержимым документа, он должен быть в голове.
Также любой другой веб-разработчик будет ожидать увидеть его там, так что не путайте вещи, помещая их в тело, даже если это работает!
Единственный CSS, который вы должны поместить в тело, это встроенный CSS , хотя я обычно избегаю встроенных стилей.
Стандарты ( HTML 4.01: элемент style ) четко указывают, что тег style разрешен только внутри тега head. Если вы добавите теги стиля в тег body, браузеры все равно попытаются извлечь из него максимальную пользу, если это возможно.
Возможно, браузер проигнорирует тег стиля в теле, если вы укажете строгий тип документа. Я не знаю, делает ли это какой-либо текущий браузер, но я бы не стал рассчитывать на то, что все будущие версии будут настолько расслаблены в отношении того, где вы разместите элемент стиля.
styleтеги разрешены в теле, если они имеют scopedатрибут.
Хотя styleтег не разрешен в теле, он linkесть, поэтому, если вы ссылаетесь на внешнюю таблицу стилей, все браузеры должны правильно отображать и использовать CSS при использовании в body.
Источник: https://html.spec.whatwg.org/multipage/semantics.html#the-link-element
В дополнение к более ранним ответам, хотя размещение блока кода стиля внутри элемента может работать в современных браузерах (хотя это все еще не делает его правильным), всегда существует опасность, особенно в старых браузерах, что браузер будет отображать код в виде текста если раздел стиля не включен в раздел CDATA.
Конечно, другая вещь, помещаемая в элемент, кроме встроенных стилей, заключается в том, что, поскольку он не соответствует спецификациям W3C HTML / XHTML, он заключается в том, что любая страница, содержащая его в теле, потерпит неудачу в валидаторе W3C. Всегда легче выявлять ошибки при непредвиденных проблемах отображения, если весь ваш код корректен, что облегчает обнаружение ошибок. Недопустимый HTML-элемент может отрицательно повлиять на отрисовку любого и всех элементов за пределами того, где он встречается в коде, поэтому вы можете получить неожиданные эффекты, имеющие элементы там, где их не должно быть, потому что, когда браузер находит недопустимый элемент, он просто дает лучшее представление о том, как он должен отображаться, и разные браузеры могут принимать разные решения в отношении того, как они его отображают.
Используете ли вы переходный или строгий тип документа, он все равно будет недействительным согласно (X) спецификациям HTML.
Вы бы на самом деле победили цель использования CSS, поместив стили в тело. Смысл в том, чтобы отделить контент от представления (и функции). Таким образом, любые изменения стиля могут быть сделаны в таблице стилей, а не в содержимом. Как только вы используете метод встроенного стиля, каждая страница, которая имеет встроенный стиль, должна быть изменена одна за другой. Утомительно и рискованно, так как вы можете пропустить страницу, или три, или десять.
Используя таблицу стилей, вам нужно всего лишь изменить таблицу стилей; Изменения распространяются автоматически на каждую HTML-страницу, которая ссылается на таблицу стилей.
точка зрения Неонбл - еще одна веская причина; если вы испортили HTML, добавив CSS, рендеринг становится проблемой. HTML не создает исключений в вашем коде. Вместо этого он выходит и делает его наилучшим образом, и движется дальше.
Соблюдение веб-стандартов с помощью таблицы стилей делает сайт лучше. И когда вам нужна помощь, потому что вещи на вашей странице не совсем так, как вы того хотите, размещение CSS в голове, а не в теле, значительно облегчает поиск неисправностей как вами, так и всеми, к кому вы обращаетесь за помощью.
Два противоречивых ответа:
Со страницы MDN по тегу ссылки:
<link>Элемент может происходить либо в<head>или<body>элементе, в зависимости от того, имеет ли он тип связи, которое тело-ки. Например, тип ссылки таблицы стилей - body-ok, и поэтому<link rel="stylesheet">в теле допускается a . Это, однако, не лучшая практика; имеет больше смысла отделять ваши<link>элементы от содержимого вашего тела, помещая их в вашу голову.
Из CSS Полное руководство (4-е издание / 2017) стр. 10
Чтобы успешно загрузить внешнюю таблицу стилей, ссылка должна быть размещена внутри элемента head, но не может быть размещена ни в каком другом элементе.
Какая разница это будет иметь?
Плюсы: иногда проще применить определенные атрибуты в определенных местах, особенно если код генерируется на лету (например, сборка через php, и каждому из динамически изменяемого списка нужен свой собственный класс ... например, для синхронизации элементов для преобразований).
Минусы: Немного медленнее, может не сработать когда-нибудь в далеком будущем.
Мое общее мнение по этому поводу: не делайте этого, если не нужно, но если вам нужно, не теряйте сон из-за этого.
Положить <style>в тело хорошо работает со всеми современными браузерами.
Я использовал это на eBay.
Если это работает, не пинайте это.