Ausführliche Erläuterung der CSS-Prinzipien für die Frontend-Entwicklung

Dieser Artikel enthält hauptsächlich relevante Informationen zur detaillierten Erklärung der CSS-Prinzipien für die Front-End-Entwicklung. Freunde, die sie benötigen, können sich auf

Detaillierte Erklärung der CSS-Prinzipien für die Front-End-Entwicklung beziehen

Leute, die sich mit der Web-Frontend-Entwicklung beschäftigen, haben sich oft mit CSS beschäftigt. Einige Leute wissen möglicherweise nicht, wie CSS vom Browser analysiert wird. Wenn dies für uns zu einem Engpass bei der Verbesserung des CSS-Levels wird, sollten wir dann mehr darüber wissen?

1. Browserentwicklung und CSS

Webbrowser stellen hauptsächlich über das HTTP-Protokoll eine Verbindung zu Webservern her, um Webseiten abzurufen. HTTP ermöglicht das Surfen im Internet Der Server sendet Daten an den Webserver und ruft die Webseite ab. Das derzeit am häufigsten verwendete HTTP ist HTTP/1.1, das vollständig in RFC2616 definiert ist. HTTP/1.1 verfügt über eigene Standards, die Internet Explorer nicht vollständig unterstützt, aber viele andere moderne Webbrowser unterstützen diese Standards vollständig. Der Standort der Webseite wird durch die URL (Uniform Resource Locator) angegeben. Dabei handelt es sich um die Adresse der Webseite. Alles, was mit http beginnt: bedeutet die Anmeldung über das HTTP-Protokoll. Viele Browser unterstützen auch andere Arten von URLs und Protokollen, wie zum Beispiel ftp: für FTP (File Transfer Protocol), gopher: für Gopher und https: für HTTPS (HTTP verschlüsselt mit SSL).

Frühe Webbrowser unterstützten nur eine einfache Version von HTML. Die rasante Entwicklung proprietärer Softwarebrowser hat zur Erstellung von nicht standardmäßigem HTML-Code geführt. Aber als HTML wuchs, gewann es viele Anzeigemöglichkeiten, um den Anforderungen von Designern gerecht zu werden. Da diese Fähigkeiten zunehmen, machen Fremdsprachen zur Definition von Stilen immer weniger Sinn.

1994 schlug Hakun Lee den ursprünglichen Vorschlag von CSS vor. BertBos entwarf einen Browser namens Argo und sie beschlossen, gemeinsam an CSS zu arbeiten.

Es gab bereits einige Vorschläge für Stylesheet-Sprachen, aber CSS war das erste, das die Idee der „Kaskadierung“ beinhaltete. In CSS können die Stile einer Datei von anderen Stylesheets geerbt werden. Der Leser kann an einigen Stellen seinen eigenen bevorzugten Stil verwenden und an anderen Stellen den Stil des Autors übernehmen oder „überlagern“. Diese Schichtungsmethode ermöglicht es sowohl dem Autor als auch dem Leser, ihre eigenen Designs flexibel hinzuzufügen und ihre eigenen Vorlieben zu mischen.

Anfang 1997 organisierte W3C eine Arbeitsgruppe speziell für CSS, deren Leiter Chris Lilley war. Diese Arbeitsgruppe begann mit der Erörterung von Themen, die in der ersten Ausgabe nicht behandelt wurden, was im Mai 1998 zur Veröffentlichung der Anforderungen der zweiten Ausgabe führte. Mit Stand 2007 ist die dritte Auflage noch nicht vollständig.

2. Wie der Browser die Seite rendert und lädt

Warum laden manche Websites beim Öffnen sehr langsam und die gesamte Seite wird geladen? Seiten werden gleichzeitig angezeigt, während einige Websites schrittweise von oben nach unten angezeigt werden? Um dies zu verstehen, können Sie mit dem folgenden allgemeinen Prozess beginnen:

　1. Die Reihenfolge des Browser-Downloads erfolgt von oben nach unten, und die Reihenfolge des Renderns erfolgt ebenfalls von oben nach unten werden gleichzeitig durchgeführt.
2. Beim Rendern eines bestimmten Teils der Seite wurden alle darüber liegenden Teile heruntergeladen (dies bedeutet nicht, dass alle zugehörigen Elemente heruntergeladen wurden).
3. Wenn Sie auf eine eingebettete Datei mit einem semantisch interpretierbaren Tag (JS-Skript, CSS-Stil) stoßen, aktiviert der IE-Downloadvorgang eine separate Verbindung zum Herunterladen.
4. Führen Sie nach dem Herunterladen eine Analyse durch. Stoppen Sie während des Analysevorgangs das Herunterladen aller nach unten gerichteten Elemente der Seite.
5. Nachdem das Stylesheet heruntergeladen wurde, wird es zusammen mit allen zuvor heruntergeladenen Stylesheets analysiert. Nach Abschluss der Analyse werden alle vorherigen Elemente (einschließlich der zuvor gerenderten) erneut gerendert.
　6. Bei einer Neudefinition in JS oder CSS überschreibt die später definierte Funktion die zuvor definierte Funktion.

Die Kernpunkte hier sind die drei Punkte 2-5. Die Rendering-Effizienz hängt mit den folgenden drei Punkten zusammen:

　1. Effizienz der Abfragepositionierung des CSS-Selektors
　2. Browser-Rendering Modus und Algorithmus
3. Zum Größe des gerenderten Inhalts

