So optimieren Sie CSS

青灯夜游
Freigeben: 2023-01-05 16:13:07
Original
2765 Leute haben es durchsucht

Optimierungsmethoden: 1. Vereinfachen Sie die Kommentare. 3. Verwenden Sie einzeilige Attribute anstelle von mehrzeiligen Attributen. 4. Lassen Sie die Einheit weg, wenn der Wert 0 ist. Legen Sie die Werte mehrerer Elemente gleichzeitig fest. 6. Löschen Sie Leerzeichen und Zeilenumbrüche. 7. Legen Sie die Ablaufzeit fest und verwenden Sie GZip.

So optimieren Sie CSS

Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.

Die Optimierung des CSS-Codes kann die von der Webseite belegten Bytes reduzieren, die Zeit verkürzen, die der Browser unter den gleichen Bedingungen zum Herunterladen des CSS-Codes benötigt, und das Öffnen der Webseite beschleunigen. Wie optimiert man also CSS-Code? Hier finden Sie einige Tipps zur Optimierung von CSS-Code.

Tipps zur Optimierung von CSS-Code

1. Vereinfachen Sie Ihre Kommentare

In vielen Fällen, insbesondere bei Programmierern, die in Sprachen wie C/Java gearbeitet haben, möchten Sie möglicherweise mehrere Zeilen Kommentare schreiben. zum Beispiel:

Natürlich gibt es in kompilierten Sprachen kein Problem mit solchen Kommentaren, aber in CSS erhöhen sie die Größe der CSS-Datei erheblich. Sie sollten versuchen, es etwa so zu vereinfachen:

Auf diese Weise bleibt die Lesbarkeit erhalten , Reduzierte Dateigröße. Tatsächlich können Sie diese Kommentare in einer echten veröffentlichten Version der CSS-Datei vollständig entfernen.

2. Farbcodes vereinfachen

In CSS beschäftigen wir uns oft mit hexadezimalen Farbcodes. Möglicherweise sind Sie es gewohnt, die folgende „Standardform“ zu schreiben:

color: #ffffff;
color: #ff88ff;
Nach dem Login kopieren

Tatsächlich kann diese Schreibmethode in CSS vereinfacht werden, wir können schreiben:

color: #fff;
color: #f8f;
Nach dem Login kopieren

3. Verwenden Sie einzeilige Attribute anstelle von mehrzeiligen Attributen , das heißt, abgekürzte Attribute verwenden

In CSS können Attribute wie Rand/Abstand/Schriftart/Rahmen in einer Zeile statt in vielen Zeilen festgelegt werden. Zum Beispiel:

padding-top: 10px;
padding-bottom: 10px;
padding-left: 0;
padding-right: 0;
Nach dem Login kopieren

Wir können schreiben:

padding: 10px 0 10px 0;
Nach dem Login kopieren

Die Reihenfolge ist oben, rechts, unten, links, natürlich Wenn die Werte für links und rechts/oben und unten gleich sind, kann das obige Beispiel einfacher geschrieben werden geschrieben als:

padding: 10px 0;
Nach dem Login kopieren

Wenn die linken und rechten Werte gleich sind, kann es sogar geschrieben werden als:

padding: 10px;
Nach dem Login kopieren

Für andere Abkürzungsmethoden können Sie auf einige Informationen im Internet verweisen. Zum Erlernen des CSS-Schreibprozesses empfehle ich natürlich die Verwendung der Software TopStyle, die konkrete Tipps gibt.

(Lernvideo-Sharing: CSS-Video-Tutorial)

4. Wenn der Wert 0 ist, kann die Einheit weggelassen werden

Zum Beispiel:

padding: 0;
Nach dem Login kopieren

5 Zeit

Beispiel veranschaulichen. Zum Beispiel:

h1 {
margin: 0;
padding: 0;
}
h2 {
margin: 0;
padding: 0;
}
h3 {
margin: 0;
padding: 0;
}
Nach dem Login kopieren

Besser kann man es so schreiben:

h1,h2,h3 {
margin: 0;
padding: 0;
}
Nach dem Login kopieren

6. Leerzeichen und Zeilenumbrüche löschen

Dies ist ein sehr unauffälliger Vorgang, aber für CSS muss er anschließend im Internet angewendet werden Das Verlassen der Entwicklungsphase sollte auf diese Weise gehandhabt werden, zumindest werden alle Google-Anwendungen so durchgeführt. Zum Beispiel:

h1 {
margin: 0;
padding: 0;
}
blockquote {
background-color: #ffcccc;
}
Nach dem Login kopieren

sollte wie folgt verarbeitet werden:

h1{margin:0;padding:0;}
blockquote{background:#fcc;}
Nach dem Login kopieren

Tatsächlich sind in der CSS-Datei keine Zeilenumbrüche erforderlich. Damit der Code aber ein wenig lesbar bleibt, empfehle ich dennoch, jedes Element in eine Zeile zu schreiben. Heutzutage stehen Tools zur Verfügung, mit denen Sie etwas Ähnliches tun können, sodass es Ihren Entwicklungsprozess nicht beeinträchtigt.

7. Legen Sie die Ablaufzeit fest und verwenden Sie GZip

Wenn möglich, sollten wir die Ablaufzeit der CSS-Datei festlegen und GZip für die Übertragung der CSS-Datei aktivieren. Wenn Sie Ersteres festlegen, können gängige Browser Ihre CSS-Dateien zwischenspeichern. Dadurch entfällt die Notwendigkeit, die Datei jedes Mal zu lesen, wenn Load ausgeführt wird. Dies beschleunigt den Vorgang erheblich und reduziert gleichzeitig den Datenverkehr. Durch die Aktivierung von GZip können Ihre CSS-Dateien in einem unvorstellbaren Ausmaß verkleinert werden, und die meisten gängigen Browser unterstützen heutzutage GZip.

Weitere Kenntnisse zum Thema Programmierung finden Sie unter: Programmiervideos! !

Das obige ist der detaillierte Inhalt vonSo optimieren Sie CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage