1. CSS-Reihenfolge

Zunächst wird angegeben, dass der Browser CSS von oben nach unten liest. Wir schreiben im Allgemeinen CSS und solange die Elemente diese Attribute haben, werden wir den gewünschten Effekt erzielen. Dies wird jedoch einen gewissen Einfluss auf die zukünftige Wartung und die Rendering-Effizienz des Browsers haben. Wie sollten wir also die Reihenfolge von CSS schreiben? Gibt es bestimmte Normen?

Zunächst wissen wir, dass CSS-Attribute nach Merkmalen in mehrere Kategorien unterteilt sind.

1. Geben Sie Elementmerkmale an, z display, position, float, Diese Attribute bestimmen die Layoutmethode

2. Geben Sie die Platzbelegung des Elements an, z. B. Zeilenhöhe, Rand, Abstand, Breite, Höhe usw . Diese Attribute bestimmen die Größe und Höhe des Elements

3. Geben Sie den eigenen Effekt des Elements an, z. B. Schriftgröße, Farbe, Hintergrund usw. Diese Attribute bestimmen die Wirkung des Elements

Wenn wir mit der Klassifizierung der CSS-Eigenschaften fertig sind, erhalten wir tatsächlich eine offensichtliche Antwort. Wir können uns vorstellen, CSS zu verwenden, um die Elemente in der Reihenfolge zu zeichnen unser eigenes Schreiben. Zum Beispiel:

p.detail {
  font-size: 10px;
  line-height: 12px;
  width: 30px;
  height: 30px;
  display: inline;        
}

Beschreibung: Dies ist ein Element mit einer Schriftgröße von 10 Pixel, Eine Zeilenhöhe von 12 Pixel, eine Breite von 30 Pixel und eine Höhe von 30 Pixel. Der Anzeigemodus ist Inline-Stil.

Wenn wir mit dem Lesen von Attributen beginnen, wird es für uns schwierig sein, das Element zu finden, da wir es nicht wissen die Eigenschaften und die Anzeigemethode des Elements. Als ich die letzte Zeile las, stellte ich fest, dass es sich um ein Inline-Element handelte und die Definition von Breite und Höhe ungültig wäre. Daher wird diese CSS-Schreibreihenfolge nicht empfohlen

p.detail {
  display: inline-block;
  margin-top: 20px;
  width: 100%;
  height: 20px;
  color: #fff;
  font-size: 10px;
}

Beschreibung: Dies ist ein Element, der Anzeigemodus ist der Inline-Block-Modus, die Höhe beträgt 20 Pixel, die Breite entspricht der des übergeordneten Elements, die Höhe beträgt 20 Pixel, die Farbe ist Weiß, die Schriftgröße beträgt 10 Pixel

Diese Schreibweise kann auf eine für uns leicht verständliche Weise gerendert werden

Zusammenfassung: Die empfohlene Spezifikation beim Schreiben von CSS besteht darin, zuerst die Attribute zu schreiben, die sich auswirken die Anzeigeeigenschaften der Elemente und schreiben Sie dann die Attribute, die die Position der Elemente beeinflussen, und schreiben Sie schließlich die internen Attribute des Elements

2. CSS-Schreiben, das die Hervorhebung auslöst Klicken oder Schweben

Wenn die Maus schwebt, geben wir oft den Inhalt an, der geändert werden muss. Fügen Sie dem Element einen aktiven Klassennamen hinzu und schreiben Sie dann die Attribute, die wir ändern müssen, in aktiv

Zum Beispiel:

.content {
  background: black;  
}
.active {
  background: white;
}

Wenn wir auf ein Element klicken, ändern wir die Hintergrundfarbe des Inhalts von Schwarz zu Weiß und fügen dann den Namen der aktiven Klasse zu .content hinzu Unser erwarteter Effekt. Manchmal müssen wir jedoch mehr als ein Attribut eines Elements ändern, wenn wir darauf klicken.

Was sollten wir tun, wenn die Schriftart des Symbolelements und des Span-Elements größer wird? und das andere wird rot, wenn wir auf ein Element mit dem Klassennamen .click klicken? Wir können dies tun

<div class="parent">
	<div class="icon-font"></div>
	<span class="text"></span>
</div>
<div class="click"></div>
<style>
　　.icon-active{
　　　　font-size: 40px;
　　}
　　.text-active{
　　　　color: red;
　　}
</style>
<script src="jquery.js?1.1.11"></script>
<script>
　　$(‘.click’).click(function() {
　　　　$(&#39;.icon-font&#39;).addClass(&#39;icon-active&#39;);
　　　　$(&#39;.text&#39;).addClass(&#39;text-active&#39;)
　　})
</script>

Dies kann unseren erwarteten Effekt erzielen, aber das ist der damit verbundene Reaktion von zwei Elementen. Wenn es drei oder mehr Elemente gibt, benötigen wir mehr Code.

In der Tat, aufmerksame Freunde, Sie haben vielleicht entdeckt, dass ich hier einen .parent-Tag habe Code zum .parent-Tag wie folgt:

<div class="parent">
	<div class="icon-font"></div>
	<span class="text"></span>
</div>
<div class="click"></div>
<style>
　　.active .icon-font{
　　　　font-size: 40px;
　　}
　　.active .text{
　　　　color: red;
　　}
</style>
<script src="jquery.js?1.1.11"></script>
<script>
　　$(‘.click’).click(function() {
　　　　$(&#39;.parent&#39;).addClass(&#39;active&#39;);
　　})
</script>

In diesem Fall müssen wir nur den Namen der aktiven Klasse zur nächstgelegenen äußersten Ebene hinzufügen css-Element und legen Sie dann den Stil der Nachkommenelemente unter diesem Klassennamen fest. Auf diese Weise müssen wir nur einen aktiven Klassennamen hinzufügen, um den gewünschten Effekt zu erzielen

Das obige ist der detaillierte Inhalt vonWorauf sollten Sie beim Schreiben von CSS achten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!