CSS スタイルシート: リンクまたは埋め込み

CSS スタイル シート、 を使用して別のファイルを呼び出す必要がありますか、それとも ... を使用してページ内に埋め込む必要がありますか?または、これら 2 つの方法をどのように使用するのでしょうか?

Ajie の w3cn で、彼は次のように述べています:

コンテンツの引用 以前は、通常、スタイル シートを使用するには次の 2 つの方法を使用していました: ページ内方法: ページ コードの先頭領域にスタイル シートを直接記述する。これと同様: 外部呼び出しメソッド: スタイルを記述します。シート 別の .css ファイルで、ページの先頭領域で次のようなコードでそれを呼び出します。 Web 標準に準拠したデザインでは、ページを変更せずに .css ファイルのみを変更するだけでページのスタイルを変更できるのは明らかです。すべてのページが同じスタイル シート ファイルを呼び出す場合、1 つのスタイル シート ファイルを変更すると、すべてのファイルのスタイルが変更される可能性があります。

Ajie が の使用を強く推奨していることがわかります。 Ajie の言葉に付け加えると、 を使用する利点は、スタイル シートを変更するのに便利なだけでなく、ユーザーの閲覧速度が向上することです。ユーザーがスタイル シートにリンクされているページを初めて開くと、スタイル シートがローカル キャッシュに自動的にダウンロードされます。ユーザーが別のページを開いたときに、このページも同じスタイル シートにリンクされている場合、関連するファイルがキャッシュから読み取られるため、閲覧が高速化されます。

しかし、私はこの状況にも遭遇しました。ネットワークがスムーズでない場合、ページを開いた後、リンクされたスタイルシートが正常に読み込まれないことがあります。この場合、ページ上のテキストの色、サイズ、その他のスタイルが表示されなくなるだけでなく、さらに問題となるのは、ページ全体のレイアウトが崩れてしまう可能性があることです。

たとえば、Macromedia.com を開いたときに、おそらく bt バーに人がたくさんいたため、会社のネットワークに問題が発生しました。 。 。結果ページはスタイル シートなしで表示され、見慣れたレイアウトは表示されなくなり、携帯電話で Web サイトを閲覧するのと同じように、すべてのコンテンツが上から下に配置されます。すべてのコンテンツは引き続き表示されますが、この新しいレイアウトに慣れるまでに時間がかかり、閲覧中に滑らかでない感覚がありました。

Kingsoft Online のホームページを作成していたとき (以前のバージョンは表示されなくなりました)、すべてのスタイルをページの 領域に埋め込みました。ホームページは Web サイトの中で最もアクセスされるページであり、高い信頼性を確保する必要があります。また、埋め込まれているのはホームページのスタイルシートのみで、他のページは引き続き を使用しているため、スタイルを変更する際の負担が大きくなりません。

週末にamaoagouのホームページを作成していたとき、スタイルをさらに計画しました。 #head や #left などのレイアウト関連のスタイルをページ内に埋め込み、他のスタイルをリンクさせました。

要約すると:

方法 1: ホームページは完全に埋め込まれており、他のページはリンクされています。利点: これにより、ネットワーク状態が悪い場合でもホームページを正しく表示できます。欠点: スタイルを変更する場合、外部スタイル シートとホームページの埋め込みスタイル シートを変更する必要があります。 方法 2: レイアウトを担当するスタイルを他のスタイルとは別に記述します。ホームページにはレイアウト スタイルが埋め込まれており、他のスタイルへのリンクは両方のスタイル セットへのリンクを使用します。利点: スタイルを変更する場合、作業負荷は最初の方法よりも小さくなります。ネットワークの状態が良くない場合、ホームページの見栄えは完全に保証できませんが、少なくともレイアウトが乱雑になることはありません。 会社の製品に関する小さなトピックなど、作成されたページが基準を満たしていない場合、リーダーはオンラインでのトピックのスピードを確保するために表を使用してページを作成することを要求します。すべてのページで使用されるスタイル: リンク。この 1 ページでのみ使用され、何度も使用されるスタイルの場合: を埋め込みます。このページで一度だけ使用するスタイルの場合: を埋め込むか、単純に style="..." を直接記述します。

上記は CSS スタイル シートです。リンクまたは埋め込みコンテンツについては、PHP 中国語 Web サイト (www.php.cn) に注目してください。

php 8、私も来ます

ウェブサイトのレイアウトを 30 分で学ぶ

ビデオチュートリアルに精通したOracleの入門

あなたの最初のUNI-APPコード

ゼロからアプリの起動までフラッター

兄弟連新版Linuxビデオチュートリアル

AXURE 9 ビデオチュートリアル (プロダクトマネージャーのインタラクティブな製品設計 UI に適しています)

基礎能力ゼロ PS ビデオチュートリアル

16日間のUIビデオチュートリアル

PS テクニックとスライステクニックのビデオチュートリアル

アリクラウド環境構築およびプロジェクトオンラインビデオチュートリアル

コンピュータネットワークの概要 - プログラマが身につけるべき基礎知識

プログラマーのための基本チュートリアル - HTTP プロトコルの説明

Websocket ビデオチュートリアル

CSS スタイルシート: リンクまたは埋め込み