XHTML CSS Web ページ レイアウトにおける ID とクラスの理解と適用:
XHTML と CSS がオブジェクト指向にできれば。 。太陽は北から昇るはずです。ただし、すべては OO の考え方で見る必要があり、数字を補うことはほとんどできません。実際、2000 年には誰かが OO スタイルを提案していましたが、現在は見つかりません。
それで、どうすればいいでしょうか? CSS は次のように記述できることは誰もが知っています。
.G_G { /* xxxxxx */ } |
これをプロトタイプ、またはクラスと考えることができます。 -__-b は元々クラスであるようで、次に HTML でオブジェクトを「インスタンス化」します。次に例を示します。
<div class="G_G">バカ泣き叫ぶ</div> |
この要素は CSS の対応する定義を使用しますが、ページではこのクラスを多くの場所に適用する可能性があるため、対応するクラスだけでは十分ではありません。「プライベート」関係を処理するために、今のコードを次のように変更します。
<div id="aoao" class="G_G">バカ泣き叫ぶ</div> |
この場合、ID aaoao を持つ要素は .G_G クラスの定義を適用し、#aoao{} のようなセレクターを使用してプライベート効果の定義を入力できます。これはパブリック .G_G クラスには影響しません。 、同時に、#aoao で定義された優先順位は .G_G よりも高くなります。これは、プライベート定義の優先順位がパブリック定義よりも高いという常識と一致します^^。
ID のような固有のものを使用するので、そのような個人的に定義されたものの再利用は問題になります (ID はページ内に 1 回しか表示されません。誰がそう言ったかは知りませんが、いずれにしてもそれが真実です)。同じことの多くを民営化したい場合はどうすればよいでしょうか?次に、「ポリモーフィズム」を実装する必要があります。掘って、ははは。コードを再度変更します。
<div class="G_G o_O">馬鹿が泣き叫ぶ</div> |
1 つは「G_G」、もう 1 つは「o_O」ですが、.o_O{} を使用すると、CSS が次のようになっている場合にも要素を定義できます。
.G_G {幅:100%} .o_O {カラー:#123456} |
要素はすべて定義され、定義は重複しないため、すべてが適用されます。こんな感じのコードだと分かりやすいか分かりません。
<div class="layout color">バカな鳥じゃない</div> .layout{幅:100%} |
次に「カプセル化」を実装する必要があります。子セレクターは頻繁にコードを変更してください。
<div class="G_G"><span class="bendan">バカ</span>痛い</div> |
.bendan{} と .G_G .bendan{} の両方を定義できますが、後者はクラス「G_G」を持つ要素にのみ適用できます。単純に .bendan{} をグローバル定義として、.G_G .bendan{ } を理解することができます。は部分的な定義として理解され、XHTML と CSS のモジュール化に有益です。 ^^伝説の「カプセル化」が現れ、そしてそれは続いた。
<div id="aoao" class="G_G o_O"><span class="bendan">バカ</span>嗷嗷</div> |
このようなコードでは無数の変更が生じる可能性があり、理解できない場合は最初からやり直す必要があります。 ^^
XHTML CSS WebページレイアウトにおけるIDとクラスの応用を深く理解しましょう!