Ich habe meinen Blog schon lange nicht mehr aktualisiert und bin erschöpft. Aber es gibt noch viele Dinge, die ich tun möchte, wie z. B. merceCSS aktualisieren, die bisher zusammengefassten modularen Inhalte sortieren und mit allen teilen, an Austauschtreffen teilnehmen usw.
Ich habe das modulare Design oft erwähnt, wie zum Beispiel „ Modularität aus IKEAs Möbeldesign “, „ Modulares Denken bei der Seitenrekonstruktion “, „ Schlüsselpunkte der Komponentenproduktion bei der Seitenrekonstruktion “, die alle mit Modularität zusammenhängen, aber ich habe nie über das Spezifische gesprochen Implementierungsinhalte vor, nur ein paar Gedanken. Dieses Mal werde ich mich auf den Implementierungsaspekt konzentrieren und einige der bisher durchgeführten Modularisierungen zusammenfassen.
Um bei der Modularisierung gute Arbeit zu leisten, ist es meiner Meinung nach sehr wichtig, den Umfang der Stile zu verstehen. Daher ist dieser Teil der erste Artikel dieser Serie.
Alle Schüler, die Programme geschrieben haben, sollten wissen, dass Variablen einen Gültigkeitsbereich haben (wenn Sie es nicht wissen, fragen Sie Google selbst, ich werde es hier nicht erklären, es gibt auch Probleme mit dem Gültigkeitsbereich, dh dem Umfang der Definition). Es ist leicht zu verstehen, wie zum Beispiel der Umfang von p unten:
/*作用域：全局*/ p{text-indent:2em;}
/*作用域：.demo这个类中*/ .demo p{color:#000000;}
Die Priorität von Stilselektoren ist das Grundwissen über Lernstile. Lassen Sie uns kurz darauf eingehen:
Die verwendeten Regeln sind ebenfalls sehr einfach, das heißt, die Gewichte der Selektoren werden addiert, und wenn die Gewichte gleich sind, hat das später definierte Vorrang . Obwohl es sehr einfach ist, kann es leicht zu wiederholten CSS-Definitionen und redundantem Code kommen, wenn Sie beim Schreiben nicht aufpassen.
Aus dem oben Gesagten können wir zwei Schlüsselfaktoren ableiten:
Welchen Nutzen hat es, das Gewicht des Stils zu kennen? Es kann zum Beispiel so verwendet werden: Um das einfachste Beispiel zu geben:
body{color:#555555;}.demo{color:#000000;}
<p>这里的文字颜色受全局定义的影响</p>
<div class="demo"><p>这里的文字颜色受类demo定义的影响</p></div>
<p class="demo">这里的文字颜色受类demo定义的影响</p>
Wenn Sie die Gewichtung des Stils kennen, wissen Sie, wie das obige Beispiel funktioniert. Eine weitere Anwendung ist die Modularisierung, wie die Beispiele in „ Modularisierung von IKEA Furniture Design “, für Details gehen Sie bitte weiter.