CSSをインポートする方法に関する詳細な洞察の要約

CSS の開発履歴についてはここでは紹介しません。ブログを書いている理由の 1 つは、フロントエンドに不慣れで、私と同じように苦労しているパートナーを助けたいからです。私が書く投稿がパートナーの役に立つことを願っています。2 つ目の理由は、これらの投稿が私自身の知識の要約とも見なせるからです。今のところ特に順番はありませんが、CSS から始めて順番に書いてみてください。

1. CSSイニシャル

概念: CSS は、カスケーディングスタイルシートまたはカスケーディングスタイルシートと呼ばれます。スタイルは HTML 要素の表示方法を定義します。スタイルは通常、スタイルシートに保存されます。

機能: CSS は HTML に基づいており、豊富な機能を提供し、異なるブラウザごとに異なるスタイルを設定することもできます。 CSS は主に、HTML ページ内のテキストコンテンツ (フォント、サイズ、配置など)、画像の外観 (幅と高さ、境界線のスタイル、余白など)、ページのレイアウトと外観の表示スタイルを設定するために使用されます。

2. CSS構文

CSS 構文は、セレクターと 1 つ以上の宣言という 2 つの主要な部分で構成されます。各宣言は属性と属性値で構成されます。

簡単に言えば、スタイル構文はセレクター、属性、属性値の 3 つの部分で構成されます。

例えば：

セレクター: セレクターは、ページ内のどのオブジェクトにスタイルを適用するかをブラウザに伝えます。これらのオブジェクトには、特定のタグ、すべての Web ページオブジェクト、指定されたクラスまたは ID 値などがあります。ブラウザはこのスタイルを解析し、セレクターに従ってオブジェクトの表示結果をレンダリングします。つまり、セレクターは通常、スタイルを変更する HTML 要素であり、セレクターはスタイルを設定するタグを選択する方法です。このタグを選択した後でのみ、CSS スタイルを設定できます。

宣言: 宣言は 1 つ以上で、セレクターによって指定されたオブジェクトをレンダリングする方法をブラウザーに指示します。宣言は属性と属性値で構成され、セミコロンは宣言の終了を示すために使用されます。スタイルでは、最後の宣言のセミコロンは省略できます。すべての宣言は、セレクターの後に続く 1 組の中括弧内に配置されます。

CSS の用途と CSS 構文が複数の部分で構成されていることがわかったので、次に疑問となるのは、CSS をどのように使用し、CSS スタイルをどこに記述するかということです。次に、CSS をどこに記述するかについて説明します。

3. CSSの導入方法

HTML に CSS スタイルを導入する方法には、インラインスタイルシート、内部スタイルシート、外部スタイルシートの 3 つがあります。

3.1 インラインスタイルシート

インラインスタイルシートは、インラインスタイルシートまたはインラインスタイルシートとも呼ばれます。インラインスタイルシートは、CSS コードと HTML コードを同じファイルに配置します。インラインスタイルを使用する場合は、関連するタグで style 属性を使用する必要があります。 Style プロパティには任意の CSS プロパティを含めることができます。

構文: <tag name style="属性 1: 属性値 1; 属性 2: 属性値 2; 属性 3: 属性値 3; ">コンテンツ</tag name>

例えば：

<!DOCTYPE html>
<html>
    <ヘッド>
        <title>インライン スタイル シート</title>
    </head>
    <本文>
        <h1 style="color:red;">私はインライン スタイル シートです。インライン スタイル シートまたはインライン スタイル シートと呼ぶこともできます</h1>
    </本文>
</html>

上記のコードからわかるように、<h1> タグに style 属性を追加し、style 属性に設定した CSS 属性は color 属性で、属性値は red です。表示効果は次のようになります。

インラインスタイルシートは使いやすく、理解しやすいです。実際、どの HTML タグにもスタイル属性があり、これを使用してインラインスタイルを設定します。インラインを使用する場合は、次の点に注意してください。

（１）スタイルは実際にはタグの属性です。

（２）スタイル属性と属性値の間には英語のセミコロンである「;」を使用します。

（３）複数の属性値は英語ではセミコロン「；」で区切られます。

（4）インラインスタイルは現在のタグとその中にネストされたサブタグのみを制御できるため、コードの冗長性が生じやすくなります。

インラインスタイルは単一のタグ内で定義されます。ウェブサイトの場合、冗長なコードが多く、冗長なコードが多いため、CSS スタイルが変更されるたびに特定のタグで修正する必要があり、ウェブサイトの保守性が非常に悪くなります。さらに、インラインスタイルではスタイルと構造が分離されません。

3.2. 内部スタイルシート

内部スタイルシートは埋め込みスタイルシートとも呼ばれ、HTML ドキュメントの head タグ内に記述され、スタイルタグで定義される CSS コードです。

文法：

<!DOCTYPE html>
<html>
<ヘッド>
    <title>内部スタイルシート</title>
    <スタイル>
        セレクタ{
            属性 1: 属性値 1;
            属性2: 属性値2;
        }
    </スタイル>
</head>
<本文>
</本文>
</html>

例えば：

<!DOCTYPE html>
<html>
<ヘッド>
    <title>内部スタイルシート</title>
    <スタイル>
        p{
            色:ピンク;
        }
    </スタイル>
</head>
<本文>
    <p>私は内部スタイルシート、つまり埋め込みスタイルシートです</p>

