Eine detaillierte Erklärung der DIV+CSS-Benennungsregeln kann zur SEO-Optimierung beitragen

1. Benennungskonventionen für CSS-Dateien

Vorschlag: Verwenden Sie Buchstaben, _, - und Zahlen. Es muss mit einem Buchstaben beginnen und darf nicht aus reinen Zahlen bestehen. Um die Verwaltung von Stilnamen nach der Entwicklung zu erleichtern, verwenden Sie für die Benennung bitte aussagekräftige Wörter oder Abkürzungen, damit Ihre Kollegen auf einen Blick erkennen, wozu der Stil gehört. So sparen Sie Zeit bei der Suche nach Stilen, zum Beispiel:
Der Kopfzeilenstil ist „header“. Für die linke Seite der Kopfzeile können Sie „header_left“ oder „header_l“ verwenden. Wenn es sich um eine Spaltenstruktur handelt, können Sie „box_1of3“ (die erste Spalte von drei Spalten), „box_2of3“ (die zweite Spalte von drei Spalten) und „box_3of3“ (die dritte Spalte von drei Spalten) verwenden. Für die anderen werde ich nicht einzeln Beispiele geben. Benennen Sie sie einfach gemäß den oben genannten Regeln.

Hier sind zu Ihrer Bequemlichkeit einige häufig verwendete Benennungswörter: (In Zukunft kann jeder die Wörter, die er während seiner Arbeit angesammelt hat, langsam weitergeben, sodass die Benennung aller einheitlicher wird und es nicht zu Situationen kommt, in denen mehrere Wörter dieselbe Bedeutung haben.)

Gesamtstil: global.css;
Struktureller Aufbau: layout.css;
Schriftstil: font.css;
Linkstil: link.css;
Druckstil: print.css;

Behälter: Behälter/Karton
Kopfzeile: Kopfzeile
Hauptnavigation: mainNav
Unternavigation: subNav
Top-Navigation: topNav
Website-Logo: Logo
Große Anzeige: Banner
Mitte der Seite: mainBody
Unten: Fußzeile
Menü: Menü
Menüinhalt: menuContent
Untermenü: Untermenü
Untermenüinhalt: subMenuContent
Suche: Suche
Suchbegriff: keyword
Suchbereich: Bereich
Tag-Text: tagTitle
Tag-Inhalt: tagContent
Aktuelles Tag: tagCurrent/currentTag
Titel: Titel
Inhalt: Inhalt
Liste: Liste
Aktueller Standort: currentPath
Seitenleiste: Seitenleiste
Symbol: Symbol
Notiz:
Anmeldung: Anmelden
Registrieren: registrieren
Spaltendefinition: column_1of3 (die erste von drei Spalten)
column_2of3 (die zweite von drei Spalten)
column_3of3 (die dritte von drei Spalten)

2. Die Verwendung und der Unterschied zwischen ID und Klasse

Wir wissen, dass wir beim Definieren eines Stils in einem Stylesheet entweder eine ID oder eine Klasse definieren können, zum Beispiel:

