CSSリンクと@importの違いの詳細な説明

HTML に CSS を追加するにはどうすればいいですか?

HTML で CSS を設定する方法は 3 つあります。

列をなして
埋め込み
インポートリンク
インポート-@import

1. インラインスタイル。つまり、html タグの style 属性に CSS を設定します。CSS コードの名前と値のペアはコロンで接続され、異なる CSS スタイルはセミコロンで区切られることに注意してください。この方法は表示やデバッグには便利ですが、構造とプレゼンテーションの分離の原則に違反するため、お勧めしません。ただし、読み込み速度の点では、これは 3 つの方法の中で最も高速です。信じられない場合は、Sina、NetEase、QQ、Sohu などのポータルサイトを参照してください。ほとんどのコンテンツページでは、CSS が Web ページに直接書き込まれています。

これはSinaのホームページです

2. 埋め込まれています。この方法は表示やデバッグには便利ですが、スタイルが多数ある場合には適していません。注意: <style> タグは <head> 内に配置する必要があります。

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
    <メタ文字セット="UTF-8">
    <title>ドキュメント</title>
        <スタイル タイプ="text/css">
            #私のDiv{
                 色：赤;
                 背景繰り返し:繰り返しなし;
                 フォントサイズ:18px;
            } 
       
        </スタイル>
</head>
<body> <div id="myDiv"> これは div です。</div>
</本文>
</html>

3. インポートリンク。インポートには 2 つの方法があります。1 つは <link> タグを使用する方法、もう 1 つは @import メソッドを使用する方法です。最初の紹介リンク

link: head タグ内に記述する必要があります。この方法では、外部 CSS スタイルシートを HTML に導入できるため、強くお勧めします。

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
    <メタ文字セット="UTF-8">
    <title>ドキュメント</title>
        <link rel="スタイルシート" styl="text/css" href="style.css">
</head>
<本文>       
         <div id="myDiv"> これは div です。</div>
</本文>
</html>

3. インポート-@import

@import: また、このメソッドは head タグ内で外部 CSS スタイルシートを HTML に導入できます。import と URL の間にスペースがあることに注意してください。

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
    <メタ文字セット="UTF-8">
    <title>ドキュメント</title>
        <スタイル タイプ="text/css">
            @import url("style.css");
        </スタイル>
</head>
<本文>       
         <div id="myDiv"> これは div です。</div>
</本文>
</html>

さらに、import は CSS スタイルシートで他のスタイルシートを導入するためにも使用できます。 CSS で直接記述します:

@import url("style.css")

@importの最適な書き方
@import を書くには、一般的に次の方法があります。
@import 'style.css' // Windows IE4/NS4、Mac OS X IE5、Macintosh IE4/IE5/NS4 は認識しません
@import "style.css" //Windows IE4/NS4、Macintosh IE4/NS4は認識しません
@import url(style.css) //Windows NS4、Macintosh NS4は認識しません
@import url('style.css') // Windows NS4、Mac OS X IE5、Macintosh IE4/IE5/NS4は認識しません
@import url("style.css") //Windows NS4、Macintosh NS4 は認識しません上記の分析から、@import url(style.css) と @import url("style.css") が、最も互換性の高いブラウザーで最適な選択であることがわかります。バイト最適化の観点から、@import url(style.css) が最も推奨されます。

link と @import の違い:

1.link は XHTML タグです。CSS を読み込むだけでなく、RSS などの他の定義もできます。@import は CSS カテゴリに属し、CSS のみを読み込むことができます。

2. リンクが CSS を参照する場合、ページが読み込まれると同時に読み込まれます。@import では、読み込む前にページが完全に読み込まれる必要があるため、通常は @import メソッドの使用はお勧めしません。

3.link は XHTML タグであり、互換性の問題はありません。@import は CSS2.1 で提案されたもので、それより低いバージョンのブラウザではサポートされていません。この観点から、@import メソッドの使用もお勧めしません。

4.link は、スタイルを変更するために DOM を制御するために Javascript を使用することをサポートしていますが、@import はそれをサポートしていません。

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

<<: Vueコンポーネントの動的コンポーネントの詳細な説明

>>: Jenkins + Docker + ASP.NET Core の自動デプロイメントの問題について (落とし穴を避ける)