1. Verwenden Sie CSS-Abkürzungen,
um 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 klar, es sei denn, der Wert ist 0.
Das Vergessen, die Einheit der Größe 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, 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. Groß-/Kleinschreibung
Bei der Verwendung von CSS in XHTML wird bei den 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. Brechen Sie die Elementqualifizierung vor class und id ab
. Wenn Sie schreiben, um eine Klasse oder id für ein Element zu definieren, können Sie die vorherige Elementqualifizierung weglassen, da ID auf einer Seite eindeutig ist und Klassen mehrfach auf der Seite verwendet werden können . Es macht für Sie keinen Sinn, ein Element zu qualifizieren. Zum Beispiel:
div#content { /* Deklarationen */ }
fieldset.details { /* Deklarationen */ }
Kann als #content { /* Deklarationen */ } geschrieben werden
.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. Es besteht 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. können direkt im untergeordneten Element vererbt werden und müssen nicht wiederholt werden. Beachten Sie jedoch, dass der Browser Ihre Definition möglicherweise mit einigen Standardwerten überschreibt.
7. Das Nearest-First-Prinzip
hat Vorrang, wenn es mehrere Definitionen desselben Elements gibt
In der CSS-Datei haben Sie das Element p und eine Klasse „update“ 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 Label 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
CSS-Anfänger wissen nicht, dass die Verwendung von Nachkommen-Selektoren 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:
. 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;
Es kann als Hintergrund geschrieben werden:url(images/***.gif) #333;
Wenn Sie Anführungszeichen hinzufügen, führt dies zu einigen Browserfehlern.
11. Gruppenselektoren (Gruppenselektoren)
Wenn einige Elementtypen, Klassen oder IDs einige Attribute gemeinsam haben, können Sie Gruppenselektoren verwenden, um mehrfache 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,sans-serif;
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 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: :link :visited :hover :active. Der erste extrahierte Buchstabe ist „LVHA“, den Sie sich als „LoVe HAte“ (Gefällt mir oder Hass) 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. Floats löschen
Ein sehr häufiges CSS-Problem besteht darin, dass bei der Positionierung mit Floating 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 (Zentrierung)
Dies ist eine einfache Technik, aber es lohnt sich, sie noch einmal zu sagen, da ich zu viele Anfängerfragen sehe, die Folgendes 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:
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 mit 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. Es gibt hier zu viele CSS-Techniken (Hacks), egal, was Microsoft veröffentlichen wird In der Betaversion von IE7 sind beide Methoden die sichersten.
1. Annotationsmethode (a) verbirgt eine CSS-Definition im IE. Sie können 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 für bedingte Kommentare Eine weitere Methode, die meiner Meinung nach besser testbar ist als CSS-Hacks, ist die Verwendung der privaten Attribut-bedingten Kommentare (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:
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 für 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.