CSSカスケードとは何ですか-フロントエンドQ&A-php.cn

ホームページ

ウェブフロントエンド

フロントエンドQ&A

CSSカスケードとは何ですか

青灯夜游

Apr 08, 2021 pm 05:14 PM

css

CSS カスケードとは、複数の CSS スタイルの重ね合わせを指します。CSS スタイルが同じ要素に同じ属性を構成する場合、カスケードルール (重み) に基づいて競合を処理し、CSS セレクターで指定された属性を選択します。は、一般に、重みの高い層が重みの低い層を覆うものとも表現されるため、スタッキングとも呼ばれます。

CSSカスケードとは何ですか

このチュートリアルの動作環境: Windows 7 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター。

CSS カスケード (重要)

は、複数の CSS スタイルのオーバーレイを指します。

は、競合を処理するブラウザの機能です。属性が 2 つの同一のセレクターを通じて同じ要素に設定されている場合、一方の属性がもう一方の属性をカスケードします。
原則:
1. スタイルの競合の場合、従うべき原則は近接性の原則、つまり CSS の記述位置です。
2. スタイルは競合せず、カスケードしません

CSS 継承
CSS スタイルシートを作成する場合、子タグは親タグの一部のスタイルを継承します。テキストの色やフォントサイズなど。継承可能なプロパティを設定するには、それを親要素に適用するだけです。
注: 継承を適切に使用すると、コードが簡素化され、CSS スタイルの複雑さが軽減されます。子要素は親要素のスタイルを継承できます (text-、font-、line-、先頭のこれらの要素と color 属性も継承できます)

CSS 優先度
CSS スタイルを定義する 2 つ以上のルールが同じ要素に適用されることが多い場合、優先順位の問題が発生します。
重みを考慮するとき、初心者は次のような特殊な状況にも注意する必要があります。
継承されたスタイルの重みは 0 です。つまり、入れ子構造では、親要素の重みがどんなに大きくても、 style は、子要素によって継承される場合、その重みは 0 になります。これは、子要素によって定義されたスタイルが継承されたスタイルをオーバーライドすることを意味します。
インラインスタイルが優先されます。 style 属性が適用される要素のインラインスタイルの重みは非常に高く、100 をはるかに超えると理解できます。つまり、上記のセレクターよりも高い優先度を持ちます。
重みが同じ場合、CSS は近接性の原則に従います。これは、要素に最も近いスタイルが最も高い優先順位を持つか、最後にランク付けされたスタイルが最も高い優先順位を持つことを意味します。
CSS は、最も高い優先順位が与えられる ! important コマンドを定義します。スタイルの位置の重さや距離に関係ないとも言われています！重要なものが最も優先されます。

CSS の詳細度
CSS の重みについては、計算に一連の式が必要です。4 桁の数字で構成されます。値は左から右の順で、最大値になります。 left. レベルは最初のレベルより大きく、桁の間に底がなく、レベルを超えることはできません。
継承または * 値: 0, 0, 0, 0
各要素 (タグ) の値: 0, 0, 0, 1
各クラス、疑似クラスの値: 0、0、1、 0
各 ID は: 0、1、0、0
各インラインスタイル値: 1、0、0、0
各 !重要な値: infinity

1.数字間の基数。
2. 継承の影響により、重みは 0 になります (つまり、スタイルにはテキストタグが含まれません)。たとえば、次のようになります。

.colorRed{
    color:#f00; /* 没有选中p标签，所以只是通过继承影响的，权重为0 */
}
p {
    color:#0f0; /* 权重为1 */
}
<div class="colorRed">
    <p>颜色</p>
</div>

ログイン後にコピー

コードは次のとおりです。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
 
#father #son{ /*权重为0,2,0,0*/
color:blue;
}
#father p .c2{ /*权重为0，1，1，1*/
color:black;
}
div .c1 p .c2{ /*权重为0，0，2，2*/
color:red;
}
#father {
color:green !important; /*继承的权重为0*/
}
 
