HTML ドキュメントに CSS を埋め込む 3 つの一般的な方法_HTML/Xhtml_Web ページの作成

CSS は一般に、次の 3 つの方法で HTML で定義されます。 埋め込み、リンク、インライン

1. 埋め込み

HTML スタイル要素を使用してドキュメント内の CSS スタイルを定義します。 。

コードをコピーします コードは次のとおりです。 > h1{color:red} p{color:blue} 🎜>

2. インライン 各 HTML 要素には、スタイルを直接定義できる style 属性が含まれています。このスタイルは、この要素のコンテンツにのみ適用でき、同じ名前の別の要素には影響しません。

コードをコピー コードは次のとおりです: インライン スタイル

3. 外部参照 外部参照は HTML を参照しますdocument CSS スタイルは含まれませんが、外部 CSS ファイルを動的に参照してドキュメントのプレゼンテーションを定義します。 1. スタイルシート処理命令文を使用します

HTML文書の先頭にスタイルシート処理命令文を記述します

コードをコピー コードは次のとおりです: 命令ステートメント

ただし、xhtml または xml 形式で保存された場合にのみ有効です。 JS はこの種の CSS を処理できないため、使用することはお勧めできません。

2. @import コマンドを使用します スタイル要素間で @import コマンドを使用して、外部 CSS ファイルをインポートします

コードをコピーします コードは次のとおりです: @import "mystyle.css"; --> &lt ;/head>

@import ルールはすべてのルールの前に指定する必要があります。パラメータは CSS ファイルの URL アドレスです。 CSS ファイルで @import ディレクティブを使用して、別の CSS ファイルをインポートすることもできます。

3. リンク要素を使用します

コードをコピーします

コードは次のとおりです。 > > これも最も一般的に使用される方法です。 4. HTTP メッセージ ヘッダーを使用してスタイル シートにリンクします。 HTTP メッセージ ヘッダーのリンク フィールドを使用して、外部スタイル シートにリンクできます。

コードをコピー

コードは次のとおりです:

link: ; rel=stylesheet; // と同等HTTP ヘッダー リンク。これにより複数のスタイル シートがリンクされます。HTTP ヘッダー内のリンクは、HTML ドキュメント (head 要素内) 内のリンクよりも優先されます。