Heim >Web-Frontend >CSS-Tutorial >„Wie funktioniert CSS hinter den Kulissen?'
„Wie funktioniert CSS hinter den Kulissen?'
- WBOYnach vorne
- 2023-09-17 10:33:021421Durchsuche
CSS (Cascading Style Sheets) ist eine Stylesheet-Sprache, die zum Hinzufügen visueller Effekte zu Webseiten verwendet wird. Es wird verwendet, um das Seitenlayout und die Anzeige von HTML-Elementen zu beschreiben. Mit CSS können Sie viel Zeit sparen. Verwenden Sie es, um das Layout mehrerer Webseiten gleichzeitig zu verwalten. Es ermöglicht Entwicklern, verschiedene benutzerdefinierte Eigenschaften für verschiedene Elemente zu implementieren und so das Erscheinungsbild von Webseiten zu verbessern. In diesem Artikel erfahren Sie mehr über CSS und seine Funktionsweise.
CSS ist grundsätzlich in 3 Typen unterteilt -
Externes CSS - Verwenden Sie auf jeder Seite das -Element und das Link>-Tag gehört zum Kopfbereich. Wenn Sie mehrere Seiten gleichzeitig ändern möchten, verwenden Sie ein externes Stylesheet. Dies ist in dieser Situation sehr nützlich, da Sie damit das Erscheinungsbild der gesamten Website ändern können, indem Sie nur eine Datei ändern.
Inline-CSS – Wenn eine einzelne HTML-Seite einen eindeutigen Stil hat, können Sie ein internes Stylesheet verwenden. Das style>-Element im Head-Bereich enthält die Definition interner Stile.
Internes CSS - Um einzelnen Elementen ein einzigartiges Aussehen zu verleihen, verwenden Sie Inline-Stile. Verwenden Sie Inline-Stile, indem Sie das Attribut „style“ zum entsprechenden Element hinzufügen. Das style-Attribut ist ein Container für jede CSS-Eigenschaft.
Grammatik
selector{
property: value;
}
Beispiel
Im Folgenden finden Sie ein Beispiel für die Verwendung von CSS in einer HTML-Seite. Hier haben wir Inline-CSS. Das h1-Element ist unterstrichen, während das div-Element grün ist.
<!DOCTYPE html>
<html>
<head>
<title> Using CSS within a HTML page </title>
<style>
h1{
text-decoration: underline;
}
div{
width: 30%;
height: 30px;
background-color: green;
}
</style>
</head>
<body>
<h1> Inline CSS </h1>
<div> This is an example. </div>
</body>
</html>
Warum sollten wir CSS verwenden?
Zeit sparen- Es spart viel Zeit. Da CSS-Stildefinitionen in separaten CSS-Dateien gespeichert werden, können Änderungen an einer davon Auswirkungen auf die gesamte Website haben.
Mehrere Attribute – Im Vergleich zu einfachem HTML bietet CSS präzisere Optionen zur Bestimmung des Erscheinungsbilds Ihrer Website.
Schnelles Laden von Seiten- Bei der Verwendung von CSS ist es nicht immer notwendig, HTML-Markup-Attribute zu schreiben. Sie können eine Regel einmal für ein Label schreiben und sie auf alle Instanzen dieses Labels anwenden. Da CSS weniger Code verwendet, wird es schneller heruntergeladen.
Website-Wartung- Die Website benötigt es für die Wartung. Wenn wir eine globale Änderung an der Datei vornehmen müssen, können wir einfach den Stil ändern und alle Komponenten auf der Webseite werden sofort aktualisiert. Aufgrund der Flexibilität von CSS-Dateien kann das Design einer Website leicht geändert werden.
Kompatibilität mit mehreren Geräten- Wir können CSS mit früheren Sprachversionen verwenden, da es traditionell mit diesen kompatibel ist. Wenn also eine CSS-Anwendung mit einer früheren Version der Programmiersprache erstellt wurde und der Entwickler sie mit neueren Entwicklungsinhalten zusammenführt, kann CSS problemlos mit den erforderlichen Anpassungen integriert werden, sodass der Entwickler den vorhandenen Code erfolgreich aktualisieren kann. Inhalte, die CSS verwenden, können an mehrere Gerätetypen angepasst werden.
Die zugrunde liegende Arbeit von CSS
Der eigentliche Prozess der Berechnung der endgültigen CSS-Eigenschaften für ein bestimmtes HTML-Element besteht aus einer äußerst komplexen Reihe von Schritten -
Datenansammlung
In dieser Phase werden alle Stildeklarationen für ein bestimmtes Element aus verschiedenen Quellen wie Benutzeragenten, Autoren und Benutzern gesammelt. Diese Deklarationen müssen gefiltert und validiert werden, um festzustellen, ob sie aus einem Stylesheet stammen, das jetzt für dieses Dokument gilt, und syntaktisch gültig sind.
Kaskade
Das Wort CSS steht für Cascading Style Sheets, das Grundkonzept von CSS. Diese Phase muss gründlich verstanden werden, da sie die einzige Phase ist, die stark vom Entwickler als Autorquelle beeinflusst wird. In dieser Phase wird die ungeordnete Liste der im vorherigen Schritt gesammelten Deklarationen verwendet und anhand der folgenden Kriterien in absteigender Prioritätsreihenfolge sortiert:
Basierend auf deklarativen Quellen (Benutzeragent, Benutzer, Autor, Übergang, Animation) und! Eine Zusammenstellung wichtiger Hinweise.
Spezialität basierend auf Selektor
Basierend auf der Reihenfolge, in der sie geschrieben sind
Standardwert festlegen
Wenn nicht deklariert, wird dieser Schritt aufgerufen, wenn versucht wird, einen Wert für die CSS-Eigenschaft eines Elements festzulegen.
Behoben
Für maximale Flexibilität im responsiven Design verwenden wir mehrere relative Einheiten (auto, em, rem, vh), relative URLs, Prozentsätze oder bestimmte für Menschen lesbare Schlüsselwörter (klein, normal, fett). In dieser Phase wird versucht, so viele Attributwerte wie möglich aufzulösen, ohne ein Dokument platzieren, eine Netzwerkabfrage durchführen oder den Wert von einem anderen Ort als dem übergeordneten Element abrufen zu müssen.
Formatierung
In dieser Phase wird das gesamte Dokument formatiert und die verbleibende Arbeit aus dem vorherigen Schritt abgeschlossen, indem versucht wird, die absoluten theoretischen Werte zu berechnen, die im Dokumentlayout verwendet werden. Diese Phase konzentriert sich hauptsächlich auf Szenarien wie die relative Koordination von Elementen, das automatische Layout und das Flex-Layout. Es erfordert viele Berechnungen, liefert aber eine absolute Zahl, die für Browser nahezu vollständig nutzbar ist.
Letzte Änderungen
Vor dem Zeichnen werden in der letzten Phase einige Änderungen basierend auf der Surfumgebung vorgenommen, z. B. Browser-Engine, Medientyp, Pixeldichte des Geräts oder Betriebssystem. Das Runden von Gleitkommazahlen auf Ganzzahlwerte oder das Ändern der Schriftgröße basierend auf verfügbaren Schriftarten sind zwei häufige Änderungen.
Fazit
Da die CSS-Kaskadierung einer der am meisten missverstandenen Aspekte von CSS ist (und oft die Quelle vieler Fehler ist), wird Ihnen das Verständnis ihrer Funktionsweise einen erheblichen Vorteil dabei verschaffen, Ihr Stylesheet überschaubar zu halten. Je besser jedoch das Verständnis der CSS-Kaskaden ist, desto größer ist die Verantwortung. Die spezialisierteren Teile der Kaskade (z. B. !important, Inline-Stile und ID-Selektoren) erzeugen Stylesheets, die in Zukunft schwieriger zu ändern oder zu überschreiben sind.
Das obige ist der detaillierte Inhalt von„Wie funktioniert CSS hinter den Kulissen?'. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!