Objektorientierte Programmierung mit XHTML und CSS
|
<br />Wenn XHTML und CSS nur objektorientiert wären. . Die Sonne sollte im Norden aufgehen. Wir sollten jedoch alles aus einer OO-Perspektive betrachten, und das wird die Zahlen kaum ausmachen. Tatsächlich hat jemand schon vor einigen Jahren den OO-Stil vorgeschlagen, aber er ist nicht mehr zu finden. Also, wie machen wir es? Mittlerweile weiß jeder, dass CSS folgendermaßen geschrieben werden kann: .G_G { /* xxxxxx */ } Wir können es uns als einen Prototyp oder eine Klasse vorstellen, -__-b scheint eine Klasse zu sein, und dann müssen wir ein Objekt in HTML „instanziieren“, zum Beispiel: <div class="G_G">Dumm, ah, ah</div> Das Element verwendet die entsprechende CSS-Definition, aber die entsprechende Klasse allein reicht nicht aus, da unsere Seite diese Klasse an mehreren Stellen anwenden kann. Um die Beziehung „ privat “ gut handhaben zu können, ändern Sie den vorherigen Code wie folgt: <div id="aoao" class="G_G">Blödes aoao</div> In diesem Fall wendet das Element mit der ID aoao die Definition der Klasse .G_G an und kann den Selektor #aoao{} verwenden, um die Definition privater Effekte einzugeben, die die öffentliche Klasse .G_G nicht beeinflusst. Gleichzeitig ist die Priorität der Definition von #aoao höher als die von .G_G, was dem gesunden Menschenverstand entspricht, dass private Definitionen Vorrang vor öffentlichen Definitionen haben^^.Da ich eine ID verwendet habe, also eine eindeutige Sache, wurde die Wiederverwendung dieser privat definierten Sache zu einem Problem (eine ID kann auf einer Seite nur einmal erscheinen, ich weiß nicht, wer das gesagt hat, aber es ist trotzdem die Wahrheit). Was ist, wenn wir mehrere privatisierte Dinge implementieren möchten? Dann müssen wir „ Polymorphismus “ implementieren. Grab, haha. Ändere den Code noch einmal: <div class="G_G o_O">Dumm, ah, ah</div> Eines ist „G_G“ und das andere ist „o_O“, aber wenn wir .o_O{} verwenden, können wir das Element auch definieren, wenn das CSS so ist:.G_G {Breite:100%} .o_O {Farbe:#123456} Die Elemente werden alle definiert und da die Definitionen nicht kaskadieren, werden sie alle angewendet. Wenn der Code so ist, frage ich mich, ob er leichter zu verstehen ist. <div class="layout color">Bin kein Narr, Eule</div> .layout{width:100%} .color{color:#123456} Als nächstes müssen wir die „ Kapselung “ implementieren. Der Child-Selektor soll häufig verwendet werden, ändern Sie den Code: <div class="G_G"><span class="bendan">Dumm</span> Autsch</div> Obwohl sowohl .bendan{} als auch .G_G .bendan{} definiert werden können, kann letzteres nur auf Elemente mit der Klasse „G_G“ angewendet werden. Wir können .bendan{} einfach als globale Definition und .G_G .bendan{} als lokale Definition verstehen, was für die Modularisierung unseres XHTML und CSS von Vorteil ist. ^^Die legendäre „Einkapselung“ erscheint und folgt dann.<div id="aoao" class="G_G o_O"><span class="bendan">Dumm</span> Aoao</div> Ein solcher Code kann unzählige Änderungen nach sich ziehen. Wenn Sie ihn immer noch nicht verstehen, beginnen Sie von vorne. ^^ Tatsächlich sind diese noch weit von echter Objektorientierung entfernt. Ich lerne gerade den Clickbait, aber er kann verwendet werden, um die Anwendung von ID und Klasse zu verstehen. |
<<: Docker stop stoppt/remove löscht alle Container
>>: Wichtige Updates für MySQL 8.0.23 (neue Funktionen)
Artikel empfehlen
Die Grundprinzipien und die detaillierte Verwendung des Ansichtsfensters
1. Übersicht über das Ansichtsfenster Mobile Brow...
Ein einfaches Beispiel zum Erstellen einer dünnen Linientabelle in HTML
Wenn Sie wissen möchten, wie Sie diese Tabelle mi...
Grafisches Tutorial zur Installation und Konfiguration von Ubuntu 18.04 MySQL 8.0
In diesem Artikel wird die Installations- und Kon...
Mehrere Möglichkeiten zum Ändern des MySQL-Passworts
Vorwort: Bei der täglichen Verwendung der Datenba...
Tutorial-Diagramm zur kostenlosen 64-Bit-Installationsversion von MySQL 5.7.31
1. Herunterladen Download-Adresse: https://dev.my...
Drei Möglichkeiten zur Implementierung virtueller Hosts unter Linux7
1. Gleiche IP-Adresse, unterschiedliche Portnumme...
Eine einfache Möglichkeit, alle Funktionen des Einkaufswagens in Vue zu implementieren
Die Hauptfunktionen sind wie folgt: Produktinform...
Detaillierte Erklärung des Responsive-Prinzips von Vue3
Inhaltsverzeichnis Überprüfung der responsiven Pr...
Beheben von Problemen mit impliziter MySQL-Konvertierung
1. Problembeschreibung root@mysqldb 22:12: [xucl]...
Gründe und Lösungen für das fehlgeschlagene Einfügen von Emoji-Ausdrücken in MySQL
Fehlerszenario Beim Aufrufen von JDBC zum Einfüge...
Tomcat-Konfiguration und wie man ihn in Eclipse startet
Inhaltsverzeichnis So installieren und konfigurie...
So zeigen Sie die Netzwerkroutingtabelle in Ubuntu an
Was sind Routing und Routing-Tabellen in Linux? U...
Lösen Sie das Problem beim Einrichten des chinesischen Sprachpakets für den Docker-Container
Wenn Sie Docker verwenden, suchen Sie in Docker n...
Native JS-Implementierung der Lupenkomponente
In diesem Artikelbeispiel wird der spezifische Co...
Methode zum Knacken der Registrierung der FlashFXP-FTP-Clientsoftware
Die Downloadadresse von FlashFXP lautet: https://...