CSS (1): CSS を理解する

1.CSSとは

CSS カスケード スタイル シート (正式な英語名: Cascading Style Sheets) は、HTML や XML などのファイル スタイルを表現するために使用されるコンピューター言語です。 CSS3 は CSS2 のアップグレード バージョンで、3 は単なるバージョン番号です。CSS2.1 に基づいて多くの強力な新機能が追加されています。 現在、主流のブラウザである chrome、safari、firefox、opera、さらには 360 も CSS3 のほとんどの機能をサポートしており、IE10 も CSS3 を完全にサポートし始めます。ブラウザーが異なれば、必要なプレフィックスも異なる場合があります。これは、CSS プロパティまたはルールがまだ W3C 標準の一部になっておらず、ブラウザのプライベート プロパティであることを意味します。ただし、ブラウザの新しいバージョンでは現在プレフィックスは必要ありませんが、前方互換性を向上させるためにはプレフィックスが依然として不可欠です。

リーリー

Transform は CSS3 の新しい属性であり、各ブラウザーはそれをサポートするためにプレフィックスを追加する必要があります。

2.CSSでできること

• スタイルは、HTML 要素の表示方法を定義します。
• CSS は、わずか数行のコードで、以前は画像やスクリプトを使用する必要があった多くの効果やアニメーション効果さえも実現できます。たとえば、丸い角、画像の境界線、テキストの影とボックスの影、トランジション、アニメーションなどです。
• CSS はフロントエンド開発者の設計プロセスを簡素化し、より柔軟なページ レイアウトとより速いページ読み込み速度を提供します。
• サイト上のすべての Web ページのスタイルは CSS ファイルを使用して制御でき、CSS ファイル内の対応するコードが変更される限り、サイト全体のすべてのページがそれに応じて変更されます。
• 目的: パフォーマンスを構造から分離します。

リーリー

リーリー

3.CSS構文構造

CSS ルールは 2 つの主要な部分で構成されます。セレクター (通常はスタイルを変更する HTML 要素) と 1 つ以上の宣言です。各宣言はプロパティと値で構成されます。プロパティは、設定するスタイル属性です。各属性には値があります。プロパティと値はコロンで区切られます。

リーリー

4.CSSの導入方法

スタイルシートを導入するには3つの方法があります:

• 外部スタイルシート
• 内部スタイルシート
• インラインスタイル

4.1 外部スタイルシート

外部スタイルシートは、多くのページにスタイルを適用する必要がある場合に最適です。外部スタイル シートを使用すると、1 つのファイルを変更するだけでサイト全体の外観を変更できます。各ページは、 タグを使用してスタイル シートにリンクします。 (ドキュメントの) head 内の タグ:

リーリー

4.2 内部スタイルシート

単一のドキュメントに特別なスタイルが必要な場合は、内部スタイルシートを使用する必要があります。内部スタイルシートは、

リーリー

4.3 インラインスタイル

インラインスタイルとは、HTMLタグのstyle属性に直接CSSスタイルを記述することを指します。この方法で CSS を導入する場合、セレクターを記述する必要がないことに注意してください。

リーリー

4.4 3つの導入方法の優先度比較

同じHTML要素が複数のスタイルで定義されている場合、どのスタイルが使用されるのでしょうか？一般に、すべてのスタイルは次のルールに従って新しい仮想スタイルシートにカスケードされます。番号 4 が最も高い優先順位を持ちます。

1. ブラウザのデフォルト設定
2. 外部スタイルシート
3. 内部スタイルシート ( タグ内にあります)
4. インライン スタイル (HTML 要素内)

したがって、インライン スタイル (HTML 要素内) の優先順位が最も高くなります。つまり、タグ内のスタイル宣言、外部スタイル シート内のスタイル宣言、またはブラウザー ステートメント内のスタイル (デフォルト) よりも優先されます。

5.CSSコードのコメント

/* で始まり */ で終わる CSS コードのコメント。

リーリー

6.CSSセレクター

CSS セレクターは、スタイルを設定する要素のパターンを選択するために使用されます。

6.1 ワイルドカードセレクター

* セレクターはすべての要素を選択します。 * セレクターは、別の要素内のすべての要素を選択することもできます:

リーリー

6.2 要素セレクター

いわゆる要素セレクターとは、Webページ内の既存のタグ名を名前として使用するセレクターを指します。

リーリー

6.3 グループセレクター

単一のタグにスタイルを指定するだけでなく、タグのグループに同じスタイルを定義することもできます。セレクターを区切るにはカンマを使用します。同じスタイルを使用する必要があるページ内の要素については、スタイルを 1 回記述するだけで済みます。

リーリー