Wie CSS funktioniert
CSS kann verwendet werden, um das Layout -Design zu ändern, sodass Sie nur einen Code für alle Ihre Elemente schreiben müssen. Durch die Verwendung von CSS können Sie weniger Code verwenden, um Ihre Webseite zu erstellen. Sie können eine CSS -Regel auf alle Tags auf einer Seite anwenden. Durch das Erlernen von CSS können Sie Ihre Website großartig aussehen lassen.
Wie CSS funktioniert
Mit dem Cascade -Prozess von CSS können mehrere Stylesheets kombiniert werden. Es hilft, Konflikte zu vermeiden, wenn verschiedene Stile dieselbe Eigenschaft wie Schriftgröße definieren. Wenn ein Element mehr als ein Stylesheet hat, wählt der Browser den am besten geeigneten (den neuesten) aus und löst den Konflikt auf.
Komponenten eines CSS -Codes
Dieser Abschnitt beschreibt die grundlegenden Instanzen eines CSS -Code.
Nehmen wir das Beispiel eines einfachen CSS -Code für eine Überschrift (H1):
H1 Farbe: Schwarz; Schriftdicke: fett;Der obige CSS -Code umfasst die folgenden Teile:
- H1 ist bekannt als "Wähler”
- Der in lockigen Klammern geschriebene Text heißt “, heißt“Erklärung„; Der Code in den lockigen Klammern wird auf den Selektor angewendet, der vor den lockigen Klammern definiert ist.
- Der Farbe Und Schriftgewicht sind die Eigenschaften, während die Schwarz Und deutlich sind die Werte der Eigenschaften
Abgesehen von den oben genannten Komponenten a Semikolon wird nach jeder Eigenschaft eingefügt, bevor der andere startet. Kurz gesagt, ein einfacher CSS -Code hat vier Komponenten: Wähler, Erklärung, Eigentum Und Wert.
Wie der CSS -Code eingebettet ist
Ein CSS -Code kann auf eine der folgenden Arten eingebettet werden:
- In einem HTML -Element: Die Eigenschaften sind in einem bestimmten Element von HTML definiert, und das unten gezeigte Bild zeigt die Anwendung von Inline -CSS.
- Als internes CSS: Der Code wird unter Verwendung von Element und innerhalb der geschrieben Kopf Tag der HTML -Datei. Um das interne CSS besser zu unterschätzen, haben wir das Bild angehängt, das Schriftart und Farbe für Absätze festlegen:
- Als externe CSS -Datei: Ein CSS -Code wird in einer separaten Datei geschrieben und dann ist die CSS -Datei mit der HTML -Datei verknüpft:
Wie CSS und HTML zusammenarbeiten
Das CSS- und HTML -Phänomen sind miteinander verbunden. Ein HTML -Code kann als Struktur des Gebäudes bezeichnet werden, während CSS der verschönernde Prozess dieser Struktur ist. Eine rohe Struktur ist ohne Farbe und andere Dekorationen nutzlos. Die HTML und CSS arbeiten gemeinsam auf einer Webseite:
Eine Webseite folgt dem folgenden Prozess, um ordnungsgemäß zu laden:
- Eine HTML -Seite wird vom Browser geladen
- Der Browser wandelt diese HTML in DOM -Baum (Datenobjektmodell) um
- In der Zwischenzeit lädt der Browser die Stile, die dieser HTML -Seite zugeordnet sind: dafür wird die CSS -Datei (mit dieser HTML -Datei verknüpft) analysiert, um ein TRAM (DOM -TROM) (DOM) zu erstellen.
- Nach erfolgreicher Hinzufügung von Styling -Regeln wird der letzte Schritt (Display) durchgeführt
Die visuelle Darstellung des Ladens einer Webseite wird unten angezeigt
Das Datenobjektmodell (DOM) ist eine hierarchische (baumartige) Struktur des HTML-Code. Jedes Element und seine zugehörigen Eigenschaften werden als Dom -Knoten bezeichnet. Die CSS -Selektoren (es kann jedes HTML -Element sein) werden mit den DOM -Knoten überprüft und die übereinstimmenden Knoten übernehmen die Eigenschaften/Werte, die in einer CSS -Datei definiert sind.
Abschluss
Der CSS -Prozess identifiziert die Elemente einer Webseite. Es bestimmt auch, wie Stile auf diese Elemente angewendet werden. Es ist wichtig zu verstehen, dass CSS keine Sprache ist, die auf eine Sprache oder ein einzelnes Stilblatt beschränkt ist. Dieser beschreibende Beitrag erleuchtet die Grundlagen und die Arbeit von CSS. Zunächst haben wir kurze Details zum grundlegenden Konzept von CSS geliefert und dann die kollaborative Arbeit von HTML und CSS beschrieben.
Happy Computing!