CSS-Schreibspezifikationen

CSS-Schreibspezifikationen [Übertragung]

1. Die Standardattribute von Elementen in verschiedenen Browsern sind unterschiedlich. Verwenden Sie Zurücksetzen, um einige Standardattribute von Browserelementen zurückzusetzen, um Browserkompatibilität zu erreichen. /**Klare Innen- und Außenränder **/ body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, /* Strukturelemente Strukturelemente*/ dl, dt, dd, ul, ol, li, /* Listenelemente Listenelemente*/PRe, /* Textformatierungselemente Textformatierungselemente*/ Formular, Feldsatz, Legende, Schaltfläche, Eingabe, Textbereich, /* Formularelemente Formularelemente*/ th, td, /* Tabellenelemente Tabellenelemente*/ img/* img elements Bildelemente*/ { border:medium none; padding: 0; ,tahoma, Srial, helvetica, sans-serif; } h1, h2, h3, h4, h5, h6 {font-size: 100%;} em{font-style:normal;} /**Standardschriftart festlegen **/ ul , ol { list-style: none; } /**Listenelemente zurücksetzen **/a { text-decoration: none;} a:hover { text-decoration: underline } /* *Hyperlink-Element zurücksetzen **/img{ border:0px;} /**Bildelemente zurücksetzen **/ table { border-collapse: border-spacing: 0;🎜>

2

3. Code-Abkürzung li{ Schriftfamilie:Arial, Sans-Serif; Zeilenhöhe: 1,4em; Polsterung-unten: 10px; :5px; } wird zu li{ Schriftart: 1.2em/1.4em Arial, Helvetica, sans-serif; Wenn untergeordnete Elemente denselben Stil verwenden, ist es am besten, denselben Stil für ihre übergeordneten Elemente zu definieren und sie diese CSS-Stile erben zu lassen. Auf diese Weise können Sie Ihren Code gut pflegen und die Codemenge reduzieren. Dann sieht der ursprüngliche Code wie folgt aus: #container li{ Font-Familie:Georgia, Serif } #container{ Schriftfamilie:Georgia, Serif; }

5. Mit mehreren Selektoren können Sie mehrere CSS-Selektoren zu einem zusammenführen, wenn sie einen gemeinsamen Stil haben. Dadurch bleibt der Code nicht nur prägnant, sondern Sie sparen auch Zeit und Platz. Zum Beispiel: h1{ Schriftartenfamilie:Arial, Helvetica, serifenlos; h2{ Schriftartenfamilie:Arial, Helvetica, serifenlos; : Arial, Helvetica, Sans-Serif; Font-Weight: Normal; >6. Passende Codekommentare

7. Wenn die Eigenschaften im Code alphabetisch sortiert werden können, können Sie Änderungen schneller finden:

/**Tabellenelemente zurücksetzen * */ div{ Hintergrundfarbe:#3399cc; Schriftart: 1,2em/1,4em; Höhe: 10px 5px; Breite :30 %; z-index:10; } 9. Wählen Sie bessere Stilattributwerte. Obwohl die Effekte ähnlich sind, gibt es Unterschiede in der Leistung Obwohl es auf der Seite nicht sichtbar ist, rendert der Browser gemäß dem Standardwert des Rahmens immer noch die Rahmenbreite/Rahmenfarbe, dh der Speicherwert wurde belegt. Border:none setzt den Rand auf „none“, was bedeutet, dass es keinen Rand gibt, wenn er „none“ analysiert, führt er keine Rendering-Aktionen aus, d. h. er verbraucht keine Speicherwerte. Daher wird die Verwendung von border:none empfohlen. Ebenso verbirgt display:none den Objektbrowser ohne Rendering und belegt keinen Speicher. Und Sichtbarkeit: verborgener Wille.

10. Verwenden Sie Einzelheiten finden Sie unter „Hochleistungs-Website-Design: @import nicht verwenden“. Vermeiden Sie daher bitte die Verwendung von @import

11. Verwenden Sie externe Stylesheets. Dieses Prinzip ist immer eine gute Designpraxis. Es ist nicht nur einfacher zu warten und zu ändern, sondern, was noch wichtiger ist, die Verwendung externer Dateien kann die Seitengeschwindigkeit verbessern, da CSS-Dateien im Browser zwischengespeichert werden können. Das in das HTML-Dokument integrierte CSS wird bei jeder Anfrage erneut mit dem HTML-Dokument heruntergeladen. Daher besteht in praktischen Anwendungen keine Notwendigkeit, CSS-Code in HTML-Dokumente einzubauen:

12. Vermeiden Sie die Verwendung von CSS-Ausdrücken (Ausdruck). CSS-Ausdrücke sind eine leistungsstarke (aber gefährliche) Möglichkeit, CSS-Eigenschaften dynamisch festzulegen.

13. Codekomprimierung Wenn Sie sich entscheiden, Ihr Website-Projekt im Internet bereitzustellen, müssen Sie eine Komprimierung des CSS in Betracht ziehen, um Kommentare und Leerzeichen zu entfernen und das Laden der Webseite zu beschleunigen. Um Ihren Code zu komprimieren, können Sie einige Tools verwenden, z. B. YUI Compressor. Sie können damit CSS-Code optimieren, die Dateigröße reduzieren und eine höhere Ladegeschwindigkeit erzielen.

Das Obige ist der Inhalt der CSS-Schreibspezifikationen. Weitere verwandte Artikel finden Sie unter Folgen Sie der chinesischen PHP-Website (www.php.cn)!