ID-Methode: #test{color:#333333}, rufe <div>-Inhalt <div> auf der Seite auf
CLASS-Methode: .test{color:#333333}, rufe <div class="test"> Inhalt <div> auf der Seite auf
Eine ID kann auf einer Seite nur einmal verwendet werden, auf eine Klasse kann jedoch mehrfach verwiesen werden.
Ich habe auf der Seite mehrere identische IDs verwendet und sie wurde im Internet Explorer normal angezeigt. Es scheint keinen Unterschied zwischen ID und Klasse zu geben. Hat die Verwendung mehrerer identischer IDs irgendwelche Auswirkungen?
Das Vorhandensein mehrerer identischer IDs auf einer Seite führt dazu, dass die W3-Validierung fehlschlägt.
In Bezug auf die Seitenanzeige ist dieser Fehler bei aktuellen Browsern immer noch möglich und die Verwendung mehrerer identischer IDs kann „im Allgemeinen“ zu einer normalen Anzeige führen. Wenn Sie jedoch JavaScript verwenden müssen, um dieses Div über die ID zu steuern, tritt ein Fehler auf.
Eine ID ist eine Bezeichnung, die dazu dient, unterschiedliche Strukturen und Inhalte zu unterscheiden, genau wie Ihr Name. Wenn sich zwei Personen mit demselben Namen in einem Raum befinden, kommt es zu Verwirrung.
Eine Klasse ist ein Stil, der auf jede Struktur und jeden Inhalt angewendet werden kann, genau wie ein Kleidungsstück.
Konzeptionell unterscheiden sie sich:
Die ID-Methode dient dazu, zuerst die Struktur/den Inhalt zu finden und dann den Stil dafür zu definieren; die Klassenmethode dient dazu, zuerst einen Stil zu definieren und ihn dann auf mehrere Strukturen/Inhalte anzuwenden.
Mit anderen Worten wird empfohlen, beim Schreiben von XHML+CSS bei struktureller Positionierung die ID zu verwenden, andernfalls die Klasse (so kann die ID des nicht strukturell positionierten Div-Blocks vom Programmierer selbst definiert werden).
Webstandards erwarten von jedem, dass er Code unter Einhaltung strenger Regeln schreibt.

3. Verwenden Sie CSS-Abkürzungen

Durch die Verwendung von Abkürzungen können Sie die Größe Ihrer CSS-Dateien verringern und sie leichter lesbar machen. Die wichtigsten Regeln für häufig verwendete CSS-Abkürzungen sind:

Farbe
Wenn die Werte je zweier Ziffern eines hexadezimalen Farbwertes gleich sind, können diese in zwei Hälften gekürzt werden, zum Beispiel:
#000000 kann als #000 abgekürzt werden; #336699 kann als #369 abgekürzt werden;
Kartongrößen werden üblicherweise auf vier Arten angegeben:
Eigenschaft: Wert1; bedeutet, dass alle Kanten den Wert Wert1 haben;
Eigenschaft: Wert1 Wert2; bedeutet, dass die Werte oben und unten Wert1 und die Werte rechts und links Wert2 sind
Eigenschaft: Wert1 Wert2 Wert3; bedeutet, dass der Wert oben Wert1 ist, die Werte rechts und links Wert2 sind und der Wert unten Wert3 ist
Eigenschaft: Wert1 Wert2 Wert3 Wert4; die vier Werte stehen jeweils für oben, rechts, unten und links
Eine praktische Methode zum Merken ist im Uhrzeigersinn: oben, rechts, unten, links. Spezifische Anwendungsbeispiele für Ränder und Polsterungen sind wie folgt:
Rand: 1em 0 2em 0,5em;
Grenze
Die Eigenschaften der Grenze sind wie folgt:
Rahmenbreite: 1px;
Rahmenstil: durchgezogen;
Rahmenfarbe: #000;
Es kann in einem Satz abgekürzt werden: border:1px solid #000;
Die Syntax lautet Rahmen:Breite, Stil, Farbe;
Hintergründe

Die Eigenschaften des Hintergrunds sind wie folgt:

Hintergrundbild:URL(Hintergrund.gif);
Hintergrundwiederholung: keine Wiederholung;
Hintergrundanhang: behoben;
Hintergrundposition: 0 0;
Es kann in einem Satz zusammengefasst werden: background:#f00 url(background.gif) no-repeat fixed 0 0;
Die Syntax lautet Hintergrund: Farbbild, Wiederholung der Anhängeposition;
Sie können einen oder mehrere dieser Eigenschaftswerte weglassen. Wenn Sie sie weglassen, wird der Standardwert des Browsers verwendet:
Farbe: transparent
Bild: keines
wiederholen: wiederholen
Anhang: Schriftrolle
Position: 0% 0%
Schriftarten

Die Schrifteigenschaften sind wie folgt:

Schriftstil: kursiv;
Schriftvariante: Kapitälchen;
Schriftstärke: fett;
Schriftgröße: 1em;
Zeilenhöhe: 140 %;
Schriftfamilie: „Lucida Grande“, serifenlos;
Es lässt sich zu einem Satz abkürzen: Schriftart: kursiv, Kapitälchen, fett 1em/140 % „Lucida Grande“, serifenlos;

Beachten Sie, dass Sie beim Abkürzen der Schriftartdefinition mindestens zwei Werte definieren müssen: Schriftgröße und Schriftfamilie.

Listen

Um die standardmäßigen Punkte und Seriennummern zu löschen, können Sie „list-style:none;“ schreiben.

Die Eigenschaften der Liste sind wie folgt:

Listenstiltyp: Quadrat;
Listenstil-Position:innen;
Listenstil-Bild:URL(Bild.gif);

Es kann auf einen Satz gekürzt werden: list-style:square inside url(image.gif);

4. Definieren Sie die Einheit explizit, es sei denn, der Wert ist 0

Das Vergessen, die Einheiten für die Abmessungen zu definieren, ist ein häufiger Fehler von CSS-Anfängern. In HTML können Sie einfach width=100 schreiben, in CSS müssen Sie jedoch eine genaue Einheit angeben, etwa: width:100px width:100em. Es gibt nur zwei Ausnahmen, bei denen Sie Einheiten undefiniert lassen können: Zeilenhöhe und Nullwert. Abgesehen davon muss allen anderen Werten die Einheit folgen. Achten Sie darauf, dass zwischen Wert und Einheit keine Leerzeichen eingefügt werden.

5. Groß- und Kleinschreibung beachten

Bei der Verwendung von CSS in XHTML muss bei in CSS definierten Elementnamen die Groß-/Kleinschreibung beachtet werden. Um diesen Fehler zu vermeiden, empfehle ich, für alle Definitionsnamen Kleinbuchstaben zu verwenden.
Auch bei den Werten von Klasse und ID wird in HTML und XHTML zwischen Groß- und Kleinschreibung unterschieden. Wenn Sie Groß- und Kleinschreibung verwenden müssen, stellen Sie bitte sicher, dass Ihre CSS-Definition mit den Tags in XHTML übereinstimmt.

6. Heben Sie die Elementbeschränkungen vor Klasse und ID auf

Wenn Sie für ein Element eine Klasse oder ID definieren, können Sie die vorangestellte Elementqualifizierung weglassen, da IDs innerhalb einer Seite eindeutig sind und Klassen innerhalb einer Seite mehrfach verwendet werden können. Es macht keinen Sinn, sich auf ein bestimmtes Element zu beschränken. Zum Beispiel:
div#id1{} kann als #id1{} geschrieben werden
Dadurch werden einige Bytes gespart.

7. Standardwerte

Normalerweise sind die Standardwerte für Polsterung und Rand 0 und der Standardwert für die Hintergrundfarbe ist transparent. Allerdings können die Standardwerte in verschiedenen Browsern unterschiedlich sein. Wenn Sie Konflikte befürchten, können Sie die Rand- und Füllwerte aller Elemente am Anfang des Stylesheets wie folgt auf 0 setzen:

* { 
Polsterung: 0; 
Rand: 0 
}

Oder definieren Sie es für ein Element:

ul,li,div,span { 
Polsterung: 0; 
Rand: 0 
}

8. CSS-Priorität

Inline-Stil > ID-Selektor > Klassen-, Pseudoklassen- und Attributselektoren > Typ, Pseudoelement

erklären:

*Inline-Stil: Das Stilattribut eines Elements, z. B. <div style="color:red;"></div>, wobei color:red; der Inline-Stil ist.
*ID-Selektor: Das ID-Attribut des Elements, z. B. <div></div>, kann den ID-Selektor #content verwenden.
* Pseudoklasse: Am gebräuchlichsten ist die Anker-Pseudoklasse (a), wie beispielsweise a:link, a:visited.
* Attributselektoren: Beispielsweise enthält div[class=demo] div-Elemente mit der Klasse demo
*Typauswahl: HTML-Tagauswahl, z. B. div .demo, das div-Element enthält Elemente mit der Klasse demo
*Pseudoelement-Selektor: z. B. div:first-letter, das erste Wort unter dem div-Element.

9. Keine Neudefinition geerbter Werte erforderlich

In CSS erben untergeordnete Elemente automatisch die Eigenschaftswerte übergeordneter Elemente, wie etwa Farbe und Schriftart. Diejenigen, die im übergeordneten Element definiert wurden, können direkt und ohne wiederholte Definition an das untergeordnete Element vererbt werden, es sei denn, der Zweck besteht darin, den Stil des aktuellen Elements zu ändern, ohne den Eigenschaftswert des übergeordneten Elements zu verwenden. Beachten Sie jedoch, dass der Browser Ihre Definition möglicherweise mit einigen Standardwerten überschreibt.

10. Mehrere CSS-Stildefinitionen, Attributanfügung und Duplizierung als letzte Priorität

Ein Tag kann mehrere Klassen gleichzeitig definieren oder Attribute wiederholt in derselben Klasse definieren. Zum Beispiel:

Lassen Sie uns zunächst zwei Stile definieren.

.one{width:200px;background:url(1.jpg) no-repeat left top;} 
.two{border:10px solid #000; background:url(2.jpg) no-repeat left top;}

Im Seitencode können wir es folgendermaßen aufrufen:

<div class="eins" zwei></div>

Was ist also der endgültige Anzeigeeffekt dieses Div-Stils? ? Welches sollte als Standard für die Duplizierung verwendet werden? ?

Auf <div class="one" two></div> werden die folgenden Stile angewendet:

Breite: 200px; 
Rand: 10px durchgezogen #000; 
Hintergrund: URL (2.jpg) keine Wiederholung links oben;

Denn wenn zwei oder mehr Stile angewendet werden, basiert der vom Browser angewendete Stil auf dem Prinzip des Anhängens und der Wiederholung von Attributen mit letzter Priorität. Das heißt, bei zwei oder mehr oder wiederholten Stilnamendefinitionen werden die vom Browser angewendeten Stile in der Reihenfolge angewendet. Wenn wiederholte Attributwerte definiert werden, hat der zuletzt definierte Vorrang. Wenn zwei oder mehr Stilnamen angewendet werden, werden die nicht wiederholten Attributwerte angehängt und die wiederholten Attributwerte basieren auf dem letzten. Dabei ist zu beachten, dass sich die Reihenfolge der Stile nicht nach der Reihenfolge ihrer Namen auf der Seite richtet, sondern nach der Reihenfolge der Stile im Stylesheet.

11. Verwenden von Nachkommenselektoren

Die Verwendung von untergeordneten Selektoren ist einer der Faktoren, die ihre Effizienz beeinflussen. Mithilfe von untergeordneten Selektoren können Sie viele Klassendefinitionen einsparen. Schauen wir uns den folgenden Code an:

<div> 
<ul> 
<li class="subnavitem"> <a href=http://duote.com/# class="subnavitem">Artikel 1</a></li>> 
<li class="subnavitemselected"> <a href="http://duote.com/#" class="subnavitemselected"> Artikel 1</a> </li> 
<li class="subnavitem"> <a href="http://duote.com/#" class="subnavitem"> Artikel 1</a> </li> 
</ul> 
</div>

Die CSS-Definition für diesen Code lautet:

div#subnav ul { } 
div#subnav ul li.subnavitem { } 
div#subnav ul li.subnavitem a.subnavitem { } 
div#subnav ul li.subnavitemselected { } 
div#subnav ul li.subnavitemselected a.subnavitemselected { }

Sie können den obigen Code durch den folgenden ersetzen

<ul id=”Unternavigation”> 
<li> <a href="http://duote.com/#>" Artikel 1</a> </li> 
<li class="sel"> <a href="http:/duote.com/#>" Artikel 1</a> </li> 
<li> <a href="http://duote.com/#>" Artikel 1</a> </li> 
</ul>

Die Stildefinition lautet:

#Unternavigation { } 
#subnav li { } 
#subnav a { } 
#subnav .sel { } 
#subnav .sel a { }

Durch die Verwendung untergeordneter Selektoren können Sie Ihren Code und CSS prägnanter und leichter lesbar machen.

Wenn sich in einem Container mehrere identische Elemente befinden und die Stile dieser Elemente unterschiedlich sind, vermeiden Sie die Verwendung dieser Methode und verwenden Sie unterschiedliche Klassen, beispielsweise:

<ul Klasse="eins"><li></li></ul> 
<ul Klasse="schleppen"><li></li></ul>

12. Hintergrundbildpfade müssen nicht in Anführungszeichen gesetzt werden

Um Bytes zu sparen, empfehle ich, den Pfad des Hintergrundbilds nicht in Anführungszeichen zu setzen, da diese nicht erforderlich sind. Zum Beispiel:

Hintergrundbild:URL("Bilder 
Rand: 0 automatisch; 
}

Allerdings kann IE5/Win diese Definition nicht korrekt anzeigen. Wir verwenden einen sehr nützlichen Trick, um dieses Problem zu lösen: Verwenden Sie das Attribut text-align. So was:

Körper { 
Textausrichtung: zentriert; 
} 
#wickeln { 
Breite: 760px; 
Rand: 0 automatisch; 
Textausrichtung: links; 
}

Die erste Regel „text-align:center“ für den Textkörper legt fest, dass alle Elemente des Textkörpers in IE5/Win zentriert werden (andere Browser zentrieren nur den Text), und die zweite Regel „text-align:left“ richtet den Text in #warp linksbündig aus.

13. CSS importieren und ausblenden

Da ältere Browser CSS nicht unterstützen, besteht ein gängiger Ansatz darin, die @import-Technik zu verwenden, um CSS auszublenden. Zum Beispiel:

@import url(main.css);


Allerdings funktioniert diese Methode nicht für IE4, was mir eine Zeit lang Kopfschmerzen bereitete. Später habe ich es so geschrieben:

@import main.css;

Auf diese Weise können Sie CSS auch in IE4 ausblenden und 5 Bytes sparen. Eine ausführliche Erklärung der @import-Syntax finden Sie in der CSS-Filtertabelle von Centricle.

14. CSS-Hack

Manchmal müssen Sie spezielle Regeln für IE-Browser-Fehler definieren. Hier gibt es zu viele CSS-Techniken (Hacks). Ich verwende nur zwei davon. Unabhängig davon, ob Microsoft CSS in der kommenden IE7-Betaversion besser unterstützt, sind diese beiden Methoden die sichersten.

1. Annotationsmethoden

(a) Um eine CSS-Definition im IE auszublenden, können Sie einen untergeordneten Selektor verwenden:

html>Textkörper p { 
}

(b) Die folgende Syntax wird nur vom Internet Explorer verstanden (sie ist vor anderen Browsern verborgen)

* html p { 
}

(c) Manchmal möchten Sie, dass IE/Win effektiv ist, IE/Mac jedoch ausgeblendet bleibt. Sie können den Backslash-Trick verwenden:

* html p { 
Erklärungen 
}

(d) Die folgende Syntax wird nur von IE7 verstanden (sie ist vor anderen Browsern verborgen)

*+ html p { 
}

2. Methoden der bedingten Kommentare

Ein anderer Ansatz, der meiner Meinung nach bewährter ist als CSS-Hacks, ist die Verwendung der proprietären bedingten Kommentare von Microsoft. Mit dieser Methode können Sie einige Stile für den IE separat definieren, ohne die Definition des Haupt-Stylesheets zu beeinträchtigen. So was:

<!--[wenn IE]> 
<link rel=stylesheet/css href="http://www.duote.com/style/ie.css" /> 
<![endif]-->

Es gibt noch mehr CSS-Hacks, die Sie online finden können, aber viele davon erfüllen nicht den W3C-Standard. Basierend auf den obigen Hacks habe ich einen Stil geschrieben, der zwischen IE6, IE7 und FF unterscheiden kann und den W3C-Standard erfüllt. Der Code lautet wie folgt:

.Klassenname {Breite:90px!wichtig;Breite:100px;} 
*+html .klassenname {width:95px!important;}

Nach dieser Schreibweise beträgt die Breite 100px im IE6, 95px im IE7 und 90px im Firefox.

15. Tipps zur Fehlerbehebung: Wie groß ist die Ebene?

Beim Debuggen von CSS-Fehlern müssen Sie den CSS-Code wie ein Schriftsetzer Zeile für Zeile analysieren. Normalerweise definiere ich eine Hintergrundfarbe auf der problematischen Ebene, damit klar ist, wie viel Platz die Ebene einnimmt. Manche Leute schlagen die Verwendung eines Rahmens vor, was grundsätzlich akzeptabel ist. Das Problem besteht jedoch darin, dass der Rahmen manchmal die Größe des Elements vergrößert und der obere und untere Rand den Wert des vertikalen Rands zerstört. Daher ist die Verwendung eines Hintergrunds sicherer.
Eine weitere Eigenschaft, die häufig Probleme verursacht, ist der Umriss. Ein Umriss sieht wie ein Rahmen aus, hat aber keinen Einfluss auf die Größe oder Position eines Elements. Nur wenige Browser unterstützen die Outline-Eigenschaft, die einzigen, die ich kenne, sind Safari, OmniWeb und Opera.

16. CSS-Code-Schreibstil

Beim Schreiben von CSS-Code hat jeder seine eigenen Schreibgewohnheiten hinsichtlich Einrückungen, Zeilenumbrüchen und Leerzeichen. Nach kontinuierlicher Übung habe ich beschlossen, den folgenden Schreibstil zu übernehmen:

.Klassenname { 
Breite: 100px; 
}

Bei der Verwendung gemeinsamer Definitionen platziere ich normalerweise jeden Selektor in einer eigenen Zeile, damit sie in der CSS-Datei leichter zu finden sind. Setzen Sie zwischen dem letzten Selektor und der geschweiften Klammer { ein Leerzeichen und schreiben Sie jede Definition in eine separate Zeile. Das Semikolon steht ohne Leerzeichen direkt hinter dem Eigenschaftswert.
Normalerweise setze ich nach jedem Attributwert ein Semikolon. Obwohl die Regeln es erlauben, nach dem letzten Attributwert kein Semikolon zu setzen, kann es leicht passieren, dass man beim Hinzufügen eines neuen Stils vergisst, ein Semikolon hinzuzufügen, was zu Fehlern führen kann. Daher ist es besser, alle hinzuzufügen.
Setzen Sie abschließend die schließende geschweifte Klammer } in eine eigene Zeile. Leerzeichen und Zeilenumbrüche erleichtern die Lesbarkeit.

Zusammenfassen

Oben sind die Benennungsregeln für DIV+CSS aufgeführt, die der Herausgeber Ihnen vorgestellt hat und die für die Implementierungsmethode der SEO-Optimierung förderlich sind. Ich hoffe, sie sind hilfreich für Sie. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und der Herausgeber wird Ihnen rechtzeitig antworten. Ich möchte auch allen für ihre Unterstützung der Website 123WORDPRESS.COM danken!