Verstehen Sie diese CSS-Prinzipien?

CSS ist eine Computersprache, die zum Ausdrücken von Dateistilen wie HTML (eine Anwendung der Standard Generalized Markup Language) oder XML (eine Teilmenge der Standard Generalized Markup Language) verwendet wird. CSS kann Webseiten nicht nur statisch ändern, sondern auch mit verschiedenen Skriptsprachen zusammenarbeiten, um verschiedene Elemente von Webseiten dynamisch zu formatieren. CSS kann das Layout von Elementpositionen in Webseiten präzise auf Pixelebene steuern, unterstützt fast alle Schriftgrößen und -stile und verfügt über die Möglichkeit, Webseitenobjekte und Modellstile zu bearbeiten. Leute, die sich mit der Web-Front-End-Entwicklung beschäftigen, 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 .server und rufen Sie die Webseite auf. 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.

Der ursprüngliche CSS-Vorschlag wurde 1994 von Hakun Lee vorgeschlagen. 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 Stile aus 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 wurde innerhalb des W3C eine Arbeitsgruppe für CSS gegründet, 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 gleichzeitig angezeigt? ? Einige Websites werden schrittweise von oben nach unten angezeigt? 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 zur gleichen Zeit.

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 semantischen Interpretationstag (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 derjenigen, die zuvor gerendert wurden) 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. Abfragepositionierungseffizienz des CSS-Selektors

2. Browser-Rendering-Modus und -Algorithmus

3. Zu rendernder Inhalt Größe von

3. Was ist CSS und die Vorteile von CSS

Was ist CSS?

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

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).

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

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

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

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

Die Verwendung von CSS+DIV 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 suchmaschinenfreundlicher.

　2. Verbessern Sie die Geschwindigkeit beim Durchsuchen von Seiten. Für den gleichen visuellen Seiteneffekt ist die mit CSS+DIV 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.

　 IV. Browser-CSS-Matching-Prinzip

Das Browser-CSS-Matching sucht nicht von links nach rechts, sondern von rechts nach links. Beispielsweise lautet die Suchsequenz des Browsers für das zuvor erwähnte DIV#pBox p span.red{color:red;} wie folgt: Suchen Sie zunächst nach allen Span-Elementen mit class='red' im HTML-Code und führen Sie dann die Suche durch, nachdem Sie sie gefunden haben ob es welche in ihren übergeordneten Elementen gibt, und dann feststellen, 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, die zum Stil passen, so wenig wie möglich durchzuführen einige Beim Schreiben von CSS machen wir häufig einige ineffiziente Fehler:

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

Allgemeine Schreibmethode: DIV#pBox

Besseres Schreiben Methode: #pBox

Erklärung: Da der ID-Selektor eindeutig ist, erhöht das Hinzufügen von p unnötige CSS-Übereinstimmungen.

2. Verwenden Sie nicht den Tag-Namen

vor dem Klassenselektor. Übliche Schreibmethode: span.red

Bessere Schreibmethode: .red

Erläuterung: Dasselbe wie beim ersten, aber wenn Sie mehrere .red definieren und die Stile unter verschiedenen Elementen unterschiedlich sind, können Sie es nicht entfernen. Sie definieren es beispielsweise in Ihrer CSS-Datei wie folgt:

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

Wenn es so definiert ist, entfernen Sie es nicht. Es wird jedoch verwirrend sein, wenn Sie es entfernen empfohlen, es nicht so zu schreiben

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

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

Besseres Schreiben: .red{..}

4. Verwenden Sie Klasse anstelle einer hierarchischen Beziehung

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

Besseres Schreiben: . block{display:block;}

5. In Die Effizienz von ID und Klasse bei der CSS-Rendering-Effizienz ist grundsätzlich gleich

Die Klasse wird beim ersten Laden zwischengespeichert, was bessere Auswirkungen hat bei der Kaskadierung führt die Verwendung von id im Stammelement zu besseren Ergebnissen (id hat einen subtilen Geschwindigkeitsvorteil).

Für Front-End-Freunde ist es sehr wichtig, gute CSS-Kenntnisse zu beherrschen. Ich hoffe, dieser Artikel wird Ihnen hilfreich sein.

Verwandte Empfehlungen:

Die umfassendsten allgemeinen CSS-Entwicklungsfähigkeiten

Detaillierte Erläuterung der Details in CSS

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

Das obige ist der detaillierte Inhalt vonVerstehen Sie diese CSS-Prinzipien?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!