CSS スタイルを導入する 3 つの方法

スタイルシートはさまざまな場所に配置され、さまざまな効果範囲を持ちます。スタイルシートは大きく分けてインラインスタイルシートと外部スタイルシートに分けられ、ページ上に配置する方法、外部参照する方法、外部インポートする方法があります。
1. インライン スタイル シート
インライン スタイル シートは、スタイル シートのルールを < HEAD> と < /HEAD> の間に配置します。これにより、スタイル シートは現在の HTML ページ全体に影響します。
インライン スタイル シートには、HMTL ページ内の特定のマークを個別に指定し、そのスタイルを指定する直接挿入方法も含まれています。これは次のように記述できます。

   < Table style=" font-size:10pt; color:blue;">

テーブル内の文字サイズを 10pt に定義し、色は青になります。

2. 外部スタイル シート
多くの場合、同じ面倒で複雑なスタイル シートが < /HEAD> に挿入されます。私たちが欲しいもの。
スタイルシートを作成して、同じスタイルを異なるページに実装します。これは、外部スタイルシートを導入することで実現できます。また、外部スタイル シートが変更されると、そのスタイル シートを参照する各 HTML ページのスタイルもそれに応じて変更され、それぞれを手動で変更する必要はありません。
外部スタイル シートとは、拡張子 .css を持つ完全に独立したテキスト ファイルを作成することを指します。ファイルの内容は、関連する HTML 言語を除いて、スタイル シート情報とともに入力されます。
たとえば、外部スタイル シートに次のように入力します。

< STYLE> タグだけが欠落しており、外部スタイル シートの残りの記述は変更されていないことがわかります。入力後、example.cssとして保存します。
外部スタイルシートを参照するには 2 つの方法があります。
(1) 外部スタイル シートにリンクするには、< LINK> タグを使用します。

HREF を使用します。パス情報が含まれています。これは、スタイル シート ファイルが HTML ドキュメントと同じディレクトリにあることを意味します。
HTML ドキュメントは複数の外部スタイル シートを参照できます。例:

   < LINK REL=STYLESHEET HREF="example.css">
   < LINK REL=STYLESHEET HREF="style/other.css">

最初にリンクされた example.css はドキュメントのデフォルトのスタイル シートです。スタイル定義に矛盾がある場合は、前者が最初に満たされる必要があります。 。

(2) @IMPORT を使用して、ページに外部スタイル シート情報をインポートします。 < STYLE> タグ内にあります。例:

< STYLE TYPE="text/css"> 
@import "example.css"; 
@import "style/other.css"; 
< /STYLE>

もちろん、このメソッドは複数の外部スタイルシート情報を同時に参照することもできます。スタイルシートの優先順位は、インポートの順序に従って設定されます。

これら 3 つの方法は混合して使用することもできます。つまり、1 ページ内で同時に使用することもできます。ただし、スタイルシート情報のルールが多すぎると、競合が発生する可能性が高くなります。例えば、引用されているスタイルシート情報にはH1タイトルの設定がいくつかありますが、どれがメインでしょうか？このとき、どのスタイルシートが最初に参照されるかによって、どちらが優先されるかが決まります。したがって、複雑なスタイルシート情報を扱うときは、スタイルシートの競合の可能性を十分に考慮し、競合をより適切に解決し、それらを調整して一致させる必要があります。

CSS スタイルを導入する 3 つの方法に関するその他の関連記事については、PHP 中国語 Web サイトに注目してください。