CSS verschachtelte Klassen

CSS ist ein Sprachstück, das zu einer anderen Front-End-Design-Sprache, HTML, hinzugefügt wird, um eine Website oder eine Webseite zu erstellen. Für die interne und externe Erklärung von CSS müssen wir IDs oder Klassen mit den Funktionen deklarieren, die wir für den HTML -Inhalt anwenden möchten.

CSS -Klasse:

In CSS oder einer anderen Programmiersprache spielen Klassen eine wichtige Rolle, wenn wir über die Spezifikation eines Elements sprechen. In CSS werden Klassen erstellt, um ein paar Stile und Auswirkungen auf die HTML -Elemente zu deklarieren. Alle CSS -Eigenschaften werden innerhalb des Klassenkörpers geschrieben, indem sie den Eigenschaften Werte zuweisen. Zum Beispiel:

.Klassenname
Property_Name: Wert;

Eine Klasse wird mit einem Punkt und dem Klassennamen deklariert. Diese Klassen werden vom HTML-Inhalt zugegriffen, wenn der Name der Klasse in den jeweiligen Tags geschrieben ist- wie wir es für einen der HTML-Inhalte wie Absatz getan haben < p class= "class_name"> Dies ist ein Absatz

Indem Sie den Namen erwähnen, werden alle Eigenschaften einer Klasse auf diesen Inhalt angewendet. Der Hauptzweck der Schaffung dieser Klasse besteht darin, dass alle Eigenschaften und Stile dem HTML -Inhalt gleichzeitig erlaubt sind.

Verschachtelte Klassen:

Genau wie in der einfachen Klasse werden auch verschachtelte Klassen erstellt, während die Webseiten entworfen werden. Das verschachtelte Phänomen ist auch den Entwicklern und Designern nicht unbekannt, da dieser Begriff für IF-ELSE-Aussagen, für Schleifen usw. gilt. Die Erklärung der CSS -verschachtelten Klasse ähnelt irgendwie den verschachtelten Loops. Die Klasse ist nicht nur die Klasse, sondern auch HTML -Tags werden durch den Begriff "verschachtelte Klassen" betroffen. Ein HTML -Tag des Inhalts wird einmal mit einem Klassennamen deklariert. In diesem Tag wird das andere Tag des "gleichen" HTML -Inhalts in diesem Tag mit einem anderen Klassennamen deklariert. Am Ende sind beide Tags gemeinsam geschlossen. Dies macht das erste Tag das äußere und das zweite Tag ein inneres Tag. Wir können jeweils mehr als ein inneres Tag verwenden. Sobald der Klassenname in den äußeren Tags erwähnt wurde, müssen alle inneren Tags anderer HTML -Inhalte keinen Klassennamen mit ihnen weiter hinzufügen.

Text

Text

Dies war die Erklärung des Klassennamens im HTML -Körper. Jetzt werden wir sehen, wie die Klassen im Kopfabschnitt deklariert werden. Zuerst wird die Klasse des äußeren HTML -Tags deklariert und dann die innere.

Dies ist irgendwie die Eltern-Kind-Klassenbeziehung. Weil das äußere HTML -Tag zum Beispiel eine Klasse 'Class1' hat. Es wird zusammen mit seinem Absatzinhalt deklariert wie:

.Class1 p

Wir können die Klasse der Absätze nicht direkt verwenden. Betrachten Sie nun ein inneres Div -Tag mit einer anderen Klasse 'Class2'. Für die verschachtelte Klasse werden wir die Klasse von beiden Tags hinzufügen. Das äußere und das innere div 1.

.class1 class2 p

Dies ist erforderlich, um den HTML -Inhalt seiner Klasse anzugeben und zu wem es gehört. Jetzt werden wir einige Beispiele ausprobieren, um dieses Konzept zu erläutern.

Beispiel 1:

In diesem Beispiel wird eine einfache Körperfarbe mithilfe des HTML -Tags hinzugefügt. Anschließend wird ein Div -Tag mit einer CSS -Klasse mit dem Namen Container verwendet.

In diesem Div wird ein Überschriften -Tag verwendet, um eine einfache Überschrift hinzuzufügen. Ein Absatz wird verwendet, um einen einfachen Satz hinzuzufügen. Beide Tags werden nicht von der CSS -Klasse begleitet, da diese direkt über den Namen des Div -Containers gestylt werden.

