Klasse vs id | Erklärt

Die HTML -Datei werden Elemente hinzugefügt, um eine Webseite zu erstellen. Für die Manipulation oder das Styling der erforderlichen Elemente ist es jedoch wichtig, zuerst auf sie zuzugreifen. Für den entsprechenden Zweck kann eine ID oder eine Klasse hinzugefügt werden, während das HTML definiert wird. Diese ID oder Klasse kann später für die genannten Operationen verwendet werden.

Die Lernergebnisse dieses Beitrags sind:

• Was ist Klassenattribut?
• So fügen Sie HTML -Elemente Klassenattribute hinzu?
• Wie man Klassenattribut mit CSS stymt?
• So verwenden Sie das Klassenattribut mit mehreren Namen?
• Was ist das ID -Attribut?
• So stylen Sie ID -Attribut?
• Unterschied zwischen Klassen- und ID -Attributen

Was ist Klassenattribut?

In HTML die “KlasseDas Attribut wird mit den Elementen angegeben. Das Klassenattribut kann einen oder mehrere Klassennamen für ein HTML -Element identifizieren. Darüber hinaus kann der gleiche Klassenname verschiedenen HTML -Elementen zugeordnet werden. Infolgedessen werden diese Klassennamen vom CSS- und JavaScript -Code zugegriffen, um verschiedene Funktionen anzuwenden.

So fügen Sie HTML -Elementen Klassenattribut hinzu?

Fügen Sie zunächst ein DIV -Element mit dem Klassennamen hinzuhauptsächlich”In der HTML -Datei. Hinzufügen

Und

Tags, um einige Inhalte in dieses Element aufzunehmen. Darüber hinaus haben diese beiden Tags das gleiche Klassenattribut “Text”:

Willkommen bei LinuxHint!

Beste Tutorial -Website

Der oben erwähnte Code erfolgt auf der Webseite zwei Abteilungen. Um sie zu unterscheiden, wenden wir einige CSS -Eigenschaften an.

Wie man Klassenattribut mit CSS stymt?

Der folgende Abschnitt zeigt die Stylingeigenschaften, die auf die oben genannten Klassen angewendet werden.

Klassenauswahl angeben

Der ".Symbol in CSS, bevor jeder Klassenname als das bekannt istKlassenauswahl”. Der Klassenname, gefolgt von diesem Symbol, wird verwendet, um auf die Klasse zuzugreifen.

Style Main Div

.hauptsächlich
Breite: 500px;
Höhe: 300px;
Grenze: 7PX Solid #379237;
Rand: 15px Auto;
Hintergrundfarbe: #a0e66b;

Das DIV -Element mit dem Klassennamen “hauptsächlich”Wird mit Eigenschaften gestaltet, die unten beschrieben werden:

• “BreiteEigenschaft legt die Breite des Elements fest.
• “HöheEigenschaft legt die Höhe des Elements fest.
• “GrenzeDie Eigenschaft wird verwendet, um den Rand mit dem Wert festzulegen, der die Breite des Randes, den Randtyp und die Farbe des Randes angibt.
• “RandEigenschaftssätze/passen die Räume um die DIV ein.
• “HintergrundfarbeDie Eigenschaft wird verwendet, um die Hintergrundfarbe des Elements festzulegen.

Es ist zu sehen, dass der Div mit dem Klassennamen “hauptsächlich”Wird erfolgreich gestaltet. Der "KlasseText ist noch nicht gestaltet:

Stiltextklasse

.Text
Text-Align: Mitte;
Schriftgröße: 40px;
Farbe lila;

Der Klassentext der

Und

Tags werden durch Bereitstellung des obigen Codes gestaltet. Die Beschreibung des oben genannten Codes ist unten aufgeführt:

• “TextausrichtungDie Eigenschaft legt die Ausrichtung des Textes des Elements fest.
• “SchriftgrößeEigenschaft legt die Schriftgröße des Elements fest.
• “FarbeDie Eigenschaft wird verwendet, um Farbe auf den Text des Elements anzuwenden.

Jetzt wurden Elemente im Zusammenhang mit beiden Klassen erfolgreich gestaltet:

So verwenden Sie das Klassenattribut mit mehreren Namen?

Nehmen wir an, wir möchten zwei Absätze hinzufügen. Eine mit der Farbe Orange und der andere mit einfachem Schwarz. Beide müssen die gleichen Styling -Eigenschaften außer der Farbe haben.

