web-dev-qa-db-ja.com

CSSの「カスケード」の意味は何ですか?

CSSの「カスケード」という用語の正確な意味は何ですか?私はさまざまな見方をしているので、ここで尋ねます。例が役立ちます。

79
Wondering

このコンテキストでの「カスケード」とは、特定のHTMLに複数のスタイルシートルールを適用できるため、どの特定のスタイルシートルールをどのHTMLに適用するかを決定する既知の方法が必要であることを意味します。

使用されるルールは、より一般的なルールから必要な特定のルールにカスケードして選択されます。最も具体的なルールが選択されます。

102
seanyboy

CSSを教えるとき、私はいつも「カスケードスタイルシート」が「fightingスタイルシート」のようなものを意味することを生徒に伝えます。

1つのルールはH3タグを赤に、別のルールはそれを緑に伝える-ルールは互いに矛盾し、誰が勝つのか!?スタイルシートのデスマッチ!

おそらくそれは少し誇張されているかもしれませんが、カスケードや継承の概念よりも、始めたばかりの非コード、非プログラミングの人々にははるかに受け入れやすいです。

もちろん、スタイルシートがお互いに戦っているのは問題ではない、それが言語の設計方法であるということを必ず伝えます。

47
AmbroseChapel

HåkonWium Lie(CSS共同作成者)は、CSSのPHD論文で「カスケード」を「いくつかのスタイルシートを組み合わせて、スタイルシート間の競合を解決するプロセス」と定義しています https://www.wiumlie.no/2006/phd /

18
Mads Mobæk

次の記事はあなたの質問に完璧に答えます。

特定の要素にプロパティが適用される順序です。

http://www.blooberry.com/indexdot/css/topics/cascade.htm

5
abhisekp

外部から考える必要があります。bodyタグにルールがある場合、すべての子タグを「カスケード」します。ボディ内の任意のタグにルールを設定すると、そのルールが採用されます。そのため、埋め込みタグからのルールによって中断されない限り、ルールはすべてのコンテンツをカスケードします。

4
daveross858

役立つ可能性のある説明。 2つのスタイルシートを含め、それぞれに同じ特異性を持つルールがある場合、最後に含まれたものが優先されます。 I.E.カスケードの最後が最も影響力があります。

(これは、同じシートに2つのルールを置くことの単なるバリエーションです。他のすべてが等しい場合、最後のルールが勝ちます。)

例えば、与えられた

body {
    background:blue;
}

body {
    background:green;
}

その後、背景が緑色になります。

2
nevster

ウォーターフォールには複数のカスケードが含まれているため、CSS処理を処理できます。以下に、上から下へのカスケードを順番に示します:(低い方が高い方の同じプロパティをオーバーライドできます。)

  1. ユーザーエージェントの宣言
  2. ユーザーの通常の宣言
  3. 著者の通常の宣言
  4. 著者の重要な宣言
  5. ユーザーの重要な宣言

詳細は spec をご覧ください

cascadingは、複数のオリジンから正しい値を選択することです。ただし、sortingとは異なります。並べ替える必要があるのは、順序が正しくないものだけです。しかし、CSSでは、これらの起源の優先順位は固定されています。したがって、擬似コードは次のようになります。

  1. 値配列を初期化します。
  2. 第1起点からの値を適用します。
  3. 2番目のOriginから値を適用し、値が存在する場合はオーバーライドします。
  4. ...
  5. n番目のオリジンからの値を適用し、値が存在する場合はオーバーライドします。

擬似コードから、いくつかのカスケードの滝のように見えます。

2
wang zhihao

これは、スタイルシートの仕様の競合を解決するために使用されるプロセスです。

これは主に、CSSの優先順位に従って行われた競合解決プロセスです。

0
Anurag Salunkhe

CSSはカスケードスタイルシートの略です。まさにそのスタイルにより、カスケードスタイルシートのさらに下の方が、上位の同等のスタイルを上書きします(上位のスタイルがより具体的でない限り)。したがって、デザインのすべてのバージョンに適用できるスタイルシートの先頭に基本スタイルを設定し、関連するセクションをドキュメントのメディアクエリでオーバーライドできます。

0
behzad

カスケードは、段階的に降り注ぐか、段階的に追加することを意味します。スタイルシートには、html要素をスタイル設定するためのコードが含まれています。そして、コードがスタイルシートで記述される方法は、カスケード式です。または、単純に、スタイルシートのhtmlページの各html要素のレイヤーのバックツーバックコードは、カスケードスタイルシートを作成します。

0
sangrama

カスケードは、各スタイルルールに重みを割り当てるアルゴリズムです。複数のルールが適用される場合、最大の重みを持つルールが優先されます。

0
antonjs