CSS ファイルをインポートする 4 つの方法 (インライン、インライン、外部、インポート) の詳細な説明

CSS インポート方法 - インライン

スタイルタグ属性を通じて、CSSのキーと値のペアがタグに直接書き込まれます。

<p style="幅: 100px;高さ: 100px;背景: 赤;"></p>
 <!--注: このコードは、幅と高さが 100 ピクセルで背景が赤いコンテナを表します-->

CSS インポート方法 - 埋め込み (embedded)

スタイル タグを使用して、CSS 属性名と属性値を HTML ページに導入します。通常、スタイル タグは head タグ内に配置されます。 CSS スタイルをヘッド タグに配置する必要があるのはなぜでしょうか。コードは上から下に実行されるためです。構造が最初に読み込まれると、ユーザーには美化されていない無味乾燥なコンテンツが表示されます。スタイルを最初に読み込み、次に構造を読み込むのは、子供が服を着て生まれてくるようなものです。

 <ヘッド>
     <スタイル タイプ="text/css">
        p{
             幅: 100px;高さ: 100px;背景: 赤;
         }
     </スタイル>
 </head>

上記のコードも、幅と高さが 100 ピクセルで背景が赤いコンテナーを記述していますが、埋め込み方式で導入されています。

チェーン以外のCSSインポート方法

リンクタグを通じてHTMLページに独立したCSSファイルを導入する

<link rel="スタイルシート" type="text/css" href="./style.css">

rel="stylesheet" は現在のページと href で指定されたドキュメントの関係を記述します。つまり、href でリンクされたドキュメントは新しいスタイル テーブルであり、type="text/css" は MINME タイプ (CSS ドキュメント) を指定します。 href="./style.css"はリンクされた文書の場所を指定します

CSSインポート方法

<スタイル タイプ="text/css">
     @import url("style.css");
</スタイル>

@import url を通じて別の CSS ファイルを導入します。url("style.css") はリンクされたドキュメントの場所を指定します。

これで、CSS ファイルのインポート方法 (インライン、インライン、外部、インポート) に関する記事は終了です。CSS インポート方法の詳細については、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。