CSS -Gruppe

Der Gruppenwählte wird zum Styling aller Elemente, die von Kommas getrennt werden, mit den gleichen Style -Eigenschaften verwendet. Mehrere Komponenten können gemeinsam mit dem CSS -Gruppierungsauswahl ausgewählt und gestylt werden. Jeder Selektor wird durch einen Raum von den anderen getrennt und legt ein Komma zwischen jedem Element oder Selektor. Wenn wir den gleichen Stil auf alle Elemente anwenden möchten, müssen wir für all diese keine separaten Eigenschaften einsetzen. Stattdessen haben wir die Gruppierungswahlmethode verwendet und die Eigenschaften gleichzeitig auf alle Elemente festgelegt. In diesem Tutorial werden wir diesen Gruppierungswähler verwenden und Ihnen die Verwendung im Detail erklären.

Syntax des Gruppenauswahl:

Element1, Element2, Element3…

// Deklarationsliste

Beispiel 1:

Um diese angegebenen Beispiele zu demonstrieren, wird Visual Studio -Code verwendet. Wir öffnen die neue Datei und wählen die Sprache „HTML“ aus, mit der eine HTML -Datei erstellt wird. Dann beginnen wir in der frisch erstellten Datei zu tun. Wenn wir den fertigen Code speichern, das “.Die Dateierweiterung der HTML ”wird dem Dateinamen automatisch hinzugefügt. Sobald die grundlegenden HTML -Tags in dieser neu geformten Datei durch Hinzufügen angezeigt wurden!"Markierungen und Klicken auf" Enter ", wir fügen mit dem Hinzufügen der Überschriften" H1 "und" H2 "angefangen, indem wir die Überschriften" H1 "und" H2 "hinzufügen. Nach diesen Überschriften setzen wir zwei verschiedene Absätze in den HTML -Code ein. Jetzt erstellen wir danach die CSS -Datei und verknüpfen beide Dateien zum Anwenden der CSS -Eigenschaften auf die HTML -Elemente.

Da wir den gleichen Stil sowohl auf die Überschrift als auch auf den Absatz anwenden möchten, müssen wir nicht alle diese Elemente getrennt setzen. Wir folgen einfach dem Gruppierungswählers und erwähnen alle Elemente und trennen sie, indem wir ein Komma „“ zwischen ihnen setzen, wie im Screenshot unten gezeigt. Wir erwähnen alle Elemente als "H1, H2, P". Setzen Sie nun lockige Zahnspangen ein und verwenden Sie dann Eigenschaften in diesen lockigen Zahnspangen. Wenn wir Eigenschaften hinzufügen, gelten diese Eigenschaften für alle Elemente, die wir erwähnt haben. Wir verwenden die Eigenschaft „Text-Align“ von allen und setzen sie auf „Zentrum“, indem wir diese eine Eigenschaft nutzen.

Dann dekorieren wir all dies, indem wir "Untersteuer" als Wert der Eigenschaft "Textdekoration" einstellen. Die „Schriftfamilie“, die wir für all diese Elemente verwenden, ist "algerisch". Wir passen die „Schriftgröße“ auf „22px“ an. Dann haben wir die Eigenschaft „Farben“ verwendet, die wir auf „Maroon“ für alle Überschriften sowie Absätze gesetzt haben.

Hier ist das Ergebnis des oben genannten CSS -Code. Sie können sehen, dass die Farbe, die Schriftgröße, die Schriftfamilie und alle anderen Eigenschaften, die wir oben verwendet haben, auf alle Überschriften und Absätze angewendet werden. Das gesamte Styling für diese Elemente ist hier das gleiche wie wir im CSS -Code festgelegt haben.

Beispiel # 2:

In diesem Beispiel werden wir mehrere Absätze mit eindeutigen Namen und auch mehrere Divs mit unterschiedlichen Namen erstellen. Wir haben hier vor all diesen Absätzen und Divs einen Übergang hier. Wir werden den Gruppierungswählers auf alle diese im CSS -Code anwenden.

