HTML ドキュメントに CSS を埋め込む一般的な 3 つの方法

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

1. 埋め込み

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

コードをコピー

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

<ヘッド>
<スタイルタイプ="text/css">
h1{色:赤}
p{色:青}
</スタイル>
<ヘッド>

2. インライン

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

コードをコピー

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

<p style="color:#FFF;font-weight:bold;">インラインスタイル</p>

3. 外部参照

外部参照とは、HTML ドキュメント自体には CSS スタイルが含まれず、ドキュメントの表示を定義するために外部 CSS ファイルを動的に参照することを意味します。

1. スタイルシート処理命令文を使用する

HTML文書の先頭にスタイルシートの指示を記述する

コードをコピー

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

<?xml-stylesheet type="text/css" href="mystyle.css" ?>
<html>
指示文
</html>

ただし、このディレクティブの使用をサポートしているのは、XML 構文形式で記述された HTML ドキュメントのみです。ほとんどのブラウザでは、XHTML または XML 形式で保存した場合にのみ有効であり、JS ではこの種の CSS を処理できないため、推奨されません。

2. @importコマンドを使用する

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

コードをコピー

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

<ヘッド>
<スタイルタイプ="text/css">

</スタイル>
</head>

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

3. リンク要素を使用する

コードをコピー

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

<ヘッド>
<link rel="stylesheet" href="cssのurl" type="text/css" >
</head>

これは最も一般的に使用される方法でもあります。

4. HTTPメッセージヘッダーを使用してスタイルシートにリンクする

HTTP メッセージヘッダーのリンクフィールドを使用して、外部スタイルシートにリンクできます。

コードをコピー

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

リンク:<mystyle.css>;rel=スタイルシート;
//<link rel="stylesheet" href="css的url" type="text/css" > と同等

HTTP ヘッダーでは複数のリンクを使用して複数のスタイルシートをリンクすることができ、HTTP ヘッダー内のリンクは HTML ドキュメント内のリンク (head 要素内) よりも優先されます。