CSS の優先順位と継承の問題について

CSSの優先順位と継承の問題

★CSSの競合、つまり優先順位
CSS自体の設定は同じ要素に複数のスタイルを同時に適用することができ、スタイル間の競合が発生する可能性があります。今度はユーザーが望む効果を得ることができません。
★CSS の競合を解決するための優先ルール:
● CSS カスケード スタイル シートの導入方法の優先順位: Inline > Embedded > Linked >
● 複数の外部スタイルでは、後から表示されるスタイルが優先されます。最初に表示されるスタイルよりも、一般に上書きとして知られています
● スタイルでは、セレクターの優先順位: ID スタイル > クラス スタイル > マーク スタイル (重みメタファーを使用: ID の重みは 100、クラスの重みは10、タグ名の重みは 1)
● スタイルの後に ! important を追加します。例: .abc {background:#fff !improtant;} このスタイルの優先順位は、トップレベルのグローバル スタイルに引き上げられます。それに影響を与えることはできません。
✪注: !重要はセミコロンの前に書く必要があります
優先順位:
近接原則 (コードに近いほど優先順位が高くなります)
選択範囲が小さいほど優先順位が高くなります。 CSSを洗練し、親要素のセレクターを追加して選択範囲を狭めることでレイヤーごとにラップします

★スタイルの継承:
継承とは、上位(親)、上位のCSSスタイルを設定することを意味します(親) 以下のすべての子 (部下) がこの属性を持ちます。一般に、テキスト サイズ、テキストの太さ、テキストの色、フォントなどのプロパティを継承できるのはテキスト テキストのみです。ただし、一部の CSS スタイルは継承されないことに注意してください。例: ボーダー: 1px ソリッドレッド;

デモ:

<p style="color:red;">如果你不知道自己<span>想做什么该做什么</span>，那你什么都做不好。</p>

説明: (1) 上位 (親: p) のテキストの色を赤に設定しますが、子 (スパン) はテキストの色を設定しません, ただし、テキストには継承特性があるため、子テキストのコンテンツは依然として赤色です。
(2) 親の文字色スタイルを設定した後、継承により複数の子が親と同じ色になる場合、一部の子の色を親と同じにしたくない場合は、設定するだけで済みます。対応する子に必要な色。
✪注: 特別な重みがもう 1 つあります。継承にも重みがありますが、それは非常に低いものもあります。そのため、継承の重みが最も低いことが理解できます。

継承の利点: 上位レベルの CSS スタイル シート属性のみを設定でき、子 (下位) はすべてこの CSS 属性を持っているため、CSS コードが削減され、メンテナンスが容易になります。

★CSSで継承できる属性と継承できない属性
1. 継承されない属性

1. 要素が生成するボックスのタイプを指定します

2。

vertical-align: テキストの垂直方向の配置

text-decoration: テキストに追加する装飾を規定

text-shadow: テキストの影の効果

white-space: 空白文字の処理

unicode-bidi: 方向を設定テキストの

3. ボックス モデルの属性: width、height、margin、margin-top、margin-right、margin-bottom、margin-left、border、border-style、border-top-style、border-right -style、border-bottom-style、border-left-style、border-width、border-top-width、border-right-right、border-bottom-width、border-left-width、border-color、border-top -color、border-right-color、border-bottom-color、border-left-color、border-top、border-right、border-bottom、border-left、padding、padding-top、padding-right、padding-bottom 、padding-left

4. 背景属性:background、background-color、background-image、background-repeat、background-position、background-attachment

5. 位置決め属性:float、clear、position、top、right、bottom 、左、最小幅、最小高さ、最大幅、最大高さ、オーバーフロー、クリップ、z-index

6、生成されたコンテンツ属性: content、counter-reset、counter-increment

7、アウトライン スタイル属性: アウトラインスタイル、アウトライン幅、アウトラインカラー、アウトライン

8、ページスタイル属性: サイズ、改ページ前、改ページ後

9、サウンドスタイル属性: ポーズ前、ポーズ後、pause、cue-before、cue-after、cue、play-during

2. 継承される属性

1. フォントファミリー属性

font: 結合されたフォント

font-family: のフォントファミリーを指定します。要素

font-weight: フォントの太さを設定します

font-size: フォントのサイズを設定します

font-style: フォントのスタイルを定義します

font-variant: スモールキャップのフォントを設定しますテキストを表示する場合、これはすべての小文字が大文字に変換されることを意味しますが、スモールキャップを使用するすべての文字は、テキストの残りの部分に比べてフォント サイズが小さくなります。

font-stretch: 現在のフォントファミリーを引き伸ばして変形します。すべての主要なブラウザでサポートされているわけではありません。

font-size-adjust: 優先フォントの X 高さが維持されるように、要素のアスペクト値を指定します。

2. テキストシリーズの属性

text-indent: テキストのインデント

text-align: テキストの水平方向の配置

line-height: 行の高さ

word-spacing: 単語間のスペース (つまり、単語の間隔) を増減します。 )

letter-spacing: 文字間の間隔(文字間隔)を増減します

text-transform: テキストの大文字/小文字を制御します

direction: テキストの書き込み方向を指定します

color: テキストの色

3.可視性

4. テーブルレイアウト属性: caption-side、border-collapse、border-spacing、empty-cells、table-layout

5. リストレイアウト属性: list-style-type、list-style-image、list - style-position、list-style

6、生成されたコンテンツ属性: quotes

7、カーソル属性:cursor

8、ページスタイル属性: page、page-break-inside、windows、orphans

9、サウンドスタイル属性:speak、speak-punctuation、speak-number、speak-header、speech-rate、volume、voice-family、pitch、pitch-range、stress、richness、azimuth、elevation

3. すべての要素は属性を継承できます

1. 要素の可視性: 可視性

2. カーソル属性: カーソル

4. フォントファミリー属性

2. テキストシリーズを除く。 indent と text-align 以外の属性

5. ブロックレベルの要素が継承できる属性

1.

以上がCSS の優先順位と継承の問題についての詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。