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

Alibaba Cloud Server に MySQL データベースをインストールする詳細なチュートリアル

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

Alibaba Cloud Server に MySQL データベースをインストールする詳細なチュートリアル

Nginx Rewrite の使用シナリオと設定方法の分析

MySQL FAQ シリーズ: ibdata1 ファイルのサイズが突然増加しないようにする方法

MySQL が重複データを挿入するのを防ぐ 3 つの方法

MySQL がデュアルマスターで構成されている場合にデータループの競合を回避する方法

MySQL Bツリーインデックスとインデックス最適化の概要についての簡単な説明

Nginx ロケーションマッチングルールの例

MySQL 5.7.18 のダウンロードとインストールの詳細な手順

WeChatアプレットは写真の撮影とアルバムからの写真の選択を実現します

Vue は Tencent TIM インスタントメッセージングを統合します

推薦する

MySQL でデータテーブルを作成し、主キーと外部キーの関係を確立する方法の詳細な説明

Dockerデータを完全にクリーンアップする方法

ニューススタイルのウェブサイトデザイン例25選

ウェブデザイン実践者必読のキャリアプラン

ホストがアクセスできるようにMySQLの権限を変更する方法

テーブルパーティションとパーティション分割とは何ですか?MySqlデータベースパーティションとテーブルパーティション分割方法

Vue+Openlayer バッチ設定フラッシュポイント実装コード (ポストレンダリングメカニズムに基づく)

Dockerコミットの使い方の詳しい説明

CocosCreatorで複数のタイマーを使用する方法の詳細な説明

HTML 基本ノート (推奨)

Linux seqコマンドの使い方の詳しい説明

Dockerfile を使用したカスタムイメージの構築の実装

突然外部ネットワークからDockerにアクセスできなくなる問題の解決方法

Vue.js と MJML でレスポンシブなメールを作成する

アニメーションの再生と一時停止を制御するための CSS のヒント (非常に実用的)