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, wie zum Beispiel: width:100px width:100em. Es gibt nur zwei Ausnahmen, bei denen Einheiten nicht definiert werden können: 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. Groß- und Kleinschreibung beachten
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 auf der Seite mehrfach verwendet werden kann. Es macht für Sie keinen Sinn, ein Element zu qualifizieren. Zum Beispiel:
div#content { }
fieldset.details { }
kann geschrieben werden als
#Inhalt { }
.details { }
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 wie folgt auf 0 festlegen:
* {
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 so aufrufen
Der endgültige Anzeigeeffekt besteht darin, dass dieses Div sowohl einen #666-Hintergrund als auch einen 10-Pixel-Rand 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:
Die CSS-Definition für diesen Code lautet:
div#subnavul { }
div#subnavulli.subnavitem { }
div#subnavulli.subnavitem a.subnavitem { }
div#subnavulli.subnavitemselected { }
div#subnavulli.subnavitemselected a.subnavitemselected { }
Sie können den obigen Code durch die folgende Methode ersetzen
Die Stildefinition lautet:
#subnav { }
#subnavli { }
#subnav a { }
#subnav .sel { }
#subnav .sel a { }
Verwenden Sie Unterselektoren, um Ihren Code und Ihr CSS prägnanter und leichter lesbar zu gestalten.
10. Dem Hintergrundbildpfad müssen keine Anführungszeichen hinzugefügt werden
Um Bytes zu sparen, empfehle ich, den Pfad des Hintergrundbilds nicht in Anführungszeichen zu setzen, da Anführungszeichen nicht erforderlich sind. Zum Beispiel:
Hintergrund:URL(Bilder
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 {
Breite:760px;
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:
@import-URL(main.css);
Diese Methode funktionierte jedoch nicht für IE4, was mir eine Zeit lang Kopfschmerzen bereitete. Später habe ich es so geschrieben:
@import main.css;
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 {
}
(b) Die folgende Schreibmethode kann nur vom IE-Browser verstanden werden (vor anderen Browsern verborgen).
* html p {
}
(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.
17. Debugging-Tipps: Wie groß sind die Ebenen?
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.
Leerzeichen und Zeilenumbrüche erleichtern das Lesen.