Wir setzen die Namen aller Absatzklassen und Div -Kurse sowie die Überschrift an. Wir werden alle die gleichen Eigenschaften auf alle anwenden. Alle Eigenschaften, die wir hier in den lockigen Klammern definieren werden, gelten für all diese Elemente, die wir erwähnt haben. Wir stimmen alle Elemente im „Zentrum“ mit Hilfe der Eigenschaft „Text-Align“ aus und verwenden die „Times New Roman“ als Wert der Eigenschaft „Schriftfamilie“. Stellen Sie dann die "Schriftgröße" auf "23px" ein und die "Farbe" für alle ist "rot". Jetzt wenden wir einige „Hintergrundfarbe“ als „hellhoch-blau“ und den „Schriftstil“ auf "kursiv" an, um "kursiv". Alle diese Eigenschaften werden auf alle Absätze, Divs und auch auf die Überschrift angewendet.

Hier, in diesem Ergebnis des obigen Code, werden alle Divs, Absätze und auch die Überschrift im selben Stil angezeigt. Alle auf alle angewendeten Styling -Eigenschaften sind gleich. Da haben wir den Gruppierungswählers dafür verwendet.

Beispiel # 3:

Hier werden wir die gleichen Eigenschaften auf Absätze anwenden. Alle Absätze erscheinen gleich. Für die Divs verwenden wir die gleichen Eigenschaften, sodass alle Divs im gleichen Stil rendern.

Wir verwenden "Times New Roman" als "Schriftfamilie" des "H1" und "Orange" wird hier als "Farbe" ausgewählt. Die "Hintergrundfarbe" dieses "H1" ist auf "hellgelb" eingestellt. Jetzt platzieren wir alle Absatznamen und verwenden hier einige Eigenschaften. "Calibri" wird als Wert für die Eigenschaft "Schriftfamilie" angegeben und "Schriftgröße" wird "23px" sein. Dann "Maroon" für die "Farbe". Hier setzen wir eine „Hintergrundfarbe“ aus „hellgrün“ und der Wert für die Eigenschaft „Schriftgewicht“ ist auf "fett" eingestellt. Dann haben wir die Eigenschaft "Farbe" und setzen sie auf "grün" und die "Hintergrundfarbe" für alle Divs ist "Lichtsalmon". Wir "kursiv", indem wir diesen Wert in der Eigenschaft im Textstil festlegen.

Hier sehen Sie, dass alle Absätze im gleichen Stil erscheinen und alle Divs im gleichen Stil erscheinen, wie wir diese Werte im CSS -Code festgelegt haben.

Beispiel Nr. 4:

Wir haben drei verschiedene Überschriften, einen Absatz, einen Div und auch eine Spannweite. Wir werden alle diese in CSS die gleichen Styling -Eigenschaften anwenden.

Wir setzen die Namen aller Elemente, auf die wir die Eigenschaften anwenden möchten. Sie können hier sehen, wie Sie diese Namen platzieren. Wir müssen das Komma zwischen den Namen aller Elemente setzen und dann die Eigenschaften in die lockigen Klammern platzieren. Wir verwenden die Eigenschaft "Text-Align", um alle Komponenten "links" auszurichten. Die Schriftfamilie „Times New Roman“ wird als Wert für die Eigenschaft „Schriftfamilie“ festgelegt. Wählen Sie dann "24px" für die "Schriftgröße", die auf alle angewendet wird, und "lila" wird für die "Farbe" ausgewählt. Hier wenden wir eine „Hintergrundfarbe“ von „Light-Pink“ an und das Schlüsselwort „Fett“ wird als Wert der Eigenschaft „Schriftgewicht“ ausgewählt. Außerdem haben wir "Unterstreich" für das Eigentum "Textdekoration" verwendet, um alle attraktiver zu machen.

Das Ergebnis des oben genannten CSS -Code wird hier angezeigt. Wie Sie sehen können. Die Formatierung für diese Elemente ist hier gleich.

Abschluss

In diesem Tutorial haben wir erklärt, dass der Gruppierungswähler definiert ist, da wir mehrere Komponenten und Stile gemeinsam auswählen können, um sie durch ein Komma zu trennen. In unseren Codes haben wir dieses Konzept verwendet. In diesem Tutorial haben wir auch darüber diskutiert, wie man diesen Gruppierungswähler benutzt und wie Eigenschaften in diesem Bereich festgelegt werden können. Wir haben auch die Ergebnisse all dieser Codes gegeben. Für Ihren Vorteil haben wir ein vollständiges Tutorial entwickelt, das den Code, eine gründliche Erklärung und die Ergebnisse enthält.