Achtzehn CSS-Kenntnisse, die ich über einen langen Zeitraum hinweg gesammelt habe

In letzter Zeit fragen mich Freunde oft nach einigen CSS-Problemen, auf die ich bei der Arbeit stoße. Sie können CSS immer nicht gut kontrollieren, was sich auf die Effizienz von CSS auswirkt. Lassen Sie mich die Fehler analysieren und zusammenfassen, um allen die Verwendung von CSS zu erleichtern.

Dieser Artikel fasst alle Techniken und Kompatibilitätslösungen zusammen, die ich gelernt habe, seit ich mit der Verwendung von CSS-Layoutmethoden begonnen habe. Ich werde mich darauf konzentrieren, einige Fehler zu erklären, die Anfänger häufig machen (einschließlich derjenigen, die ich selbst mache). Wenn Sie bereits ein CSS-Meister sind, kennen Sie diese Erfahrungen und Fähigkeiten möglicherweise bereits. Wenn Sie mehr haben, können Sie mir hoffentlich helfen.
1. Verwenden Sie CSS-Abkürzungen

Die Verwendung von Abkürzungen kann dazu beitragen, die Größe Ihrer CSS-Datei 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. Außerdem 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 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 verwenden 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 Klasse und ID ab.

Wenn Sie schreiben, um die Klasse oder ID für ein Element zu definieren, können Sie die vorherige Elementqualifizierung weglassen, da die ID vorhanden ist Eine Seite ist eindeutig, während 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 geschrieben werden als
#content { /* Deklarationen */ }
.details { /* Deklarationen */ }

Dadurch können einige Bytes eingespart werden.
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:
* {
margin:0; 0;
}

6. Keine Notwendigkeit, vererbbare Werte wiederholt zu definieren
In CSS erben untergeordnete Elemente automatisch die Attributwerte des übergeordneten Elements B. Farbe, Schriftart usw., die bereits im übergeordneten Element enthalten sind. Nach der Definition kann es ohne wiederholte Definition direkt an untergeordnete Elemente vererbt werden. Beachten Sie jedoch, dass der Browser Ihre Definition möglicherweise mit einigen Standardwerten überschreibt.

7. Prinzip „Nächstes erstes“
Wenn es mehrere Definitionen desselben Elements gibt, hat die nächstliegende Definition (Minimalebene) Vorrang. Zum Beispiel gibt es diesen Code

Update: Lorem ipsum dolor set

