Відповіді:
Просто для додання того, що 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 в тіло означає, що він завантажується пізніше. Це техніка, яка використовується для того, щоб браузер швидше почав малювати інтерфейс (тобто він видаляє крок блокування). Це важливо для роботи користувачів на SmartPhones.
Я роблю все можливе, щоб зберегти один невеликий css на, <head>а решту рухаю внизу. Наприклад, якщо сторінка використовує JQuery UI CSS, я завжди переміщую її внизу <body>, безпосередньо перед посиланнями на JQuery javascript. Принаймні, всі елементи, які не є Jquery, вже можна намалювати.
Голова призначена для (цитування W3C):
"інформація про поточний документ, наприклад його заголовок, ключові слова, які можуть бути корисні пошуковим системам, та інші дані, які не вважаються вмістом документа "
Див. Глобальну структуру документа HTML . Оскільки CSS - це не зміст документа, він повинен бути в голові.
Також кожен інший веб-розробник сподівається побачити його там, тому не плутайте речі, вкладаючи їх у тіло, навіть якщо це працює!
Єдиний CSS, який ви повинні ввести в тіло, - це вбудований CSS , хоча я зазвичай уникаю стилів вбудованого типу.
Стандарти ( HTML 4.01: елемент стилю ) чітко визначає, що тег стилю дозволений лише всередині тегу заголовка. Якщо ви помістите теги стилів у тег тіла, браузери намагатимуться якнайкраще використати це, якщо це можливо.
Можливо, що браузер ігнорує тег стилю в тілі, якщо вказати суворий тип документа. Я не знаю, чи робить це якийсь поточний браузер, але я б не розраховував, що всі майбутні версії будуть настільки розслаблені щодо місця розташування елемента стилю.
styleТеги HTML5 дозволені в тілі, якщо вони мають 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">тілі дозволено. Однак це не найкраща практика; має більше сенсу відокремлювати свої<link>елементи від вмісту тіла, вводячи їх у голову.
З CSS Довідковий посібник (4-е видання / 2017) сторінка 10
Для успішного завантаження зовнішнього аркуша стилів посилання повинно бути розміщено всередині головного елемента, але не може бути розміщене в жодному іншому елементі.
Яка різниця це матиме?
Плюси: Іноді простіше застосовувати певні атрибути в певних місцях, особливо якщо код створюється на ходу (наприклад, побудова за допомогою php та кожен зі списку динамічного розміру потребує власного класу ... наприклад, для термінів елементів для перетворень).
Мінуси: Трохи повільніше, можливо, колись у віддаленому майбутньому не вийде.
Моя загальна думка з цього приводу: Не робіть цього не потрібно, але якщо вам доведеться, не втрачайте сон.
Введення <style>корпусу добре працює з усіма сучасними браузерами.
Я використовував це в eBay.
Якщо це спрацьовує, не киньте його.