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
Erläuterung des Vue.js $refs-Anwendungsfalls
Trotz Props und Events müssen Sie manchmal immer ...
Unterschiede zwischen diesem Schlüsselwort in NodeJS und Browsern
Vorwort Jeder, der JavaScript gelernt hat, muss s...
So implementieren Sie eine Maskenebene in HTML So verwenden Sie eine Maskenebene in HTML
Die Verwendung von Maskenebenen in Webseiten kann...
vue-pdf realisiert Online-Dateivorschau
In diesem Artikelbeispiel wird der spezifische Co...
Zusammenfassung der bei der Arbeit häufig verwendeten Linux-Befehle
Verwenden Sie bei der Arbeit mehr Open-Source-Too...
React implementiert eine mehrkomponentige Wertübertragungsfunktion über Conetxt
Die Wirkung dieser Funktion ist ähnlich wie vue的p...
Die konkrete Umsetzung des JavaScript-exklusiven Denkens
Im vorherigen Blog hat Xiao Xiong die Methoden ve...
Geplante vollständige MySQL-Datenbanksicherung
Inhaltsverzeichnis 1. MySQL-Datensicherung 1.1. m...
Lösung für die Inkonsistenz zwischen Crontab-Ausführungszeit und Systemzeit
Vorwort Unter LINUX werden periodische Aufgaben n...
Mysql-Sortierung und Paginierung (Order by & Limit) und vorhandene Fallstricke
Sortierabfrage (Sortieren nach) Im E-Commerce: Wi...
MySQL-Index für Anfänger
Vorwort Da die wichtigste Datenstruktur im MySQL-...
Schritte zur Bereitstellungsmethode für Docker Stack für Webcluster
Docker wird immer ausgereifter und seine Funktion...
Einfache Schritte zur Implementierung der Autorisierung eines öffentlichen H5 WeChat-Kontos
Vorwort Gestern gab es ein Projekt, das die Imple...
So verwenden Sie die Vue3-Komponente zum asynchronen Laden von Daten Suspense
Inhaltsverzeichnis Vorwort Komponenten erstellen ...
JavaScript implementiert eine Seiten-Scrolling-Animation
Inhaltsverzeichnis Erstellen eines Layouts CSS-St...