CSS の基本の基本をまとめたもの

今日の記事は、以前の CSS の補足知識を統合します。

CSSに関する事前知識が少しわかりにくいと思うので、今日は整理してみます。

カスケード スタイル シート

カスケードとはどういう意味ですか?なぜこの言葉が名前に含まれることがそれほど重要なのでしょうか。

階層化は、単に競合解決として理解できます。

紛争とは何ですか?

これは、異なるセレクターを使用して同じ要素を選択した後、同じスタイルを同じ要素に追加することを意味します。

優先度ルールは次のように表現できます

インライン スタイル >ID スタイル >カテゴリ スタイル >タグ スタイル

複雑なページでは、特定の要素がウェブサイトの特定の部分など、多くの場所からスタイルを取得する場合があります 全体

-level タイトルは緑色を使用するように設定されていますが、特別な列では青色を使用する必要があります。このように、列内の一般的なスタイル設定をオーバーライドする必要があります。非常に単純なページでは、このような特別な要件を実装するのは難しくありません

しかし、Web サイトの構造が非常に複雑な場合、コードが非常に複雑になり、見つけることが不可能になる可能性があります

特定の要素のスタイルはどのルールに基づいて決まりますか。したがって、CSS における「カスケード」の原理を十分に理解する必要があります。

競合するスタイルの優先順位の計算は比較的複雑なプロセスであり、上記の単純な優先順位ルール

では完全に説明できません。しかし、読者は「スタイルが特殊であればあるほど、優先順位が高くなる」という一般原則に従うことができます。

これがどのように特別なのか、特別であるほどそれをどのように位置づけるかについては、以下のコンテンツを読んでください。

特異性:

すべてのセレクターには特異性があり、要素に 2 つ以上の競合する属性宣言がある場合、より高い特異性を持つ方が優先されます。

セレクターの特異性は、セレクター自体のコンポーネントによって決まります。特異性の値は、0,0,0,0 などの 4 つの部分で表されます。

セレクターの具体的な特異性は、次のように決定されます。

セレクターで指定された各 ID 属性値について、2 番目の部分プラス1: 0、1、0、0。

セレクターで指定されたクラス属性値、属性選択、または疑似クラスごとに、3 番目の部分に 1 を追加します: 0、0、1、0。

セレクターで指定された各要素と擬似要素について、4 番目の部分に 1 を追加します: 0,0,0,1。

コンビネータとワイルドカード セレクタは、特異性には何も貢献しません。

しかし、ワイルドカード セレクターには特異性がありません: 0,0,0,0。

結合記号にはゼロさえありません。

例:

h1{color:red;} は 0,0,0,1

p em{color:purple} は 0,0,0,2

.grape{color:purple} は 0、 0,1,0

p.b e.a{色:赤; } 0,0,2,2

#aa{色:赤;} 0,1,0,0

p#aa *[href]{色:red;} 0,1,1,1

最初の0は早いほうが優先されるため、0以外の数字が同じ位置にある場合はその大きさを比較します。まず前の数値を

次に、数値が相対的でなくなるまで比較し、数値が大きい方が優先されます。

そのため、上記の大まかな優先順位ルールがあります:

インラインスタイル>IDスタイル>カテゴリスタイル>タグスタイル

これらは各部分の代表として使用できるだけであり、4つあるので大丈夫です。

重要なステートメント ! important 、つまり、必要なステートメントをマークします。これは最も高い優先度を持ちますが、宣言された値の最後に配置する必要があります。

継承:

継承の特殊性にはゼロさえありません。つまり、特殊性がありません。

特殊性がゼロであることと特殊性がないことには大きな違いがあります。つまり、特殊性が 0 のセレクターはスタイルを追加できます。 、

継承によって子孫にスタイルを追加することもできますが、継承機能を持つもののみが色などの子孫要素に追加でき、マージン、パディング、ボーダーなどの属性は追加できません。子孫に追加されます。

同じ体重のものを順番に比較し、順位が低いものが優先されます。

高い特異性は低い特異性よりも強力です

したがって、疑似クラス宣言の順序は次のとおりです: link-visited-hover-active

LVHA (略語)

When:visited はその後に来ます。重みが同じであるため、それらの順序が表示され、:visited がそれらの後に優先されます。

統合属性が書き込まれていなければ、この問題は発生しません。同じ属性を記述する場合は注意してください。 ！ ！ ！

上記は CSS の中核となる基礎です。

この知識を拡張してください:

包含ブロック:

包含ブロックの幅は、包含される要素の親の幅であり、親の幅は、それに含まれる各要素の

マージンです-left + border-left + padding-left + width + padding-right + border-right + margin-right=包含ブロックの水平幅

width、margin-left、margin-right はすべて次のように設定できます。 auto;

と margin -Left と margin-right を同時に auto に設定すると中央に配置されますが、これは条件付きです:

1 この要素はブロックレベルの要素である必要があり、ドキュメント フローから分離されてはなりません

2. この要素には設定された幅があります

margin - top と margin-bottom が auto に設定されている場合、それらは垂直方向の中央に配置されません。auto に設定されている場合、それらはゼロに等しくなります。

水平方向の全長の 7 つの属性 これら 7 つの属性は、上記の計算式の属性であり、その合計が水平方向の全長を超えることはできません。この場合、マージンは負の値になっても構いません。このルールに違反することはありません。 。

注: 負の値を指定できるのはマージンのみです。

マージンがマイナスの場合にどのようになるかについては、ご自身で体験してください。この属性は非常に違法なようです。

上記の CSS の中核的な基本の概要 (推奨) は、編集者が共有したすべての内容です。参考にしていただければ幸いです。また、PHP 中国語 Web サイトをサポートしていただければ幸いです。

CSS の中核となる基礎をまとめた記事をさらに詳しく知りたい場合は、PHP 中国語 Web サイトに注目してください。