1. Verwenden Sie CSS-Abkürzungen
Die Verwendung von Abkürzungen kann dazu beitragen, die Größe Ihrer CSS-Dateien zu reduzieren und sie leichter lesbar zu machen. Die Hauptregeln der CSS-Abkürzung finden Sie in der „Zusammenfassung der allgemeinen CSS-Abkürzungssyntax“, die hier nicht beschrieben wird.
2. Definieren Sie die Einheit eindeutig, es sei denn, der Wert ist 0
Das Vergessen, die Einheiten einer Dimension zu definieren, ist ein häufiger Fehler unter CSS-Neulingen. In HTML können Sie einfach width=100 schreiben, aber in CSS müssen Sie eine genaue Einheit angeben, zum Beispiel: width: 100px width:100em. Es gibt nur zwei Ausnahmen, wenn keine Einheiten definiert werden: Zeilenhöhe und 0-Wert. Darüber hinaus müssen der Einheit weitere Werte folgen. Achten Sie darauf, keine Leerzeichen zwischen dem Wert und der Einheit einzufügen.
3. Berücksichtigung der Groß- und Kleinschreibung
Bei der Verwendung von CSS in XHTML wird bei in CSS definierten Elementnamen die Groß-/Kleinschreibung beachtet. Um diesen Fehler zu vermeiden, empfehle ich, für alle Definitionsnamen Kleinbuchstaben zu verwenden. Bei den Werten von class und id wird in HTML und XHTML auch zwischen Groß- und Kleinschreibung unterschieden. Wenn Sie gemischte Groß- und Kleinschreibung schreiben müssen, stellen Sie bitte sorgfältig sicher, dass Ihre Definition in CSS mit den Tags in XHTML übereinstimmt.
4. Heben Sie die Elementbeschränkungen vor Klasse und ID auf
Wenn Sie schreiben, um eine Klasse oder ID für ein Element zu definieren, können Sie die vorherige Elementqualifizierung weglassen, da die ID auf einer Seite eindeutig ist und die Klasse auf der Seite mehrfach verwendet werden kann. Es macht für Sie keinen Sinn, ein Element zu qualifizieren. Zum Beispiel:
div#content { /* Deklarationen */ }
fieldset.details { /* Deklarationen */ } |
kann geschrieben werden als
#content { /* Deklarationen */ }
.details { /* Deklarationen */ } |
Das spart einige Bytes.
5. Standardwert
Normalerweise ist der Standardwert für die Polsterung 0 und der Standardwert für die Hintergrundfarbe ist transparent. Der Standardwert kann jedoch in verschiedenen Browsern unterschiedlich sein. Wenn Sie Angst vor Konflikten haben, können Sie die Rand- und Füllwerte aller Elemente am Anfang des Stylesheets auf 0 festlegen, wie folgt:
* {
Rand:0;
Polsterung:0;
} |
6. Keine Notwendigkeit, vererbbare Werte wiederholt zu definieren
In CSS erben untergeordnete Elemente automatisch die Attributwerte des übergeordneten Elements, wie z. B. Farbe, Schriftart usw., die im übergeordneten Element definiert wurden, und können ohne wiederholte Definition direkt im untergeordneten Element vererbt werden. Beachten Sie jedoch, dass der Browser Ihre Definition möglicherweise mit einigen Standardwerten überschreibt.
7. Aktuelles erstes Prinzip
Wenn es mehrere Definitionen desselben Elements gibt, wird der nächstgelegenen Definition (Minimalebene) Priorität eingeräumt. Zum Beispiel gibt es diesen Code
Update: Lorem ipsum dolor-Set
In der CSS-Datei haben Sie das Element p und ein Classupdate definiert
P {
margin:1em 0;
Schriftgröße:1em;
Farbe:#333;
}
.aktualisieren {
Schriftstärke:fett;
Farbe:#600;
} |
Von diesen beiden Definitionen wird class=update verwendet, da class näher als p liegt. Weitere Informationen finden Sie in W3Cs „Berechnung der Spezifität eines Selektors“.
8. Mehrere Klassendefinitionen
Ein Tag kann mehrere Klassen gleichzeitig definieren. Beispiel: Wir definieren zunächst zwei Stile, der erste Stil hat einen Hintergrund von #666; der zweite Stil hat einen 10-Pixel-Rahmen.
.one{width:200px;background:#666;}
.two{border:10px solid #F00;}
Im Seitencode können wir es so nennen. Der endgültige Anzeigeeffekt besteht darin, dass dieses Div sowohl einen #666-Hintergrund als auch einen 10-Pixel-Rahmen hat. Ja, das ist möglich, Sie können es ausprobieren.
9. Verwenden Sie Nachkommenselektoren
CSS-Anfänger wissen nicht, dass die Verwendung von Unterselektoren einer der Gründe ist, die ihre Effizienz beeinträchtigen. Unterselektoren können Ihnen dabei helfen, viele Klassendefinitionen zu speichern. Schauen wir uns den folgenden Code an:
〈div id=subnav〉
〈ul〉
〈li class=subnavitem〉 〈a href=# class=subnavitem〉Item 1〈/a〉〈/li〉
〈li class=subnavitemｓｌｍｃｔｔ〉 〈a href=# class=subnavitemｽｌｍｃｔｔ〉 Item 1〈/a〉 〈/li〉
〈li class=subnavitem〉 〈a href=# class=subnavitem〉 Item 1〈/a〉 〈/li〉
〈/ul〉
〈/div〉 |
Die CSS-Definition für diesen Code lautet:
div#subnav ul { /* Etwas Styling */ }
div#subnav ul li.subnavitem { /* Etwas Styling */ }
div#subnav ul li.subnavitem a.subnavitem { /* Etwas Styling */ }
div#subnav ul li.subnavitemselected { /* Etwas Styling */ }
div#subnav ul li.subnavitemselected a.subnavitemselected { /* Etwas Styling */ } |
Sie können den obigen Code durch die folgende Methode ersetzen
〈ul id=subnav〉
〈li〉 〈a href=#〉 Item 1〈/a〉 〈/li〉
〈li class=sel〉 〈a href=#〉 Item 1〈/a〉 〈/li〉
〈li〉 〈a href=#〉 Item 1〈/a〉 〈/li〉
〈/ul〉 |
Die Stildefinition lautet:
#subnav { /* Etwas Styling */ }
#subnav li { /* Etwas Styling */ }
#subnav a { /* Etwas Styling */ }
#subnav .sel { /* Etwas Styling */ }
#subnav .sel a { /* Etwas Styling */ } |
Verwenden Sie Unterselektoren, um Ihren Code und Ihr CSS prägnanter und leichter lesbar zu gestalten.
10. Es ist nicht erforderlich, dem Hintergrundbildpfad Anführungszeichen hinzuzufügen. Um Bytes zu sparen, empfehle ich, keine Anführungszeichen in den Hintergrundbildpfad einzufügen, da die Anführungszeichen nicht erforderlich sind. Zum Beispiel:
| Hintergrund:url(images/***.gif) #333; |
kann geschrieben werden als
| Hintergrund:url(images/***.gif) #333; |
Wenn Sie Anführungszeichen hinzufügen, führt dies zu einigen Browserfehlern.
11. Gruppenselektoren
Wenn einige Elementtypen, Klassen oder IDs einige Eigenschaften gemeinsam haben, können Sie Gruppenselektoren verwenden, um wiederholte Definitionen zu vermeiden. Dadurch können einige Bytes eingespart werden.
Zum Beispiel: Um die Schriftart, Farbe und den Rand aller Titel zu definieren, können Sie Folgendes schreiben:
h1,h2,h3,h4,h5,h6 {
Schriftfamilie:Lucida Grande,Lucida,Arial,Helvetica,serifenlos;
Farbe:#333;
margin:1em 0;
} |
Wenn es einzelne Elemente gibt, die während der Verwendung unabhängige Stile definieren müssen, können Sie neue Definitionen hinzufügen oder alte Definitionen überschreiben, zum Beispiel:
h1 {Schriftgröße:2em};
h2 { Schriftgröße: 1,6em } |
12. Geben Sie die Link-Stile in der richtigen Reihenfolge an
Wenn Sie CSS verwenden, um mehrere Statusstile eines Links zu definieren, achten Sie auf die Reihenfolge, in der sie geschrieben werden. Die richtige Reihenfolge ist: :link :visited :hover :active. Der erste extrahierte Buchstabe ist LVHA, den Sie sich als LoVe HAte (like to hate) merken können. Warum ist es so definiert? Sie können sich auf Eric Meyers „Link Specificity“ beziehen.
Wenn Ihre Benutzer die Tastatursteuerung verwenden müssen und den Fokus des aktuellen Links kennen müssen, können Sie auch das :focus-Attribut definieren. Die Wirkung des :focus-Attributs hängt auch von der Position ab, an der Sie schreiben. Wenn Sie möchten, dass das fokussierte Element den :hover-Effekt anzeigt, schreiben Sie :focus vor :hover; Sie setzen :focus nach :hover.
13. Schwimmer löschen
Ein sehr häufiges CSS-Problem besteht darin, dass bei Verwendung von Floating zur Positionierung die darunter liegende Ebene von der Floating-Ebene abgedeckt wird oder die in der Ebene verschachtelten Unterebenen den Umfang der äußeren Ebene überschreiten.
Die übliche Lösung besteht darin, ein zusätzliches Element hinter der schwebenden Ebene hinzuzufügen, z. B. ein div oder ein br, und seinen Stil als klar zu definieren: Both. Diese Methode ist etwas weit hergeholt, aber glücklicherweise gibt es eine gute Möglichkeit, sie zu lösen. Bitte lesen Sie diesen Artikel „So löschen Sie Floats ohne strukturelles Markup“ (Hinweis: Diese Website wird diesen Artikel so schnell wie möglich übersetzen).
Die beiden oben genannten Methoden können das Problem des schwebenden Überlaufs sehr gut lösen, aber was ist, wenn Sie die Ebene oder die Objekte in der Ebene wirklich löschen müssen? Eine einfache Methode ist die Verwendung des Überlaufattributs. Diese Methode wurde ursprünglich in „Simple Clearing of Floats“ veröffentlicht und wurde ausführlich in „Clearance“ und „Super simple Clearing Floats“ diskutiert.
Welche der oben genannten Clear-Methoden für Sie besser geeignet ist, hängt von der konkreten Situation ab und wird hier nicht näher erläutert. Darüber hinaus haben einige hervorragende Artikel die Anwendung von Float sehr deutlich gemacht. Es wird empfohlen, Folgendes zu lesen: „Floatorial“, „Containing Floats“ und „Float Layouts“.
14. Horizontale Zentrierung
Dies ist ein einfacher Trick, aber es lohnt sich, ihn noch einmal zu sagen, da ich so viele Anfängerfragen sehe, die diese Frage stellen: Wie zentriert man CSS horizontal? Sie müssen die Breite des Elements und den horizontalen Rand definieren, wenn Ihr Layout in einer Ebene (Container) enthalten ist, wie folgt:
undefiniert
Sie können es so definieren, dass es horizontal zentriert ist:
#wickeln {
width:760px; /* Ändern Sie die Breite Ihrer Ebene*/
Rand:0 automatisch;
} |
Aber IE5/Win kann diese Definition nicht korrekt anzeigen. Wir verwenden einen sehr nützlichen Trick, um das Problem zu lösen: Verwenden Sie das text-align-Attribut. So was:
Körper {
text-align:center;
}
#wickeln {
width:760px; /* Ändern Sie die Breite Ihrer Ebene*/
Rand:0 automatisch;
text-align:left;
} |
Die text-align:center;-Regel des ersten Körpers definiert, dass alle Elemente des Körpers in IE5/Win zentriert sind (andere Browser zentrieren nur den Text), und die zweite text-align:left dient dazu, den Text in #warp zu zentrieren die linke.
15. CSS importieren und ausblenden
Da ältere Browser kein CSS unterstützen, besteht ein gängiger Ansatz darin, CSS mithilfe der @import-Technik auszublenden. Zum Beispiel:
Diese Methode funktionierte jedoch nicht für IE4, was mir eine Zeit lang Kopfschmerzen bereitete. Später habe ich es so geschrieben:
Auf diese Weise kann CSS im IE4 ausgeblendet werden, es spart auch 5 Bytes. Wenn Sie die detaillierte Erklärung der @import-Syntax erfahren möchten, können Sie sich hier „Centricles CSS-Filterdiagramm“ ansehen.
16. Optimierung für IE
Manchmal müssen Sie einige spezielle Regeln für IE-Browserfehler definieren. Ich verwende hier nur zwei davon, unabhängig davon, ob Microsoft in der kommenden IE7-Betaversion besser ist am sichersten.
1. Anmerkungsmethode
(a) Um eine CSS-Definition im IE auszublenden, können Sie einen untergeordneten Selektor verwenden:
html>body p {
/* Definitionsinhalt */
} |
(b) Die folgende Schreibmethode kann nur vom IE-Browser verstanden werden (vor anderen Browsern verborgen).
* html p {
/* Deklarationen */
} |
(c) Manchmal möchten Sie, dass IE/Win aktiv, IE/Mac jedoch ausgeblendet ist. Sie können den Backslash-Trick verwenden:
/* */
* html p {
Erklärungen
}
/* */ |
2. Methode bedingter Kommentare
Eine andere Methode, die meiner Meinung nach bewährter ist als CSS-Hacks, ist die Verwendung der privaten Attribut-Bedingungskommentare (bedingte Kommentare) von Microsoft. Mit dieser Methode können Sie einige Stile separat für den IE definieren, ohne die Definition des Haupt-Stylesheets zu beeinträchtigen. So was:
undefiniert
17. Debugging-Fähigkeiten: Wie groß ist die Ebene?
Beim Debuggen von CSS-Fehlern müssen Sie wie eine Schreibmaschine sein und den CSS-Code Zeile für Zeile analysieren. Normalerweise definiere ich eine Hintergrundfarbe für die betreffende Ebene, damit klar ist, wie viel Platz die Ebene einnimmt. Einige Leute schlagen vor, den Rand zu verwenden, was im Allgemeinen möglich ist, aber das Problem besteht darin, dass der Rand manchmal die Größe von Elementen erhöht und die Grenzen oben und unten den Wert des vertikalen Rands zerstören, sodass die Verwendung des Hintergrunds sicherer ist.
Eine weitere Eigenschaft, die häufig Probleme verursacht, ist die Kontur. Outline sieht aus wie Boeder, hat jedoch keinen Einfluss auf die Größe oder Position des Elements. Nur wenige Browser unterstützen das Gliederungsattribut, die einzigen mir bekannten sind Safari, OmniWeb und Opera.
18. Schreibstil für CSS-Code
Beim Schreiben von CSS-Code hat jeder seine eigenen Schreibgewohnheiten in Bezug auf Einrückungen, Zeilenumbrüche und Leerzeichen. Nach ständigem Üben habe ich mich für den folgenden Schreibstil entschieden:
Selektor1,
Selektor2 {
Eigenschaft:Wert;
} |
Wenn ich Union-Definitionen verwende, schreibe ich normalerweise jeden Selektor in eine eigene Zeile, damit er in der CSS-Datei leichter zu finden ist. Fügen Sie zwischen dem letzten Selektor und den geschweiften Klammern { hinzu. Schreiben Sie außerdem jede Definition in eine eigene Zeile. Fügen Sie keine Leerzeichen ein.
Ich bin es gewohnt, nach jedem Attributwert ein Semikolon einzufügen. Obwohl die Regeln es nicht zulassen, dass das Semikolon nach dem letzten Attributwert geschrieben wird, vergisst man leicht, das Semikolon und hinzuzufügen, wenn man einen neuen Stil hinzufügen möchte einen Fehler verursachen, also fügen Sie ihn trotzdem hinzu.
Schließlich wird die schließende Klammer } in eine einzelne Zeile geschrieben, mit Leerzeichen und Zeilenumbrüchen, um die Lesbarkeit zu erleichtern.
