XHTML と CSS によるオブジェクト指向プログラミング

XHTML と CSS によるオブジェクト指向プログラミング
<br />XHTML と CSS がオブジェクト指向だったらよかったのに。 。太陽は北から昇るはずです。しかし、すべてを OO の観点から見る必要があり、それではほとんど数字が足りません。実際、数年前に誰かが OO スタイルを提案しましたが、もう見つかりません。
それで、どうやってやるのでしょうか?今では誰もが CSS が次のように書けることを知っています。
.G_G { /* xxxxxx */ }
これをプロトタイプ、またはクラスと考えることができます。-__-b はクラスのようです。次に、HTML でオブジェクトを「インスタンス化」する必要があります。例:
<div class="G_G">バカだなああああ</div>
要素は対応する CSS 定義を使用しますが、対応するクラスだけでは不十分です。ページがこのクラスを複数の場所に適用する可能性があるためです。" private " 関係を適切に処理するには、前のコードを次のように変更します。
<div id="aoao" class="G_G">バカなaoao</div>
この場合、ID aoao の要素は.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%} .color{色:#123456}
次に、「カプセル化」を実装する必要があります。子セレクターは頻繁に使用されるため、コードを変更します。
<div class="G_G"><span class="bendan">バカ</span> 痛い</div>
.bendan{}.G_G .bendan{}の両方を定義できますが、後者はクラスが "G_G" の要素にのみ適用できます。.bendan .bendan{}をグローバル定義、 .G_G .bendan{}ローカル定義として簡単に理解できます。これは、XHTML と CSS のモジュール化に役立ちます。 ^^伝説の「カプセル化」が現れ、その後に続きます。
<div id="aoao" class="G_G o_O"><span class="bendan">バカ</span> Aoao</div>
このようなコードは無数の変更を生み出す可能性があります。それでも理解できない場合は、最初から始めてください。 ^^
実際のところ、これらは真のオブジェクト指向からはまだ程遠いものです。私はまだクリックベイトを学んでいるところですが、ID とクラスの適用を理解するために使用できます。

<<:  Docker stopはすべてのコンテナを停止/削除します

>>:  MySQL 8.0.23 メジャーアップデート (新機能)

推薦する

MySQL マルチインスタンス構成ソリューション

1.1 MySQL マルチインスタンスとは何ですか?簡単に言うと、MySQL マルチインスタンスとは...

Vue3のいくつかの利点についての簡単な説明

目次1. ソースコード1.1 モノレポ1.2 タイプスクリプト2. パフォーマンス2.1 ソースコー...

ブラウザの自動フォーム入力によるウェブページのスタイル損失の原因の分析と解決

バックエンドからフロントエンドまで、なんと悲劇なのでしょう。他の人の CSS を自分の jsp We...

リアルタイムコンピューティングフレームワークFlinkクラスタの構築と動作メカニズムについての簡単な説明

目次1. Flinkの概要1.1 基本的な紹介1.2 アプリケーションシナリオ2. 環境の展開2.1...

MySQL データベース監視ソフトウェア lepus の使用上の問題と解決策

lepus3.7 を使用して MySQL データベースを監視中に、次の問題が発生しました。このブログ...

Linux でテキストから改行文字を削除する方法

復帰文字 ( Ctrl+M ) に不安を感じても心配しないでください。それらを排除する簡単な方法がい...

初心者向けMySQLインデックス

序文MySQL インデックスで最も重要なデータ構造は B+ ツリーなので、まずは B+ ツリーの原理...

Docker のコンテナ データ ボリュームの概要

目次Dockerコンテナのデータ量データボリュームの使用方法1: コマンド-vを使用して直接マウント...

CentOS7.3 での MySQL 8.0.13 のインストールと設定のチュートリアル

1. 基本環境1. オペレーティングシステム: CentOS 7.3 2. MySQL: 8.0.1...

HTMLフォーム入力監視の詳細な理解

今日、入力イベントに関するブログ投稿を見て、気まぐれで関連情報を整理してみました。イベント:関数 c...

iframe の多層ネスト、無制限のネスト、高度に適応したソリューション

ページ A、B、C の 3 つがあります。ページ A にはページ B が含まれ、ページ B にはペー...

TypeScript 列挙型

目次1. 概要2. デジタル列挙2.1 逆マッピング3. 文字列の列挙4. const列挙5. まと...

Win10 VM 仮想マシンに Mac OS10.14 を完璧にインストールする (グラフィック チュートリアル)

最近、Apple の記者会見を見てとても興奮したので、Mac システムを体験して Apple の素晴...

CSS3 で背景の透明化と不透明テキストを実装するサンプルコード

最近、画像上に半透明の背景でテキストを表示する必要があるという要件に遭遇しました。その効果は次のよう...