CSS ist eine Styling -Sprache, mit der das Erscheinungsbild von Webseiten geändert wird. Es gehört zu einer der bemerkenswertesten Technologien, die zum Erstellen einer Webseite verwendet werden. Jetzt müssen Sie sich fragen, wie CSS den Stil regiert? Also! Das CSS erledigt dies, indem sichergestellt wird, dass die Art und Weise, wie Elemente auf einer Webseite angezeigt werden. Daher muss eine geeignete Struktur befolgt werden, um einen effektiven CSS -Code zu schreiben.

Diese Beschreibung präsentiert eine Schritt-für-Schritt-Anleitung zum Verständnis, wie CSS strukturiert ist?

• die grundlegende Syntax des CSS.
• So implementieren Sie CSS in ein HTML -Dokument.
• Wie arbeitet man mit CSS -Selektoren, gefolgt von der Spezifität des Selektors.
• Weiße Räume in CSS.
• Kommentare in CSS.

Beginnen wir mit der CSS -Syntax.

Syntax von CSS

Die grundlegende Syntax des CSS umfasst einen Selektor sowie die Erklärungblock. Der Deklarationsblock besteht aus zwei Dingen, die ich.e. eine CSS -Eigenschaft mit seinem Wert.

In der obigen Abbildung ist P ein Auswahl.

So wenden Sie CSS auf das HTML -Dokument an

CSS kann auf drei Arten auf jedes HTML -Dokument angewendet werden.e. Verwenden von Inline -Stilen, Verwenden eines internen Stilblatts oder externer Stilblätter. In diesem Artikel wird die Arbeit aller drei Styling -Methoden mit Hilfe von Beispielen erläutert.

Inline CSS

Die Inline -Stilmethode wird am häufigsten verwendet, um einen einzigartigen Stil für ein einzelnes Element zu implementieren. Wir müssen also das Attribut „Stil“ in einem HTML -Element verwenden, um eine CSS -Eigenschaft in das angegebene Element zu implementieren.

Beispiel

Das folgende Beispiel implementiert den Inline -Stil auf dem

Element:

Inline CSS

Der obige Code legt die Textfarbe als rot fest, die Hintergrundfarbe als blau und stimmt den Text in der Mitte aus:

Interne CSS

Die interne CSS -Stilmethode gibt den Stil im Tag und im Kopfabschnitt an. Es wird verwendet, um einen bestimmten Stil auf der gesamten Seite zu implementieren.

Beispiel Dieses Beispiel beschreibt ein internes Stilblatt für alle

Elemente

Interne CSS

Willkommen bei LinuxHint.com

Willkommen bei LinuxHint.com

Willkommen bei LinuxHint.com

Die Ausgabe zeigt, dass der in dem auf allen implementierten Stilelemente der Stil angegeben ist

Elemente:

Externes CSS

Wie der Name selbst schon sagt, ist ein externes Stilblatt eine separate CSS -Datei, die zum Styling der gesamten Website verwendet werden kann. In diesem Fall wird die Referenz der externen CSS -Datei zur HTML -Datei hinzugefügt.

Beispiel Dieses Beispiel definiert verschiedene Stile für verschiedene HTML -Elemente und diese Stile werden mit einem externen Stilblatt implementiert.

Html

Die HTML -Datei enthält einen Link zu einer externen CSS -Datei:

Externes CSS

Willkommen bei LinuxHint.com

Willkommen bei LinuxHint.com

Willkommen bei LinuxHint.com

CSS

H2
Farbe: Gold;
Hintergrundfarbe: Schwarz;

P
Farbe orange;
Hintergrundfarbe: Meeresgrün;
Text-Align: Mitte;

Der obige Code erzeugt die folgende Ausgabe:

Lassen Sie uns schließen, was wir in diesem Abschnitt gelernt haben. Verwenden Sie Inline CSS nur, wenn Sie nur wenige HTML -Elemente stylen müssen. Inline wird nicht als guter Ansatz angesehen, da Sie bei Wartung möglicherweise mehrere Dinge für einen Stil bearbeiten müssen. Verwenden Sie den internen Stil für einseitige Websites. Wenn Sie jedoch auf einer breiten Website mit mehr als einer Seite arbeiten, verwenden Sie ein externes Stilblatt.

CSS -Selektoren

Die Selektoren werden verwendet, um die HTML -Elemente zu zielen, die Sie stylen möchten, und es gibt mehrere Arten von CSS -Selektoren, wie z. B.:

• CSS Elementauswahl zielt auf die HTML -Elemente basierend auf ihrem Namen ab.
• CSS ID -Selektor zielt auf die HTML -Elemente basierend auf ihrer ID ab.
• CSS Klassenauswahl zielt auf das HTML -Element basierend auf einem Klassenattribut ab.
• CSS Universeller Selektor Zielt alle auf der Seite vorhandenen Elemente.

Beispiel Der untergegebene Code-Stil verschiedene HTML-Elemente i.e. H2 und P unter Verwendung von Element Selector, Klassenauswahl bzw. ID -Selektor.

Html

H2 Verwenden von Element Selector

Absatz mit Klassenauswahl

Absatz mit ID -Selektor

CSS