Erstellen Sie zuerst in der HTML -Datei zuerst ein Divelelement mit dem Klassennamen “hauptsächlich”. Dann fügen Sie in diesem Div zwei hinzu

Tags mit Klassenattributen. Der erste

Tag ist mit beiden Klassen verbunden. Das andere

Tag wird mit der Klasse zugewiesen “Text" nur:

"Erfolg ist am besten, wenn es geteilt wird"

Erfolgszitate

Stilklassentext

.Text
Text-Align: Mitte;
Schriftgröße: 40px;
Schriftdicke: fett;
Padding-Top: 20px;

Der "TextDie Klasse wird mit den unten beschriebenen Eigenschaften gestaltet:

• “Textausrichtung”Eigenschaft mit dem Wert“Center”Legt die Textausrichtung in der Mitte fest.
• “SchriftgrößeDie Eigenschaft wird verwendet, um die Schriftgröße des Elements anzugeben.
• “Schriftgewicht"Mit dem Wert"deutlich”Wird den Text mutig machen.
• “PolsterungDie Eigenschaft wird verwendet, um den Raum oben im Inhalt des Elements anzugeben.

Stilklasse Para

.para
Farbe: #DC5F00;

Der Name der zweiten Klasse PARA erhält nur Style -Eigenschaftsfarbe mit Wert #DC5F00.

Mal sehen, was das Ergebnis des oben genannten HTML -Code ist:

Es kann beobachtet werden, dass die in der Textklasse angegebenen Eigenschaften auf beide Elemente angewendet werden. Aber wie wir auch die Para -Klasse dem ersten P -Element zugewiesen haben, hat sich die erste Farbeigenschaft geändert.

Was ist ID -Attribut?

Der "AusweisDas Attribut muss für jedes Element in einem ganzen HTML -Element eindeutig sein. Dieses Attribut wird von CSS und JavaScript verwendet, um verschiedene Aktionen auszuführen. Wir können nicht mehrere ID -Namen für ein Element verwenden.

Html

Fügen Sie in der HTML -Datei zwei hinzu

Tags mit etwas Text. Der erste

Tag heißt ID als "para”:

Willkommen bei LinuxHint!

Beste Tutorial -Website

So stylen Sie ID -Attribut?

Der folgende Abschnitt zeigt die auf das obigen ID -Attribut angewendeten Stylingeigenschaften.

ID -Selektor

In HTML die “#"Zeichen ist auch als" als "bekannt"ID -Selektor”. Der ID -Name, gefolgt von diesem Symbol, wird verwendet, um mit dieser ID auf das Element zugreifen zu können.

Stil para id

#para
Text-Align: Mitte;
Schriftgröße: 40px;
Farbe lila;

Das Element mit dem Namen “para”Wird mit den unten beschriebenen Eigenschaften gestaltet:

• “TextausrichtungDie Eigenschaft macht das Textzentrum ausgerichtet.
• “SchriftgrößeDie Eigenschaft passt die Größe des Textes an.
• “FarbeEigenschaft dreht die Farbe des Textes lila.

Ausgang

Klasse vs id

Hier finden Sie die Liste der wichtigsten Unterschiede zwischen Klassen- und ID -Attributen:

ID -Attribut	Klassenattribut
Das ID -Attribut muss für jedes Element in HTML eindeutig sein.	Eine Klasse kann auf mehr als ein HTML -Element angewendet werden.
Ein ID -Attribut kann an ein Element angehängt werden.	Wir können mehrere Klassenwählern an ein Element binden.
In CSS, um Stile auf die ID anzuwenden, die “#Symbol, gefolgt vom ID -Namen, wird verwendet.	In CSS, um eine Klasse zu stylen, die wir verwenden “.”Gefolgt vom Klassennamen, um auf die spezifische Klasse zuzugreifen.
Syntax: #Ausweis // CSS -Erklärungen	Syntax: .Klasse // CSS -Erklärungen

Wir haben die Unterschiede zwischen den Klassen- und ID -Attributen verglichen.

Abschluss

In HTML kann das Klassenattribut mehrere Klassennamen enthalten. Das ID -Attribut kann nicht mehrere Namen enthalten. Es muss in einem ganzen HTML -Dokument einzigartig sein. Beide Attribute werden jedoch zum Zugriff auf das relevante HTML -Element (en) verwendet. Dieser Blog hat den Unterschied zwischen den ID- und Klassenattributen mit Beispielen erklärt.