Jetzt im Div -Tag werden wir vor dem Schließen dieses DIV ein weiteres DIV mit einem neuen CSS -Klasse -Namen hinzufügen.

Diese DIV enthält wieder sowohl die Überschrift als auch die Absätze darin. Schließen Sie die DIV, das erste Schlussetik.

Schließen Sie das Körpermarke. In dem Style -Tag des Kopfes werden wir zunächst die Klasse des ersten Div -Containers deklarieren. Die Überschrift der Containerklasse wird vom Klassennamen des äußeren Divs zugegriffen.

.Container H1
Schriftgröße: 24px;
Farbe: Cyan;

Schriftfarbe und Schriftgröße werden auf die Überschrift angewendet. In ähnlicher Weise wird der Absatz auch von dem CSS mit derselben Schriftgröße und der gleichen Farbeigenschaften angewendet. Wenn es um die Klassenbeschreibung für die innere DIV geht, verwenden wir immer die äußere Div -Klasse zusammen mit der inneren Div -Klasse und dann den Elementen im Div. Dies soll ordnungsgemäß auf den HTML -Inhalt zugreifen. Wir können nicht direkt auf die Klasse in der DIV zugreifen, genau wie die Eltern-Kind-Klasse in der Erbschaft. Zuerst schreiben wir den Namen der Elternklassen und dann die Kinderklasse. Auf diese Weise werden alle Unklarheiten in Bezug auf mehrere Eltern und mehr als der Unterricht eines Kindes entfernt.

.Container .Myclass p
Schriftgröße: 24;
Farbe: LightGreen;

Schließen Sie alle geöffneten Tags und speichern Sie den Code in der Textededatei als HTML -Erweiterung. Mit dieser Erweiterung kann die Webseite im Browser angezeigt werden.

Bei der Ausführung sehen Sie, dass eine schwarze Backboden-Webseite mit allen Überschriften und Absätzen mit der gleichen Ausrichtung und Hierarchie erstellt wird, wie sie mit allen CSS-Effekten deklariert wurden. Dies liegt daran, dass das Stylesheet die CSS -Eigenschaft der Klasse in derselben Reihenfolge enthält.

Beispiel 2:

In diesem Beispiel geht es um die Verwendung einer Liste im HTML -Code. Das gleiche Div mit einem Klassenbehälter wird als äußere DIV für die verschachtelten Klassen verwendet. Für den Inhalt der äußeren Div. Danach wird eine innere Div mit derselben Klasse deklariert. Diese DIV enthält eine nicht ordnungsgemäße Liste der HTML.

Nach dieser DIV wird ein weiterer Div im zweiten Div verwendet, um verschachtelte Klassen zu erstellen. Diese DIV enthält einen anderen Klassennamen, um ordnungsgemäß identifiziert zu werden.

< div class = "MyClass1" >

In dieser DIV haben wir eine Überschrift und eine ungeordnete Liste verwendet. Lassen Sie uns nun den CSS -Abschnitt sehen. Alle Klassen und Eigenschaften werden auf die gleiche Weise deklariert wie im vergangenen Beispiel. Nur die Zugabe ist die Klasse des innersten oder der 3. Div.

.Container .Myclass1 H1
Schriftgröße: 20px;
Farbe weiß;

Speichern Sie den Code und führen Sie die Datei aus.

Sie werden sehen, dass jedes Div und seine Elemente mit den Auswirkungen angewendet werden, die wir in den CSS -Klassen bereitgestellt haben.

Abschluss

CSS -verschachtelte Klassen sind ein Ansatz, um hierarchisch Klassen zu deklarieren, die das äußere und innere Phänomen der Tags verursachen. Stellen Sie sicher, dass die HTML -Tags, auf denen wir CSS -verschachtelte Klassen implementieren sollen. Wenn eine Hierarchie der Klassenerklärung geändert oder die Sequenz gestört wird, ist es schwierig, die CSS -Eigenschaften auf den HTML -Inhalt in einer verschachtelten Klasse anzuwenden. Wir haben zu diesem Thema mit zwei Beispielen ausgearbeitet, einen mit einem einzigen inneren Inhalt, während das zweite Beispiel zwei innere HTML -Inhalte enthält.