Shorthand Erklärung Gruppen

Durch die Verwendung von Stylesheets, kann es viele Anzeichen dafür sein. Einige dieser Labels sind unnötig und nur vor Ort zu stehlen. Stattdessen optimieren wir unser Stylesheet. Dabei wird es auch schnell zu laden und zeigen Sie die Seite schneller. Ein anderes Wort dafür ist die sogenannte kurze Erklärung Hand Gruppen. Wir können dies auf zwei Arten tun.

Beginnen wir mit einem traditionellen Label kann wie folgt aussehen:

1. html,body{
2. background-color:#fff;
3. background-image: url(bild.gif);
4. background-attachment: repeat;
5. font-family:arial,tahoma,Verdana, Helvetica, sans-serif;
6. font-size:11px;
7. font-color:#000;
8. font-weight: bold;
9. font-variant: small-caps;
10. ine-height: 15px;
11. border-left:1px;
12. border-right:1px;
13. border-bottom:1px;
14. border-top:1px;
15. border-color:#000;
16. border-style:solid;
17. padding-bottom:10px;
18. padding-top;10px;
19. margin-left:5px;
20. margin-right:10px;
21. margin-top:5px;
22. margin-bottom:10px;
23. }

Ziemlich viel Code - richtig? Und sicherlich sehr übertrieben Code.

Spricht man von Shorthand Erklärungen, bedeutet dies die Schaffung eines einheitlichen Code für jeden Wert und dass dieser Code verwendet nur das Nötigste für die Marken-Wert-Definitionen.

Lassen Sie uns mit dieser Erklärung css Kennzeichnung der Gruppen beginnen und sehen, was für ein Unterschied es ist. Dann reduzieren wir weiter, um einige unserer Codes zu Shorthand Erklärungen. Wir nehmen es Schritt für Schritt!

Erklärung Group

Die allererste Label haben wir, die wir nicht ändern sollte, ist:

1. html,body{

Der nächste Schritt ist das Formatieren im Hintergrund und einem möglichen Hintergrund. Wenn wir das hier tun:

1. background:#fff url(bild.gif) repeat fixed;

Wie können Sie nun sehen, haben wir "Come Together" der Codes in einem. Es besteht keine Notwendigkeit, um jeden Wert Erklärung für sich selbst zu drucken, aber es ist durchaus akzeptabel, dies zu tun in der gleichen Bewertung. Was man beachten sollte, ist, dass, um Code Holen Sie das Optimum in der Semikolons ist hinterlasse einen Leerraum zwischen den (';') wäre es auch, dass aus irgendeinem Grund die Sie formatieren möchten Ihre Tapete, können Sie diese Schritte umfassen:

1. background:#fff url(bild.gif) repeat-x;
2. background:#fff url(bild.gif) repeat-y;
3. background:#fff url(bild.gif) no-repeat left top;
4. background:#fff url(bild.gif) no-repeat;

Der nächste Schritt ist, um die Schriftart Erklärungen zu minimieren. Es besteht keine Notwendigkeit, um die gleiche Definition zu wiederholen, nur um Wert Erklärungen sind unterschiedlich. Einfachste Weg, es zu tun mögen dieses:

1. font: bold 11px/15px arial,tahoma,Verdana, Helvetica, sans-serif #000; letter-spacing: 2px; font-variant: small-caps;

Hier sind alle Definitionen ein Wert zusammengefasst und in der gleichen Marke - Schriftart. Leichter, nicht wahr?

Wenn Sie dann das Format padding und margin Erklärung in einer Gruppe, müssen wir wissen, in welcher Reihenfolge wir sie neu formatieren. Normalerweise schreiben wir entweder nach rechts oder links, aber wenn man die Marke, so dass es funktioniert Gruppe. Stattdessen gibt es eine Regel, die Gespräche über die Reihenfolge gefolgt zu sein. Dies ist nicht nur Ihr padding ohne Wert Definitionen, die ein Objekt enthalten kann.

Als Value-Definition, haben wir unsere Margen. Them, müssen wir kontrollieren, wie ein Block sollte auf die anderen Blöcke beziehen. Let's umschreiben die Margen, so dass sie die gleiche einfache Kodierung der zweite folgen. Sicher, du wirst sehen, dass unsere Margen werden auch nach dem gleichen Prinzip wie Polsterung. Er tut dies, weil eine Marge gesamte Objekt enthalten kann eine - blockiert.

Lassen Sie uns beginnen, um zu sehen, wie dieses Phänomen werden kann.

1. margin:5px 10px 10px 5px;

Hier haben wir zuerst in das Aussehen einer Marge von 10 Pixel rechts und unten, und um 5 Pixel links und oben. Aber welche von diesen ist, wenn links und rechts und so weiter?

Der erste Wert gibt den Wert ist immer top - hier 5px eingestellt. Der zweite Wert ist richtig - hier 10px eingestellt. Der dritte Wert ist der Boden - hier 10px eingestellt, und schließlich haben wir das vierte Kennzeichnung Wert links - auf 5 Pixel.

In anderen Worten, dieser einfachen Code, der:

1. margin:5px(top) 10px(right) 10px(bottom) 5px(left);

Der nächste Schritt in unserer Gruppe Erklärung Polsterung. Wenn Sie sich in den Code an der Spitze wollen wir nur zu formatieren es in der oben und unten. Es gibt keinen Unterschied, wie wir mit unserer Grenze formatiert. Es ist das gleiche Prinzip hier.

1. padding: 10px 0 10px 0;

Was ist von dem ursprünglichen Code links ist umständlich, und daher diese:

1. html,body{
2. background:#fff url(bild.gif) left top repeat;
3. font: 11px arial,tahoma,Verdana, Helvetica, sans-serif;
4. color:#000;
5. line-height: 15px;
6. letter-spacing: 2px;
7. font-weight: bold;
8. font-variant: small-caps;
9. padding: 10px 0 10px 0;
10. margin: 5px 10px 10px 5px;
11. }

Was denken Sie?

Kurzer Hand Erklärung

Aber es ist ein Weg zur weiteren Minimierung der Codes. Solange es geht um die Bewertung derselben, können wir genauso gut in der gleichen Heftklammern. Wir gehen zurück und überprüfen unsere Formatierung von Schriften, so kann wie folgt in kurzer hand-Erklärung aussehen:

1. body{font: bold verdana 11/150 small-caps;}

Dieser einfache Code sagt uns, dass wir Verdana als Schrift wie, Schriftart sollte 11 Pixel und Zeilenhöhe wird auf 15 Punkte (Note gesetzt dem Schrägstrich zwischen den Werten), denn wir wollen, dass sie fett und Kapitälchen aussehen.

Wir würden nicht ein paar Definitionen, um Farbe, letter-spacing und so weiter, da diese Werte sind noch nicht vollständig von der kurzen Seite von allen Browsern unterstützt.

Kurzer Hand Erklärung ist daher, die Codes in css kann man die gleiche Definition zu minimieren. In diesem Beispiel, Abstand der einzige Brief-Label habe ich hinzugefügt, um ihre eigenen - die zweite schriftliche Gruppen haben wir gemeinsam in kurzen Erklärung Pflege. So viel weniger Codes zur Nachverfolgung und unterhaltsam zu schreiben!