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

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 タグにもスタイル属性があり、これを使用してインライン スタイルを設定します。インラインを使用する場合は、次の点に注意してください。

(1)スタイルは実際にはタグの属性です。

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

(3)複数の属性値は英語ではセミコロン「;」で区切られます。

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

推薦する

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

どの for ループまたは反復子がニーズに適しているかを知ることで、アプリケーションのパフォーマンス...

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

ウェブサイト構築におけるカラーマッチングは非常に特殊であり、ウェブサイトのテーマ、感情、雰囲気などの...

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

目次1. 簡単な説明2. クラスターを作成する手順2.1. ディレクトリを作成する2.2. ソースコ...

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

現在では多くの人がスマートフォンを使用していることを考慮すると、モバイル Web ページの書き方は、...

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

ストアド関数ストアド関数とは: SQL コードの一部をカプセル化し、特定の関数を完了して、結果を返し...

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

閉鎖による問題を回避するためのletについてオブジェクト指向の考え方を使用して、購入者情報の削除機能...

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

編集者注: この記事は、Teambition チームの @娄昊川 が寄稿したものです。Teambit...

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

node-media-server を使用するプロセスの一部を記録します。この記事の環境はWindo...

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

JDK とは何ですか?まあ、この質問がわからないのであれば、なぜこれをインストールするのか本当にわか...

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

Vueは宮殿グリッド回転抽選(CrossFireのxx転生に似ている)を実装しています。参考までに、...

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

文書タイプDoctype は、指示を解析するためにどのバージョンの HTML を使用するかをブラウザ...

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

MySQL はディスクに保存される永続的なストレージであり、取得には一定の IO が伴うことはご存じ...

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

モバイル アプリを開発する場合、Web サイトが特定の高さまでスクロールしたときにコンテンツの一部を...

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

目次背景インスピレーションは人生から生まれる速達配送の最適化原則GaussDB の最適化 (MySQ...

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

まず、Windows 64 ビット用の最新の MySQL 5.7.17 コミュニティ圧縮バージョンを...