cssファイルはどこに置けばいいのでしょうか？

css ファイルは、HTML の先頭の head に配置する必要があります。理由: ブラウザーは HTML ドキュメントを上から下に解析します。CSS が下に配置されている場合、ページは徐々にレンダリングできますが、CSS がダウンロードされて解析された後、レンダリングされたテキストと画像をレンダリングする必要があります。新しいスタイルに従って再描画され、ユーザー エクスペリエンスが悪くなります。

このチュートリアルの動作環境: Windows 7 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター。

css ファイルは、HTML の先頭の head に配置する必要があります。

#why?

<link rel="stylesheet" href="home.css">

リンク タグの href (ハイパーテキスト参照) 属性は、ハイパーテキスト参照を表します。CSS が href 参照を使用すると、ブラウザはそれを認識します ドキュメントは CSS であり、並行してダウンロードされます。現在のドキュメントのロードは停止しません。HTML をロードして DOM ツリーを生成するときに、DOM ツリーを同時にレンダリングできます。これにより、ちらつき、白い画面、または混乱を防ぐことができますレイアウト。

最も理想的な状況では、ブラウザがダウンロードした CSS を徐々にレンダリングし、徐々にページをユーザーに表示することが望まれます。ただし、スタイルが変更されたときにページ要素が再レンダリングされるのを避けるために、ブラウザーはコンテンツの段階的なレンダリングをブロックし、すべてのスタイルが読み込まれるのを待ってからページを一度にレンダリングします。

CSS ファイルが一番下に配置されている場合、ブラウザはコンテンツの徐々にレンダリングを妨げます。ブラウザが最後の CSS ファイルがダウンロードされるのを待っている間、「白い画面」が表示されます (新しい接続が開かれ、テキストが最初に表示され、画像が最後に表示され、スタイルが最後に表示されます)。これは非常に深刻です。ネットワーク速度が非常に遅い場合、CSS のダウンロード時間が比較的長くなり、当然のことながらユーザーに長時間「白い画面」が表示され、ユーザー エクスペリエンスが非常に悪くなるからです。

CSS ファイルが一番上に配置されるのは、配置順序によってダウンロードの優先順位が決まり、さらに重要なことに、ブラウザのレンダリング メカニズムが決まるためです。

css は読み込みプロセス中の DOM ツリーの生成には影響しませんが、Render ツリーの生成には影響し、それがレイアウトに影響します。したがって、一般的に言えば、リンク タグDOM ツリーは上から下に解析され、CSS スタイルは非同期で読み込まれるため、スタイルの要素はできるだけヘッドに配置する必要があります。この場合、DOM ツリーの下の body ノードを解析して CSS スタイルを読み込みます。可能な限り並列化できるため、Render ツリーの生成速度が向上します。

CSS を一番下に置くと、ページは徐々にレンダリングされます。ただし、CSS がダウンロードされて解析された後、レンダリングされたテキストと画像を新しいスタイルに従って再描画する必要があります。悪いユーザーエクスペリエンスです。

(学習ビデオ共有: css ビデオ チュートリアル)

以上がcssファイルはどこに置けばいいのでしょうか？の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。