blog

CSSのフロントエンド学習 - CSSの3つの特徴

同じセレクタは同じスタイルを設定し、一方のスタイルは競合するスタイルを上書きします。CSSの継承:子タグは、テキストの色やフォントサイズなど、特定のスタイルを親から継承します。継承を適切に使用すること...

Jul 15, 2020 · 2 min. read
シェア

カスケード

同じセレクタが同じスタイルを設定し、一方のスタイルがもう一方の競合するスタイルを上書きします。カスケーディングは、主にスタイルの衝突の問題を解決します。

カスケードの原理。

  • スタイルの競合、近接性の原則に従い、どのスタイルが構造に近いか、どのスタイルが実行されるか
  • スタイルは衝突せず、連鎖せず

CSSの継承:子タグは親タグから特定のスタイル(テキストの色やフォントサイズなど)を継承します。継承を適切に使用することで、コードを簡素化し、CSSスタイルの複雑さを軽減することができます。

子要素は、親要素のスタイルを継承することができます:親要素で始まるtext-, font-, line-、そしてcolor属性。

相続のニーモニック:龍は龍を生み、鳳凰は鳳凰を生み、ネズミから生まれた子は穴の開け方を知っている」。

高いラインの継承:

 body {
 font:12px/1.5 Microsoft YaHei;
 }
  • ラインの高さは、ユニットにリンクしている場合もあれば、そうでない場合もあります。
  • 子要素が行の高さを持たない場合、親要素の行の高さ 1.5 を継承します。
  • 子要素の行の高さは、現在の子要素のテキスト・サイズ * 1.5です。
  • body line height 1.5 この書き方の最大の利点は、中の子要素が自分のテキストの大きさに応じて行の高さを自動的に調整できることです。

優先順位

同じ要素に複数のセレクタが指定されている場合、優先順位が作成されます。

  • セレクタが同じ場合、カスケードが実行されます。
  • セレクタが異なる場合、セレクタの重みは

セレクター優先度計算フォーム

優先事項

  1. ウェイトは4組の数字で構成されていますが、四捨五入はありません。
  2. クラス・セレクタは常に要素セレクタより大きく、idセレクタは常にクラス・セレクタより大きい......といったことが理解できます。
  3. 順位判定は左から右に進み、1つでも同じ値があれば次の値を判定します。
  4. ワイルドカードと継承の重みは0、タグ・セレクタは1、クラス・セレクタは10、idセレクタは100、インライン・スタイル・シートは1000、重要度は無限大です。
  5. 継承される重みは 0 です。要素が直接選択されていない場合、子要素は親の重みに関係なく 0 の重みを受け取ります。

重みのオーバーレイ:複合セレクタの場合、重みのオーバーレイがあり、重みを計算する必要があります。

  • div ul li ------> 0,0,0,3
  • .nav ul li ------> 0,0,1,2
  • a:hover ------> 0,0,1,1
  • a ------> 0,0,1,1
Read next

divの縦幅と横幅を固定しない方法

この方法は、幅と高さを厳密に固定せず、親の幅と高さの50%にする必要があります。視覚的な効果が得られるのであれば、似たようなニーズに絞ってこの方法を使うことができます。

Jul 15, 2020 · 2 min read