Klassenauswahl in CSS
CSS bietet mehrere Möglichkeiten, um das Erscheinungsbild eines Elements zu ändern. CSS -Selektoren sind eine davon. Selektoren ermöglichen es uns, ein HTML -Element anzusprechen und einen Stil unserer Wahl für jedes HTML -Element anzugeben.
In CSS gibt es fünf Kategorien von Selektoren i.e. Einfache, Kombinator, Pseudoklasse, Pseudo-Element und Attributauswahl. Dieses Schreiben enthält einen detaillierten Überblick über einen der einfachen Selektoren I.e. Klassenauswahl und diskutieren die folgenden Terminologien im Zusammenhang mit Klassenauswahl:
- Was ist ein Klassenauswahl
- Grundlegende Syntax des Klassenwählers
- So verwenden Sie Klassenauswahl
- So verwenden Sie Klassenauswahl für bestimmte HTML -Elemente
Beginnen wir diese Diskussion mit der grundlegenden Definition des Klassenauswahl:
Klassenauswahl in CSS
Ein Klassenauswahls zielt auf das Element (n) mit bestimmten Klassennamen (en) ab. Die folgende Syntax bietet Ihnen mehr Klarheit über den Klassenauswahl.
Syntax
Die grundlegende Syntax beginnt mit einem Punkt “.”Gefolgt vom Klassennamen, der darstellt, dass es sich um einen Klassenwählers handelt.
In der obigen Abbildung “."Zeigt, dass es sich um einen CSS -Klassenauswahl handelt,„ Stil “repräsentiert den Klassennamen.
So verwenden Sie den CSS -Klassenwählers
Der CSS -Klassenwähler kann verwendet werden, um den Stil einiger spezifischer HTML -Elemente festzulegen.
Beispiel
Schauen wir uns den untergegebenen Code an und verwendet den Klassenauswahl.
CSS -Klassenauswahl
Erster Paragraph
Zweiter Absatz
Der oben genannte Code verwendet zwei Klassenauswahlern. Der
und zuerst
Element verwendet dieselbe Klasse, sodass der gleiche Stil implementiert wird, während der zweite
Element wird anders gestaltet:
So verwenden Sie den CSS -Klassenwählers für bestimmte HTML -Elemente
Wir können den CSS -Klassenauswahl verwenden, um bestimmte HTML -Elemente zu beeinflussen. Zu diesem Zweck müssen wir den Namen des Elements vor dem Punkt angeben “.”, Wie in der folgenden Abbildung gezeigt:
Die obige Abbildung beschreibt, die alle auswählen
Elemente mit dem Klassennamen "Stil" und setzen Sie die Hintergrundfarbe als blau.
Beispiel
In diesem Beispiel wird die Style1 -Klasse angegeben
Und
Elemente. Jedoch nur
Elemente mit dem Klassenattribut „Style1“ können auf die Styling -Eigenschaften von Style1 und auf die Styling -Eigenschaften zugreifen
Das Element bleibt unklug.
CSS -Klassenauswahl
Erster Paragraph
Zweiter Absatz
Ausgang
So implementieren Sie mehrere Stile im HTML -Element
Als HTML -Element kann in seinem Klassenattribut mehrere Klassennamen haben, damit wir unterschiedliche Styling basierend auf den Klassennamen anwenden können.
Beispiel
Im folgenden Code wird der erste Absatz die Eigenschaften beider Stilklassen implementieren.
CSS -Klassenauswahl
Erster Paragraph
Zweiter Absatz
Das obige Code generiert die folgende Ausgabe:
Die Ausgabe überprüft, dass der erste Absatz die Eigenschaften beider Klassen 'Style' und 'style1' verwendet.
Abschluss
Ein Klassenwähler wählt das HTML -Element für das Styling in CSS unter Verwendung seines Klassennamens aus und beginnt mit einem Punkt “.”Gefolgt vom Klassennamen. Dieses Schreiben enthält einen umfassenden Überblick und ein Kernkonzept von CSS-Klassenauswahlern, die Verwendung von Klassenauswahlern, die Verwendung eines Klassenauswahl.