</style>
</head>
<body>
<div id="father">
<p id="son">颜色</p>
</div>
</body>
</html>

ログイン後にコピー

効果は次のとおりです:

(学習ビデオ共有: css ビデオチュートリアル)

以上がCSSカスケードとは何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

神レベルのコード編集ソフト（SublimeText3）

ホットトピック

Gmailメールのログイン入り口はどこですか？

7324

Java チュートリアル

1625

CakePHP チュートリアル

1350

Laravel チュートリアル

1262

PHP チュートリアル

1209

Related knowledge

Vue におけるプレースホルダーの意味 May 07, 2024 am 09:57 AM

Vue.js では、placeholder 属性は、input 要素のプレースホルダーテキストを指定します。これは、ユーザーがコンテンツを入力していないときに表示され、入力のヒントや例を提供し、フォームのアクセシビリティを向上させます。その使用方法は、input 要素にプレースホルダー属性を設定し、CSS を使用して外観をカスタマイズすることです。ベストプラクティスには、入力に関連すること、短く明確にすること、デフォルトのテキストを避けること、アクセシビリティを考慮することが含まれます。

jsでのスパンの意味は何ですか May 06, 2024 am 11:42 AM

スパンタグは、テキストにスタイル、属性、または動作を追加できます。色やフォントサイズなどのスタイルを追加するために使用されます。 idやclassなどの属性を設定します。クリック、ホバーなどの関連する動作。さらに処理または引用するためにテキストにマークを付けます。

jsでレムは何を意味しますか May 06, 2024 am 11:30 AM

CSS の REM は、ルート要素 (html) のフォントサイズに対する相対単位です。次の特性があります: ルート要素のフォントサイズに相対し、親要素の影響を受けません。ルート要素のフォントサイズが変更されると、REM を使用する要素もそれに応じて調整されます。任意の CSS プロパティとともに使用できます。 REM を使用する利点は次のとおりです。応答性: さまざまなデバイスや画面サイズでもテキストを読みやすい状態に保ちます。一貫性: Web サイト全体でフォントサイズが一貫していることを確認します。スケーラビリティ: ルート要素のフォントサイズを調整することで、グローバルフォントサイズを簡単に変更できます。

vueに画像を導入する方法 May 02, 2024 pm 10:48 PM

Vue に画像を導入するには、URL、require 関数、静的ファイル、v-bind ディレクティブ、CSS 背景画像の 5 つの方法があります。動的画像は Vue の計算プロパティまたはリスナーで処理でき、バンドルされたツールを使用して画像の読み込みを最適化できます。パスが正しいことを確認してください。そうでないと、読み込みエラーが表示されます。

プロンプトをjsでラップする方法 May 01, 2024 am 06:24 AM

JavaScript でプロンプト() メソッドを使用する場合、次の 3 つの方法で改行を実現できます。 1. 改行する位置に「\n」文字を挿入します。 2. 行に改行文字を使用します。プロンプトテキスト; 3. CSS の "white" -space: pre" スタイルを使用して改行を強制します。

jsのノードとは何ですか May 07, 2024 pm 09:06 PM

ノードは、HTML 要素を表す JavaScript DOM 内のエンティティです。これらはページ内の特定の要素を表し、その要素にアクセスして操作するために使用できます。一般的なノードタイプには、要素ノード、テキストノード、コメントノード、ドキュメントノードなどがあります。 getElementById() などの DOM メソッドを通じて、ノードにアクセスし、プロパティの変更、子ノードの追加/削除、ノードの挿入/置換、ノードのクローン作成などの操作を行うことができます。ノードトラバーサルは、DOM 構造内を移動するのに役立ちます。ノードは、ページコンテンツ、イベント処理、アニメーション、およびデータバインディングを動的に作成するのに役立ちます。