回答:
jdelStrotherがw3の仕様とARTstudioについてブラウザのレンダリングについて述べたことに追加するだけです。
<body>
開始前にCSSが宣言されている場合、スタイルは実際に既にロードされているため、この方法をお勧めします。そのため、ユーザーは画面に何かが表示されるのをすぐに確認できます(背景色など)。そうでない場合、CSSがユーザーに到達する前のしばらくの間、ユーザーには空白の画面が表示されます。
また、スタイルをのどこかに残した<body>
場合、宣言されたスタイルが解析されたときに、ブラウザーはページを再レンダリングする必要があります(ロード時に新旧)。
link
そしてstyle
彼らはどちらか(スタイル)スコープや属性持っている場合を除き、本体に表示されていなければなりませんitemprop
(リンク)を宣言しました。
style
ですフロー要素 HTML5とhtml4.1で(それがスコープされていない場合でも)と体内に入れることができます。
scoped
属性は廃止されました。
HTML仕様の最新バージョンでは、<style>
body要素内のタグを使用できるようになりました。 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を入れると、後で読み込まれます。これは、ブラウザがインターフェイスの描画を高速化するために使用する手法です(つまり、ブロッキングステップを削除します)。これは、スマートフォンのユーザーエクスペリエンスにとって重要です。
私は1つの小さなcssを維持するために最善を尽くし<head>
、残りを一番下に移動します。たとえば、ページでJQuery UI CSSを使用している場合は、常にの一番下、<body>
JQuery JavaScriptへのリンクの直前に移動します。少なくとも、すべての非Jqueryアイテムは既に描画されている可能性があります。
頭はのために設計されています(W3Cを引用):
「タイトル、検索エンジンに役立つ可能性のあるキーワード、ドキュメントのコンテンツとは見なされないその他のデータなど、現在のドキュメントに関する情報」
HTMLドキュメントのグローバル構造を参照してください。CSSはドキュメントのコンテンツではないため、先頭に置く必要があります。
また、他のすべてのWeb開発者はそこに表示されることを期待しているので、動作しても、本文に入れて混乱させないでください。
本文に入れる必要がある唯一のCSSはインラインCSSですが、通常はインラインスタイルは避けます。
標準(HTML 4.01:スタイル要素)では、スタイルタグはヘッドタグ内でのみ許可されることを明確に規定しています。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仕様によれば、トランジショナルDoctypeとストリクトDoctypeのどちらを使用しても無効です。
スタイルを本文に入れることで、CSSを使用する目的を実際には無効にします。ポイントは、コンテンツをプレゼンテーション(および機能)から分離することです。このように、スタイルの変更はコンテンツではなくスタイルシートで行うことができます。インラインスタイルメソッドを使用すると、インラインスタイルを持つすべてのページを1つずつ変更する必要があります。退屈で、1ページまたは3ページ、または10ページを逃す可能性があるため、危険です。
スタイルシートを使用すると、スタイルシートを変更するだけで済みます。変更は、スタイルシートにリンクするすべてのHTMLページに自動的に伝播します。
ネオンブルのポイントももう一つの大きな理由です。CSSインラインを追加してHTMLを台無しにすると、レンダリングが問題になります。HTMLはコードに例外をスローしません。代わりに、それは外に出て、それを可能な限り最良の方法でレンダリングし、次に進みます。
スタイルシートを使用してWeb標準に準拠すると、より良いWebサイトになります。また、ページの内容が意図したとおりではないためにヘルプが必要な場合は、CSSを本文ではなく頭に配置すると、自分自身や助けを求める人にとってトラブルシューティングが大幅に改善されます。
2つの矛盾する答え:
リンクタグのMDN ページから:
<link>
要素は、のいずれかで発生することができ<head>
、または<body>
それは身体-OKでリンクタイプを有するかどうかに応じて、要素。たとえば、スタイルシートのリンクタイプはbody-okであるため<link rel="stylesheet">
、本文ではa が許可されます。ただし、これはベストプラクティスではありません。<link>
要素を体のコンテンツから分離して、頭の中に入れる方が理にかなっています。
CSS The Definitive Guide(4th Edition / 2017)page 10より
外部スタイルシートを正常にロードするには、リンクをヘッド要素内に配置する必要がありますが、他の要素には配置できません。