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

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

★CSSの競合、つまり優先順位
CSS自体の設定は同じ要素に同時に複数のスタイルを適用することができますが、その際にスタイル間の競合が発生し、ユーザーが達成できない場合があります。彼らは効果を望んでいます。
★CSS競合解決の優先順位ルール：
● CSSカスケードスタイルシートの導入方法の優先順位： inline＞embedded＞linked＞import
● 複数の外部スタイルのうち、最後に出現するスタイルの優先度が、導入されたスタイルよりも高くなります。が最初に表示され、一般にオーバーライドとして知られています
● スタイルでは、セレクターの優先順位: ID スタイル > クラス スタイル > マーク スタイル (重みメタファーを使用: ID の重みは 100、クラス タグ名の重みは 10 、タグ名の重みは 1) です
● スタイルの後に ! important を追加します。例: .abc {background:#fff !improtant;} このスタイルの優先順位は、デフォルトで最上位に昇格します。とグローバル スタイルには影響されません。
✪注: !重要はセミコロンの前に書く必要があります
優先順位:
近接原則 (コードに近いほど優先順位が高くなります)
選択範囲が小さいほど優先順位が高くなります。 CSSを改良し、親要素のセレクターをさらに追加してレイヤーごとにラップし、選択範囲を狭めます

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

demo:

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

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

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

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

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

2. テキスト属性:

vertical-align: 縦書きテキスト。配置

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

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

white-space: 空白文字の処理

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

3.ボックスモデルの幅、高さ、マージン、マージン上、マージン右、マージン下、マージン左、ボーダー、ボーダースタイル、ボーダートップスタイル、ボーダー右スタイル、ボーダーボトムスタイル、ボーダー左スタイル、ボーダー幅、ボーダー上幅、ボーダー右右、ボーダー下幅、ボーダー左幅、ボーダー色、ボーダー上色、ボーダー右色、ボーダー下色、ボーダー左色、ボーダー上、ボーダー右、ボーダー下、ボーダー左、パディング、パディング上、パディング右、パディング下、パディング左

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

5. 位置決め属性:float、clear、position、top、right、bottom、left、min-width、min -height、max-width、max-height、overflow、clip、z-index

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

7. アウトライン スタイル属性:outline-style、outline-width 、アウトラインカラー、アウトライン

8. ページスタイル属性: サイズ、ページ区切り前、ページ区切り後

9. サウンドスタイル属性: 一時停止前、一時停止後、一時停止、キュー前、キュー-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. 音声スタイルの属性: 話す、話す-句読点、話す-数字、話す-ヘッダー、話す速度、音量、音声ファミリー、ピッチ、ピッチ範囲、強さ、豊かさ、方位角、仰角

3 つの属性。すべての要素で継承できます

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

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

4. インライン要素で継承できる属性

2. . text-align 以外のテキスト シリーズ属性

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

1. CSS の優先順位と継承の問題については、PHP に注意してください。関連記事の中国語サイト！