ビデオ: CSS #09 ボックスモデルを理解しよう 2025
カスケーディングスタイルシート（CSS3 ）はそれをすべて伝えます。ページ階層の最上部のスタイルは、ページの下部にカスケードされます。階層の適切なレベルにスタイルを定義することで、そのスタイルが必要なすべての場所でそのスタイルを実装するために必要な作業を減らすことができます。 たとえば、タグで定義されたスタイルは、タグの子であるタグに流れます。レベルでスタイルを定義した場合は、そのスタイルを必要とするスタイルごとにスタイルを定義する必要があります。レベルで定義することで、カスケードスタイルの形式でショートカットを使用します。
カスケーディング・アーキテクチャを使用すると、ページに全体的に影響するスタイルを、特定の要素を定義するために使用される特定のスタイルより高いレベルで定義することを意味します。
たとえば、ページが主に単一のフォントに依存している場合は、タグでそのフォントを定義する必要があります。 DOM（Document Object Model）階層はドキュメントで始まり、ルート（タグ）に向かって移動し、その後にのみタグに分割されますが、タグは表示可能な最初の要素です。<！ - 2 - >
継承は別の形でもあります。 3つの異なる場所にスタイルを定義できます。その定義の場所は、そのスタイルの優先順位を変更します。
インライン（最優先）：-
インラインスタイル は、特定のオブジェクトに具体的に表示されます。そのオブジェクトだけを変更し、ドキュメント内または他のドキュメント内の他のオブジェクトは変更しません。インラインスタイルの検索と変更には時間がかかり、エラーが発生する可能性があるので、避けてください。 <！ - 9 - > 内部：
内部スタイル -
は、文書のタグの一部として表示されます。これは、ドキュメント内のすべてのオブジェクトに影響しますが、サイト上の他のドキュメントには影響しません。 内部スタイルを使用すると、特定のページに特別なピザを付けることができますが、そのスタイルがそのページに固有の場合にのみ内部スタイルを使用し、他の場所でそのスタイルを使用するつもりはありません。あなたは通常、そのような保証をすることはできませんので、可能な限り内部スタイルを避けるのが最善ですが、インラインスタイルよりも望ましいことです。 外部（最低優先度）： 外部スタイルが外部に表示されます。 CSSファイル。ドキュメントのタグを使用して、このファイルへの参照を作成する必要があります。スタイルは、にリンクされたすべての文書に影響します。 CSSファイル。
このアプローチを使用すると、更新が簡単になり、サイト全体が均一な外観になります。さらに、外部スタイルを使用することで、特別なニーズを持つ人々がニーズに合った別のスタイルシートを簡単に提供することができます。
-
複数のタグを使用して、必要な数の外部スタイルシートをページに関連付けることができます。このアプローチでは、さまざまなソースのスタイルを使用できるため、最小限の労力でページをフォーマットできます。 外部スタイルシートは、表示順に処理されます。 2つの場合。 CSSファイルには、同じプロパティを変更する同じスタイル名が含まれています。最後に処理されるスタイルは、優先順位を持つスタイルです。
考慮する最後の継承レベルはセレクタ自体です。セレクタは、他のオブジェクトに含まれるオブジェクトまたは特殊な条件を満たすオブジェクトに対してのみ動作します。特定のセレクタは、ジェネリックセレクタによって提供される設定を常に上書きするため、必要に応じてこのテクニックを使用してください（サイト上のすべてのファイルで特定の変更をすべて見つけようとする）
セレクタが具体的であるほど、優先度は高くなります。ただし、セレクタのレベルがドキュメント内でどのように影響するか、およびスタイルが定義されている方法を全体像の一部として考慮する必要があります。
