Eine weitere praktische Sammlung häufig verwendeter CSS-Abkürzungen und Syntax_Experience-Austausch

Warum CSS-Abkürzungen?

Beim Entwerfen von WEB-Standard-Webseiten ist es wichtig, eine große Menge CSS-Syntax zu schreiben. Im Allgemeinen können wir den entsprechenden CSS-Code automatisch über das Bedienfeld „CSS-Stil“ der Dreamweaver-Software generieren.

Obwohl der von der Software generierte CSS-Code klar und leicht verständlich ist, lässt die klare Erklärung der Balkenstildefinition durch CSS das Lesen des CSS-Codes gleichzeitig langwierig und kompliziert erscheinen Mit der Zeit wird auch die Anzahl der Bytes des CSS-Codes erhöht. Dies ist für Menschen, die nach hoher Effizienz und Perfektion streben, schwer zu tolerieren.

Wenn wir beispielsweise die Auffüllgröße für ein Element definieren, verwenden wir die Auffüllung. Wenn unterschiedliche Anforderungen für die Auffüllung oben, rechts, unten und links bestehen, kann der von der Software generierte Code so aussehen:


.t1 {
Polsterung oben: 3px;
Polsterung unten: 3px;
Polsterung links: 20px; >}



Um es einfach zu schreiben ist

Kopieren Sie den Code Der Code ist wie folgt folgt:

.t2 {

padding: 3px 20px 3px 20px;
}


Die vier Seitenwerte der Polsterung entsprechen oben (oben). ), rechts (rechts), unten (unten), links (links). Natürlich kann dieses Beispiel auch wie folgt abgekürzt werden:

Kopieren Sie den Code Der Code lautet wie folgt:

.t3 {

padding: 3px 20px 3px;



Wenn left (left) nicht verfügbar ist, ist der Standardwert der Wert von right (right). ), wenn unten (unten) nicht verfügbar ist, ist der Standardwert der Wert von oben, daher ist der einfachste Wert in diesem Beispiel:

.t4{
padding: 3px 20px}

(Wenn die Polsterung einen Wert hat, bedeutet dies natürlich, dass oben, rechts, unten und links gleich sind)




cnbruce

cnrose<style type="text/css"> <!-- .t1 { padding-top: 3px; padding-right: 20px; padding-bottom: 3px; padding-left: 20px; } .t2 { padding: 3px 20px 3px 20px; } .t3 { padding: 3px 20px 3px; } .t4 { padding: 3px 20px; } span { border: 1px solid #CCCCCC; } --> </style> <span class="t1">cnjames</span> <span class="t2">www.cnbruce.com</span> <span class="t3"></span><span class="t4"> </span> [Strg+A Alle auswählen Hinweis:
Wenn Sie externe Js einführen müssen, müssen Sie zum Ausführen eine Aktualisierung durchführen ] Das lange Beispiel im obigen Beispiel besteht aus 4 Codezeilen, die in einer Zeile Einführungscode zusammengefasst sind – das ist der Vorteil der CSS-Abkürzung. Natürlich werden wir oft, wenn wir die CSS-Erfahrungen anderer Leute kennenlernen, auch viele ähnliche CSS-Abkürzungen sehen. Wenn Sie es jedoch selbst nicht verstehen, werden Sie nicht verstehen, wie Sie diese CSS-Methoden und -Erfahrungen erlernen können. Daher müssen wir einige häufig verwendete CSS-Abkürzungssyntax verstehen und beherrschen.

Allgemeine CSS-Abkürzungssyntax
1, Hintergründe Hintergründe
Die Attribute des Hintergrunds sind wie folgt:
Hintergrundfarbe: #FFCCFF;
Hintergrundbild: URL(/images /2007-6 .jpg);
Hintergrundwiederholung: keine Wiederholung;
Hintergrundposition: Mitte unten;
Der CSS-Code kann wie folgt abgekürzt werden:


Hintergrund:#FCF URL(/images/2007-6.jpg) keine Wiederholung, feste Mitte unten;

Das ist Hintergrund: Hintergrundfarbe, Hintergrundbild, Hintergrundwiederholung, Hintergrundanhang, horizontale Hintergrundposition, vertikale Hintergrundposition
Die Hintergrundfarbe „#FFCCFF“ kann auch als „#FCF“ abgekürzt werden , was für hexadezimale Farbwerte gilt, wenn jeweils zwei Bits (RRGGBB) den gleichen Wert haben, kann auf die Hälfte gekürzt werden (RGB). Gleichzeitig muss das Hintergrundbild nicht in doppelte Anführungszeichen gesetzt werden.