</本文>
</html>

上記のコードからわかるように、p タグには内部スタイルシートが使用され、フォントの色はピンク色が追加されています。表示効果は次のようになります。

内部スタイルシートでは、スタイルタグに type 属性があり、その値は text/css です (つまり、type="text/css" です)。これは HTML5 では省略できます。内部スタイルシートの使用には 2 つの欠点があります。1 つ目は、内部スタイルシートは現在のページしか制御できないことです。2 つ目は、内部スタイルシートが構造とスタイルを分離しないことです。

3.3. 外部スタイルシート

外部スタイルシートは、リンクされている、または外部リンクされているとも呼ばれます。いわゆる外部スタイルシートとは、CSS コードと HTML コードを別々のファイルに分け、HTML ドキュメント内でリンクタグまたは @import を使用して CSS スタイルシートを参照することです。外部スタイルシートのファイル拡張子は .css であり、ファイルには HTML タグを含めることはできません。

外部スタイルシートを導入するケースは 2 つあります。

最初のケースは、head タグ内の link タグ内に配置されます。構文は次のとおりです: <head><link rel="stylesheet" type="text/css" href="1.css"></head>

例えば：

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml">
<ヘッド>
    <タイトル></タイトル>
    <!--HTML ページで index という名前の CSS ファイルを参照します-->
    <link href="index.css" rel="スタイルシート" type="text/css" />
</head>
<本文>
    <div></div>
</本文>
</html>

2 番目のケースは、head タグ内の style タグに配置するか、スタイルシートに直接記述することです。構文は次のとおりです。

<スタイル>
    1.cssをインポートします。
    @import '1.css';
    @import "1.css";
    urlをインポートします(1.css);
    @import url('1.css);
    @import url("1.css");　
       </スタイル>

注: 上記の構文には「1.css」の形式が 6 つあります。つまり、@import コマンドを使用して外部スタイルシートをインポートする方法が 6 つあるということです。

例えば：

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml">
<ヘッド>
    <タイトル></タイトル>
   <スタイル>
        @import url("index.css");
    </スタイル>
</head>
<本文>
    <div></div>
</本文>
</html>

外部スタイルシートを導入するために、link タグを使用するか、@import を使用するか迷うかもしれません。リンクタグと@importの違いは次のとおりです。

違い 1: 従属関係の観点では、link タグは CSS ファイルの読み込み以外にも RSS の定義、rel 接続属性の定義など、さまざまなことを実行できる HTML タグです。一方、@import は CSS によって提供されるメソッドであり、CSS ファイルの読み込みにのみ使用できます。

違い 2: 読み込み順序に関して言えば、ページが読み込まれるときに、link タグによって導入された CSS ファイルが同時に読み込まれますが、@import によって導入された CSS はページが読み込まれた後に読み込まれます。

違い 3: 互換性の点では、link タグは HTML タグであり、互換性の問題はありません。一方、@import は CSS2.1 で提供される構文であり、IE5 より前のブラウザーではサポートされていません。

違い 4: DOM の制御性に関して、JavaScript を使用して DOM を制御してスタイルを変更する場合、link タグのみを使用でき、@import メソッドは使用できません。

違い 5: 重みに関しては、link によって導入されるスタイルは @import によって導入されるスタイルよりも重要です。（追記：重みに関する知識はここでは詳しく解説しません。後ほど詳しく説明します）

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

<<: MySQL における EXISTS と IN の使用法の比較

>>: Docker JVM メモリ使用量の表示

CSSをインポートする方法に関する詳細な洞察の要約

Docker デプロイメント Consul 構成プロセスの分析

ソフトウェア 404 と 404 エラーとは何か、またそれらの違いは何ですか

IE6/7 で絶対配置された要素が不可解に消えたりブロックされたりする問題を解決する方法

キーボード上の各種特殊記号の英語読み方（知識の普及）

HTML 画像 img タグ_Powernode Java アカデミー

mysql5.7 ユーザー権限の作成、ユーザーの削除、権限の取り消し

vue+element-uiはヘッドナビゲーションバーコンポーネントを実装します

vue3 再帰コンポーネントカプセル化の全プロセス記録

Mysqlのマージ結果と水平スプライシングフィールドの実装手順

dockerfile-maven-plugin 使用ガイドの概要

推薦する

JavaScript で最も高速なループはどれですか?

ウェブサイトのデザイン体験のための7つの異なるカラースキーム

Linux (Centos7) での redis5 クラスターの構築と使用方法の詳細な説明

携帯電話向けウェブページ作成のヒント

MySQL ストアド関数（カスタム関数）の定義と使用方法の詳細な説明

JavaScript のクロージャによって発生する問題を回避する

デザインにおけるユーザーエクスペリエンスの背後にある8つのユーザー本能について話す

node-media-serverを使用してシンプルなストリーミングメディアサーバーを構築する

圧縮パッケージを使用して Linux 環境に JDK 13 をインストールする方法

Vueは宮殿のグリッド回転抽選を実現します

HTML の doctype とエンコーディングに関する簡単な説明

RedisとMySQLの違いを簡単に説明してください

CSSの固定位置属性の詳細な説明

GaussDB for MySQL パフォーマンス最適化の詳細な説明

Windows で MySQL 5.7.17 圧縮バージョンをインストールするときに遭遇する落とし穴