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 メモリ使用量の表示

MySQL プロセス制御 IF()、IFNULL()、NULLIF()、ISNULL() 関数

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

MySQL プロセス制御 IF()、IFNULL()、NULLIF()、ISNULL() 関数

Vue3 Vue イベント処理ガイド

DIV共通属性コレクション

入力テキストボックスと画像検証コードの位置合わせの問題 (画像は常に入力より 1 つ上になります)

IE8は優れたエクスペリエンスを提供します: アクティビティ

Dockerコンテナの中国語言語パックの設定の問題を解決する

Apache FlinkCEP でタイムアウトステータス監視を実装するための詳細な手順

JavaScript を使って簡単な計算機を書く

mysql8.0.23 Linux (centos7) のインストールの完全かつ詳細なチュートリアル

Centos に MYSQL8.X をインストールするチュートリアル

推薦する

ハイパーリンクの幅と高さを直接設定できない問題の解決策

Web デザインにおける Less と More について語る (写真)

css3 flexレイアウト justify-content:space-between 最後の行は左揃えになります

HTML フォーム送信アクションと URL ジャンプアクションの違い

JavaScript 中断要求に対するいくつかの解決策の詳細な説明

JavaScript JSON.stringify() の使用法の概要

MySQL ストアドプロシージャで if ステートメントを使用する詳細な例

入力ボックスのカーソルサイズの表示が一貫していない問題の解決方法

VMwareでCentOSがインターネットにアクセスできない問題を素早く解決

タグのhref属性とonclickイベントの使用例

mysql MGR シングルマスターとマルチマスターモードの切り替えの知識ポイントの詳細な説明

MySQL データベースの基礎を始めるための一般的なコマンドの概要

Gokudōゲームにおけるフロントエンド知識のまとめ

Vue3 における親コンポーネントと子コンポーネント間の値の転送の詳細な説明

HTML テーブルタグチュートリアル (33): セルの垂直配置属性 VALIGN