Antworten:
Nur um das zu ergänzen, was jdelStrother über w3-Spezifikationen und ARTstudio über das Rendern von Browsern erwähnt hat.
Es wird empfohlen, da <body>Ihre Stile bereits geladen wurden, wenn Sie das CSS vor dem Start deklariert haben . So sehen Benutzer sehr schnell etwas auf ihrem Bildschirm (z. B. Hintergrundfarben). Wenn nicht, sehen Benutzer einige Zeit einen leeren Bildschirm, bevor das CSS den Benutzer erreicht.
Wenn Sie die Stile irgendwo in der Liste belassen <body>, muss der Browser die Seite (beim Laden neu und alt) neu rendern, wenn die deklarierten Stile analysiert wurden.
linkund styledürfen nicht im Body erscheinen, es sei denn, sie haben entweder einen Gültigkeitsbereich (Stil) oder das Attribut itemprop(Link) deklariert.
styleist ein Flow-Element in HTML5 und HTML4.1 (auch wenn es keinen Gültigkeitsbereich hat) und kann in den Körper eingefügt werden.
scopedAttribut wurde veraltet.
Die neuesten Versionen der HTML-Spezifikation erlauben jetzt das <style>Tag innerhalb von Body-Elementen. https://www.w3.org/TR/html5/dom.html#flow-content
Auch das scopedAttribut, das früher Voraussetzung für ein styleTag in der war, bodyist jetzt veraltet.
Dies bedeutet, dass Sie das styleTag überall verwenden können. Die einzigen Auswirkungen sind eine verminderte Seitenleistung aufgrund möglicher Reflows / Repaints, sobald der Browser weiter unten im Seitenbaum auf Stile trifft.
Veraltete Antwort:
Das <style>Tag ist <body>gemäß den w3-Spezifikationen nicht zulässig . (Sie können natürlich <div style="color:red">bei Bedarf Inline-Stile anwenden, dies wird jedoch im Allgemeinen als schlechte Trennung von Stil und Inhalt angesehen.)
<style>ist ein Flow-Element in HTML 5 und 4.1 und kann (wie alle anderen Flow-Elemente) in den Body eingefügt werden.
Wenn Sie CSS in den Body einfügen, wird es später geladen. Es ist eine Technik, mit der der Browser die Benutzeroberfläche schneller zeichnen kann (dh ein Blockierungsschritt wird entfernt). Dies ist wichtig für die Benutzererfahrung auf SmartPhones.
Ich gebe mein Bestes, um ein kleines CSS auf dem zu halten, <head>und ich bewege den Rest nach unten. Wenn eine Seite beispielsweise JQuery UI CSS verwendet, verschiebe ich sie immer am Ende von <body>, kurz vor den Links zu JQuery Javascript. Zumindest können alle Nicht-Jquery-Elemente bereits gezeichnet werden.
Kopf ist ausgelegt für (Zitieren des W3C):
"Informationen zum aktuellen Dokument, wie z. B. der Titel, Schlüsselwörter, die für Suchmaschinen nützlich sein können, und andere Daten, die nicht als Dokumentinhalt betrachtet werden "
Siehe die globale Struktur eines HTML-Dokuments . Da CSS kein Dokumentinhalt ist, sollte es im Kopf sein.
Auch jeder andere Webentwickler wird erwarten, dass es dort zu sehen ist. Verwirren Sie die Dinge also nicht, indem Sie es in den Körper legen, auch wenn es funktioniert!
Das einzige CSS, das Sie in den Body einfügen sollten, ist Inline-CSS , obwohl ich normalerweise Inline-Stile vermeide.
Die Standards ( HTML 4.01: das Stilelement ) legen klar fest, dass das Stil-Tag nur innerhalb des Kopf-Tags zulässig ist. Wenn Sie Style-Tags in das Body-Tag einfügen, versuchen die Browser, wenn möglich, das Beste daraus zu machen.
Es ist möglich, dass ein Browser ein Style-Tag im Body ignoriert, wenn Sie einen strengen Dokumenttyp angeben. Ich weiß nicht, ob ein aktueller Browser dies tut, aber ich würde nicht damit rechnen, dass alle zukünftigen Versionen so entspannt darüber sind, wo Sie das Stilelement platzieren.
styleTags im Body zulässig, wenn sie ein scopedAttribut haben.
Obwohl der styleTag im Körper nicht erlaubt ist, das linkist Tag, so lange , wie Sie ein externes Stylesheet verweisen, alle Browser sollten machen und die CSS richtig , wenn in dem verwendeten verwenden body.
Quelle: https://html.spec.whatwg.org/multipage/semantics.html#the-link-element
Zusätzlich zu früheren Antworten besteht, obwohl das Einfügen eines Stilcodeblocks in das Element in modernen Browsern möglicherweise funktioniert (obwohl dies immer noch nicht richtig ist), immer die Gefahr, dass der Browser den Code als Text rendert, insbesondere bei älteren Browsern es sei denn, der Stilabschnitt ist in einem CDATA-Abschnitt enthalten.
Die andere Sache beim Einfügen in das Element, abgesehen von Inline-Stilen, ist natürlich, dass, da es nicht mit den W3C-HTML / XHTML-Spezifikationen übereinstimmt, jede Seite im Body im W3C-Validator fehlschlägt. Es ist immer einfacher, unerwartete Anzeigeprobleme zu beheben, wenn Ihr gesamter Code gültig ist, wodurch es einfacher wird, Fehler zu erkennen. Ein ungültiges HTML-Element kann sich nachteilig auf das Rendern aller Elemente auswirken, die über den Ort hinausgehen, an dem es im Code vorkommt. Sie können also unerwartete Effekte erzielen, wenn Elemente an Stellen vorhanden sind, an denen sie nicht sein sollten, denn wenn ein Browser ein ungültiges Element findet, ist dies nur der Fall Es wird am besten erraten, wie es angezeigt werden soll, und verschiedene Browser können unterschiedliche Entscheidungen hinsichtlich der Darstellung treffen.
Unabhängig davon, ob Sie einen Übergangs- oder einen strengen Doctype verwenden, ist dieser gemäß den (X) HTML-Spezifikationen immer noch ungültig.
Sie würden den Zweck der Verwendung von CSS tatsächlich zunichte machen, indem Sie die Stile in den Körper einfügen. Der Punkt wäre, Inhalt von Präsentation (und Funktion) zu trennen. Auf diese Weise können Änderungen am Stil im Stylesheet und nicht im Inhalt vorgenommen werden. Sobald Sie die Inline-Stilmethode verwenden, muss jede Seite mit Inline-Stil nacheinander geändert werden. Mühsam und riskant, da Sie eine Seite oder drei oder zehn verpassen könnten.
Bei Verwendung eines Stylesheets müssen Sie nur das Stylesheet ändern. Die Änderungen werden automatisch auf jede HTML-Seite übertragen, die mit dem Stylesheet verknüpft ist.
Neonbles Punkt ist auch ein weiterer wichtiger Grund; Wenn Sie den HTML-Code durch Hinzufügen von CSS inline durcheinander bringen, wird das Rendern zu einem Problem. HTML löst keine Ausnahmen für Ihren Code aus. Stattdessen geht es aus und rendert es so gut es kann und geht weiter.
Die Einhaltung von Webstandards mithilfe eines Stylesheets sorgt für eine bessere Website. Und wenn Sie Hilfe benötigen, weil die Dinge auf Ihrer Seite nicht genau so sind, wie Sie es möchten, können Sie Ihr CSS im Kopf und nicht im Körper platzieren, um die Fehlerbehebung für sich selbst und für jeden, bei dem Sie um Hilfe bitten, erheblich zu verbessern.
Zwei widersprüchliche Antworten:
Von der MDN- Seite auf dem Link-Tag:
Ein
<link>Element kann entweder im Element<head>oder im<body>Element vorkommen, je nachdem, ob es einen Verknüpfungstyp hat, der body-ok ist. Beispielsweise ist der Stylesheet-Verknüpfungstyp body-ok, und daher<link rel="stylesheet">ist a im body zulässig. Dies ist jedoch keine bewährte Methode. Es ist sinnvoller, Ihre<link>Elemente von Ihrem Körperinhalt zu trennen und sie in Ihren Kopf zu setzen.
Aus CSS The Definitive Guide (4. Ausgabe / 2017) Seite 10
Um ein externes Stylesheet erfolgreich zu laden, muss der Link im Kopfelement platziert werden, darf jedoch nicht in einem anderen Element platziert werden.
Welchen Unterschied wird es machen?
Vorteile: Manchmal ist es einfacher, bestimmte Attribute an bestimmten Stellen anzuwenden, insbesondere wenn Code im laufenden Betrieb generiert wird (z. B. das Erstellen über PHP und jede Liste mit dynamischer Größe benötigt eine eigene Klasse ... z. B. für die Zeitsteuerung von Elementen für Transformationen).
Nachteile: Etwas langsamer, funktioniert möglicherweise in ferner Zukunft eines Tages nicht mehr.
Meine allgemeine Meinung dazu: Tu es nicht, du musst es nicht, aber wenn du es musst, verliere keinen Schlaf darüber.
Das Einfügen <style>in den Körper funktioniert gut mit allen modernen Browsern.
Ich hatte dies in eBay verwendet.
Wenn es funktioniert, treten Sie es nicht.