CSS スタイルシートの使用について詳しく説明します: link/embed_CSS/HTML

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

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

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

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

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

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

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

要約すると:

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

php 8、私も来ます

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

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

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

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

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

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

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

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

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

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

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

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

Websocket ビデオチュートリアル

CSS スタイルシートの使用について詳しく説明します: link/embed_CSS/HTML

CSS スタイル シートの使用について詳しく説明します: link/embed_CSS/HTML

CSS スタイルシートの使用について詳しく説明します: link/embed_CSS/HTML