3. Was ist CSS und die Vorteile von CSS

Was ist CSS?

1. CSS ist die Abkürzung für Cascading Style Sheets.

2. CSS-Sprache ist eine Auszeichnungssprache, die keine Kompilierung erfordert und vom Browser direkt interpretiert und ausgeführt werden kann (es handelt sich um eine vom Browser interpretierte Sprache).

3. Im Standard-Webdesign ist CSS für die Darstellung von Webinhalten (XHTML) verantwortlich.

4. Eine CSS-Datei kann auch als Textdatei bezeichnet werden, die einige CSS-Tags enthält. CSS-Dateien müssen CSS als Dateinamenssuffix verwenden.

5. Sie können die Gesamtdarstellung der Webseite ändern, indem Sie einfach die CSS-Datei ändern, was unsere Arbeitsbelastung reduzieren kann, sodass es ein Pflichtkurs für jeden Webdesigner ist.

6. CSS wird von der W3C CSS Working Group erstellt und gepflegt.

Die Verwendung von CSS+p zum Rekonstruieren von Webseiten bietet im Vergleich zum herkömmlichen TABLE-Webseitenlayout die folgenden drei wesentlichen Vorteile:

　1. Leistung und Inhalt trennen. Trennen Sie den Designteil, legen Sie ihn in einer separaten Stildatei ab und speichern Sie nur Textinformationen in der HTML-Datei. Solche Seiten sind benutzerfreundlicher für Suchmaschinen Indexierung.

　2. Verbessern Sie die Geschwindigkeit beim Durchsuchen von Seiten. Für den gleichen visuellen Seiteneffekt ist die mit CSS+p rekonstruierte Seitenkapazität viel kleiner als die mit TABLE codierte Seitendateikapazität. Ersteres ist im Allgemeinen nur halb so groß wie letzteres. Der Browser muss nicht viele lange Tags kompilieren.

　3. Einfach zu warten und zu überarbeiten. Sie können die gesamte Website neu gestalten, indem Sie einfach einige CSS-Dateien ändern.

4. Browser-CSS-Matching-Prinzip

Beim Browser-CSS-Matching wird nicht von links nach rechts gesucht, sondern von rechts nach links. Beispielsweise lautet die zuvor erwähnte p#pBox p span.red{color:red;}. Die Suchsequenz des Browsers lautet wie folgt: Suchen Sie zunächst nach allen Span-Elementen mit class = 'red' im HTML und suchen Sie nach dem Finden Es gibt welche in ihren übergeordneten Elementen, und dann bestimmen Sie, ob es ein p-Element mit der ID pBox im übergeordneten Element von p gibt.

Der Vorteil der Browsersuche von rechts nach links besteht darin, einige irrelevante Stilregeln und Elemente so früh wie möglich herauszufiltern. Firefox nennt diese Suchmethode keyselector (Schlüsselwortabfrage). Das sogenannte Schlüsselwort ist die letzte (ganz rechts stehende) Regel in den Stilregeln. Der Schlüssel oben ist span.red.

5. Optimieren Sie Ihr CSS

Das sogenannte effiziente CSS soll es dem Browser ermöglichen, bei der Suche nach Elementen so wenig wie möglich zu tun passender Stil. Suche, hier sind einige häufige ineffiziente Fehler, die wir beim Schreiben von CSS machen:

　1. Verwenden Sie nicht den Tag-Namen ID-Selektor

🎜> Normale Schreibweise: p#pBox

Bessere Schreibweise: #pBox

Erläuterung: Da der ID-Selektor eindeutig ist, führt das Hinzufügen von p zu unnötigen unnötigen CSS-Übereinstimmungen.

2. Verwenden Sie nicht den Tag-Namen

vor dem
class

-Selektor. Allgemeine Schreibmethode: span.red

Eine bessere Art, es zu schreiben: .red

Erläuterung: Wie das erste, aber wenn Sie mehrere .red definieren und die Stile unter verschiedenen Elementen unterschiedlich sind, können sie nicht entfernt werden. B. Ihr CSS. Die Definition in der Datei lautet wie folgt:

　p.red{color:red;}
　　span.red{color:#ff00ff}

Wenn es auf diese Weise definiert ist , entfernen Sie es nicht, sonst wird es verwirrend. Es wird jedoch empfohlen, nicht so zu schreiben

3. Verwenden Sie hierarchische Beziehungen so wenig wie möglich

Allgemein Schreiben: #pBoxp.red{color:red;}

Besseres Schreiben: .red{..}

4. Verwenden Sie Klasse anstelle einer hierarchischen Beziehung

Allgemeines Schreiben: #pBox ul li a{display: block;}

Bessere Schreibweise: .block{display:block;}

5. Bei der CSS-Rendering-Effizienz ist die Effizienz von ID und Klasse grundsätzlich gleich

Die Klasse wird beim ersten Laden im

Cache gespeichert, was bei der Kaskadierung einen besseren Effekt hat . Die Verwendung von id im Root-Element hat eine bessere Wirkung (die id hat einen subtilen Geschwindigkeitsvorteil).

Vielen Dank fürs Lesen, ich hoffe, es kann allen helfen, vielen Dank für Ihre Unterstützung dieser Website!

Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung der CSS-Prinzipien für die Frontend-Entwicklung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!