H2
Hintergrundfarbe: Schwarz;
Farbe: Goldenrod;
Text-Align: Mitte;

.Stil
Hintergrundfarbe: Schwarz;
Farbe grün;
Text-Align: Mitte;

#style1
Hintergrundfarbe: Schwarz;
Farbe Rot;
Text-Align: Mitte;

Wir erhalten die folgende Ausgabe:

Spezifität

Manchmal tritt ein Zusammenstoß auf.e. Zwei Selektoren/Stile, die auf das gleiche HTML -Element abzielen, was in einem solchen Fall passieren wird und welcher Selektor die Präferenz erhält. Also! Wir haben eine allgemeine Regel für Spezifität

• !Wichtig ist eine höhere Spezifität, sodass es alles außer Kraft setzen wird
• Inline hat die zweithöchste Spezifität, sodass es alles außer dem überschreiben kann !wichtig
• Der ID -Selektor hat eine höhere Spezifität unter anderen Selektoren, jedoch niedriger als !wichtig und inline
• Als nächstes kommt Klassenauswahl, Attributauswahl und Pseudoklasse
• Elementwahl und Pseudoelemente
• Der universelle Selektor hat die niedrigste Spezifität
• Wenn dieselbe Regel in einem externen Blatt wiederholt wird, wird die letzte implementiert

Lassen Sie uns die Spezifität mit einem Beispiel verstehen:

Beispiel Das folgende Beispiel erklärt das Konzept der Spezifität.

Html

Willkommen bei LinuxHint.com

Beispiel für Spezifität

CSS

P
Farbe orange !wichtig;

#style1
Farbe Rot;

.Stil
Farbe grün;

P
Farbe blau;

H1
Farbe blau;

H1
Farbe grün;

Die Ausgabe wird sein:

Im obigen Beispiel haben wir die folgenden Punkte beobachtet:

• Der

  Element wird durch gezielt durch !Wichtig, ID, Klasse und Element Selector aber die

  Element wird nach dem gestaltet !wichtig das zeigt das !Wichtig ist die höchste Spezifität.

• Es gibt zwei verschiedene Elementelektoren, um zwei verschiedene Stile für die zu definieren

  Element, der Element -Selektor, der am Ende kommt.

Mischen Sie die Reihenfolge der Selektoren für ein besseres Verständnis und beobachten Sie den Unterschied!

Weiße Räume in CSS

In CSS ignorieren die Browser die weißen Räume, aber die korrekte Verwendung weißer Räume kann die Lesbarkeit des Codes verbessern.

Beispiel: In diesem Beispiel wird erläutert, wie weiße Räume/ Zeilenbrüche die Code -Lesbarkeit erhöhen:

Html

H2 Verwenden von Element Selector

Beispiel für Spezifität

CSS

.Stil
Hintergrundfarbe: Schwarz; Farbe grün; Text-Align: Mitte;

#style1
Hintergrundfarbe: Schwarz;
Farbe Rot;
Text-Align: Mitte;

Im Klassenauswahl wird der gesamte Code in derselben Zeile geschrieben, während wir im ID -Selektor jede Eigenschaft auf eine neue Zeile schreiben. Whitespaces/Line -Pausen erhöhen die Lesbarkeit des Codes. Die Ausgabe überprüft, ob es dem Browser egal ist, wie Sie den Code geschrieben haben, und beide Selektoren, die erfolgreich ausgeführt wurden:

Kommentare in CSS

In CSS werden alle kommentierten Abschnitte in die "/*" und "*/" eingeschlossen sein. Alles, was in den Kommentaren kommt, wird vom Browser vernachlässigt. Einige zusätzliche Details können in den Kommentaren hinzugefügt werden, um den Code zu verstehen.

Beispiel In diesem Beispiel wurden einige Kommentare hinzugefügt, die uns helfen, den Code zu verstehen.

Html

Erster Paragraph

Zweiter Absatz

CSS

/* Klassenauswahl*/
.Stil
Hintergrundfarbe: Schwarz;
Farbe orange;
Text-Align: Mitte;

/* ID Selector*/
#style1
Hintergrundfarbe: Schwarz;
Farbe Rot;
Text-Align: Mitte;

Der obige Code generiert die folgende Ausgabe:

Die Ausgabe überprüft, dass Kommentare ein besseres Verständnis des Codes bieten, ohne die Ergebnisse zu beeinflussen.

Abschluss

Die Grundstruktur von CSS enthält die grundlegende Syntax bei der Auswahl des HTML -Elements mithilfe von CSS -Selektoren und das Styling des ausgewählten Elements mit CSS -Eigenschaften.CSS kann auf drei Arten in eine HTML -Datei implementiert werden.e. Inline -Styling So setzen.

In diesem Artikel werden alle Grundlagen erörtert, um eine CSS -Datei zu strukturieren. Ausgehend von der grundlegenden Syntax des CSS und danach erklärt es die verschiedenen Arten von CSS- und CSS -Selektoren. Darüber hinaus erläutert es das Konzept der Spezifität in CSS und kommt zu dem Schluss, dass unter allen CSS -Selektoren -ID -Selektoren eine höhere Spezifität aufweist. Schließlich erklärt es die Bedeutung von Kommentaren und weißen Räumen in CSS.