In der CSS-Datei haben Sie das Element p und eine Klasse „update“
p {
margin:1em 0 ; >font-size:1em;
color:#333;}
.update {
font-weight:bold;
color:#600; 🎜>In diesen beiden Definitionen wird class="update" verwendet, da class näher als p liegt. Weitere Informationen finden Sie im W3C-Artikel „Berechnen 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

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 Nachkommenselektoren 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:

Item 1

Die CSS-Definition dieses Codes lautet:
div#subnav ul { /* Einige Stile */ }
div#subnav ul li.subnavitem { /* Einige Stile */ }
div#subnav ul li.subnavitem a.subnavitem { /* Etwas Styling */ }
div#subnav ul li.subnavitemselected { /* Einige Styling */ }
div#subnav ul li.subnavitemselected a.subnavitemselected { /* Etwas Styling */ }

Sie können die folgende Methode verwenden, um den obigen Code zu ersetzen
Die Stildefinition lautet:
# subnav { /* Einige Styling */ }
#subnav li { /* Einige Styling */ }
#subnav a { /* Einige Styling */ }
#subnav .sel { /* Einige Styling * / }
#subnav .sel a { /* Etwas Styling */ }

Durch die Verwendung von Unterselektoren können Sie Ihren Code und Ihr CSS prägnanter und leichter lesbar machen.
10. Dem Hintergrundbildpfad müssen keine Anführungszeichen hinzugefügt werden

Um Bytes zu sparen, empfehle ich, keine Anführungszeichen zum Hintergrundbildpfad hinzuzufügen, da dies bei Anführungszeichen nicht der Fall ist notwendig. Zum Beispiel:
background:url("images/***.gif") #333;

kann geschrieben werden als
background:url(images/***.gif) #333;

Wenn Sie Anführungszeichen hinzufügen, wird dies der Fall sein Ursache Einige Browserfehler.
11. Gruppenselektoren
Sie können dies verwenden, wenn einige Elementtypen, Klassen oder IDs gemeinsame Attribute haben. Dies kann passieren Sparen Sie eine Menge Bytes.

Um beispielsweise 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;
margin:1em 0;

Wenn es einzelne Elemente gibt Wenn Sie bei der Verwendung unabhängige Stile definieren müssen, können Sie neue Definitionen hinzufügen oder die alten Definitionen überschreiben, zum Beispiel:
h1 {font-size:2em}
h2 {font-size:1.6em} 🎜>
12. Geben Sie Link-Stile in der richtigen Reihenfolge an

Wenn Sie mehrere Statusstile eines Links definieren, achten Sie auf die Reihenfolge, in der sie geschrieben werden ist: :link :visited :hover :active. Sie können es als „LoVe HAte“ bezeichnen, Sie können es als „Link Specificity“ bezeichnen >Wenn Ihre Benutzer die Tastatursteuerung verwenden 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 davon ab, was Sie schreiben Wenn Sie möchten, dass das Fokuselement den :hover-Effekt anzeigt, setzen Sie :focus vor :hover; wenn Sie möchten, dass der Fokuseffekt den :hover-Effekt ersetzt, setzen Sie :focus nach :hover 13. Löschen Sie Floats

Ein sehr häufiges CSS-Problem besteht darin, dass bei der Positionierung die untere Ebene von der schwebenden Ebene abgedeckt wird oder die in der Ebene verschachtelten Unterebenen den Umfang überschreiten Die übliche Lösung besteht darin, nach der schwebenden Ebene ein zusätzliches Element hinzuzufügen, z. B. ein div oder ein br, und seinen Stil als klar zu definieren: Beides ist etwas weit hergeholt, aber zum Glück gibt es eine gute Lösung in diesem Artikel „So löschen Sie Floats ohne strukturelle Markierung“ (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 oben genannte klare Methode ist für Sie besser geeignet? Dies hängt von der jeweiligen Situation ab und wird hier nicht besprochen. Darüber hinaus haben einige hervorragende Artikel die Anwendung von Float sehr deutlich gemacht. Es wird empfohlen, Folgendes zu lesen: „Float-Layouts“
Horizontale Zentrierung (Zentrierung).

Das ist ein einfacher Trick, aber es lohnt sich, ihn noch einmal zu sagen, weil 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, gehen Sie wie folgt vor:

Sie können es wie folgt definieren, um es horizontal zu zentrieren:
#wrap {
width:760px; /* Passen Sie die Breite Ihrer Ebene an*/
margin:0 auto; }
Aber IE5/Win kann diese Definition nicht korrekt anzeigen, wir verwenden Ein sehr nützlicher Trick zur Lösung: Verwenden Sie das text-align-Attribut.So:
body {
text-align:center;}
#wrap {
width:760px; /* Ändern Sie die Breite Ihrer Ebene */
margin : 0 auto;
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 nur zentrieren). Der zweite text-align:left; dient dazu, den Text in #warp nach links zu zentrieren.

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 funktioniert 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 ich CSS in IE4 ausblenden, ich habe auch 5 Bytes gespart. Wenn Sie die detaillierte Erklärung der @import-Syntax erfahren möchten, können Sie sich hier „CSS-Filterdiagramm von Centricle“ ansehen

16. Optimierung für IE
Manchmal müssen Sie das optimieren IE-Browserfehler definieren hier zu viele CSS-Hacks. Unabhängig davon, ob Microsoft CSS in der kommenden IE7-Betaversion besser unterstützt, sind diese beiden Methoden die sichersten.

* 1. Kommentarmethode
o (a) Um eine CSS-Definition im IE auszublenden, können Sie einen untergeordneten Selektor verwenden:
html>body p {
/ * Definitionsinhalt */
> ; 🎜> Erklärungen
Mit dieser Methode können Sie einige Stile separat für den IE definieren, ohne die Definition des Haupt-Stylesheets zu beeinträchtigen. So:

17. Debugging-Tipps: Wie groß sind die Ebenen?

Wenn beim Debuggen von CSS ein Fehler auftritt, 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 des Elements erhöht und die Grenzen oben und unten den Wert des vertikalen Randes zerstören, sodass die Verwendung des Hintergrunds sicherer ist.

Ein weiteres Attribut, das häufig Probleme verursacht, ist die Gliederung. 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.
selector1,
selector2 {
property:value; }
Bei der Verwendung von Union-Definitionen schreibe ich normalerweise jeden Selektor in einer eigenen Zeile, damit Sie sie leichter in der CSS-Datei finden können. 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 hinzuzufügen. Obwohl die Regeln es erlauben, das Semikolon nach dem letzten Attributwert wegzulassen, vergisst man leicht, das Semikolon hinzuzufügen, wenn man einen neuen hinzufügen möchte Stil. Fehler, also ist es besser, sie alle hinzuzufügen.

Abschließend wird die schließende Klammer} in eine eigene Zeile geschrieben.

Achtzehn CSS-Kenntnisse, die ich über einen langen Zeitraum hinweg gesammelt habe_Erfahrungsaustausch