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 の自動デプロイメントの問題について (落とし穴を避ける)

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

怖いハロウィーン Linux コマンド

Oracle VM VirtualBox の CentOS7 オペレーティングシステムのインストールチュートリアル図

Docker を使用して ELK ログシステムを構築する例

ova ファイルを VMware にインポートする際の落とし穴の概要

Axiosは繰り返しのリクエストをキャンセル

Vue モバイルプロジェクトでページキャッシュを実装する方法のサンプルコード

HTML初心者や初級者向けの提案。専門家は無視してかまいません。

HTML で入力ボックスに純粋な数字のみを入力するように制限する方法

React.js フレームワーク Redux 基本ケースの詳細な説明

ウェブデザイナーもウェブコーディングを学ぶ必要がある

推薦する

デザイナーと開発者に役立つ 9 つの超実用的な CSS のヒント

MacOS で Docker を使用して MySQL マスタースレーブデータベースを作成する方法

幅の比率に応じて高さを変えるCSSを実装するいくつかの方法

uniapp 要素ノードスタイルの動的変更の詳細な説明

ReactプロジェクトでのTypeScriptの実装

MySQL データベースにおける中国語文字化け問題の詳細な説明

MySQLで数千万のテストデータを素早く作成する方法

dockerを使用してGrafana+Prometheus構成をデプロイする

Linux に nginx をインストールする方法

CSS による要素の中央揃えの原理の分析

一般的なブラウザ互換性の問題（概要）

HTML CSS の 3 つの一般的なスタイルセレクター

データベースを削除せずにMySQLのすべてのテーブルを素早く削除する方法

Tomcat セキュリティ仕様 (Tomcat セキュリティ強化と仕様)

URL を入力すると、バックグラウンドでは具体的に何が起こるのでしょうか?