In diesem Artikel zeige ich Ihnen, wie Sie ID und Klasse in HTML verwenden. Dies sind zwei sehr wichtige Attribute, die uns helfen, sie einfach mit CSS zu kombinieren.

Jedes HTML-Tag hat seine eigenen und unterschiedlichen Attribute. Mit den Attributen ID und Class können jedoch 100 % der Tags verwendet werden. ID ist wie Ihre Identifikationsnummer und Klasse ist wie Ihr Geschlecht. Lassen Sie uns gemeinsam die Details herausfinden.

Was ist ID in HTML?

ID in HTML ist eine eindeutige und identifizierende Zeichenfolge, die verwendet wird, um an ein bestimmtes HTML-Tag anzuhängen. In einer HTML-Datei ist die ID eindeutig, was bedeutet, dass Sie nicht 1 ID für 2 HTML-Tags festlegen können.

Die Benennung von IDs sollte folgenden Regeln folgen :

• Name in Englisch und ohne Akzente, keine Leerzeichen, keine Sonderzeichen.
• Die Benennung ist sinnvoll und hilft uns, auf den Ausweis zu schauen, um zu wissen, wofür die Karte ist.

Beispiel : Ich erstelle ein Dialogfeld, das einen Rabattcode anzeigt, und ich werde ein div-Tag verwenden, um das gesamte Dialogfeld zu umgeben. Dann habe ich nicht vergessen, die ID dafür als „ discount_wrapper “ zu setzen.

 <div id="discount_wrapper"> </div>

Wenn Sie nun CSS verwenden möchten, um dieses Tag zu bearbeiten, verwenden Sie die folgende Syntax:

 #discount_wrapper{ background:red; height: 300px }

Kurz gesagt, wenn Sie CSS verwenden möchten, um die ID abzufragen, verwenden Sie die #ten_id Syntax.

Was sind Klassen in HTML?

Wenn die ID in einer HTML-Dokumentdatei eindeutig ist, dann ist die Klasse anders, sie wird verwendet, um eine Klasse von Objekten zu erstellen, die ein gemeinsames Merkmal teilen. Sie können also eine Klasse an viele verschiedene HTML-Tags anhängen.

Auch die Benennung der Klasse sollte den Regeln folgen, die ich in Teil 1 angewiesen habe.

Zum Beispiel : Ich möchte eine Liste von Posts anzeigen und jeden Post nenne ich ihn einen Block. Wenn es also 100 Posts gibt, brauche ich 100 Blöcke. Wenn wir ID verwenden, um diese 100 Blöcke festzulegen, ist es sehr schwierig. Wir werden also eine Klasse für 100 Blöcke erstellen, und wir müssen nur CSS für diese Klasse schreiben, und die anderen 100 Blöcke werden sofort CSS angewendet.

 <div class="post"> Post 1 </div> <div class="post"> Post 2 </div> <div class="post"> Post 3 </div> <div class="post"> Post 4 </div> <div class="post"> Post 5 </div> <div class="post"> Post 6 </div>

In CSS würde ich folgendes schreiben:

 .post{ background:red; height: 100px; margin: 20px; }

Daher verwenden wir die . für Klasse und # für ID.

Wann verwendet man ID und wann Klasse?

Das ist eine Frage, die mir viele von Ihnen gestellt haben. Um dies zu beantworten, müssen Sie die beiden Konzepte, die ich oben vorgestellt habe, noch einmal durchgehen.

• Die ID ist innerhalb eines HTML-Dokumentsatzes eindeutig. Daher sollten Sie es setzen, wenn die Seitenstruktur nur an einer Stelle existiert, also CSS keine Vererbung hat.
• Klasse ist anders, kann Klassen an viele verschiedene HTML-Tags anhängen. Daher sollten Sie es verwenden, wenn Sie möchten, dass verschiedene HTML-Tags das CSS des anderen erben können.

Mit diesem Tutorial habe ich Ihnen gezeigt, wie Sie IDs und Klassen in HTML verwenden. Dies ist ein wichtiges Thema, es ist eine Prämisse für Sie, um die nächsten Lektionen zu lernen. Bitte schauen Sie genau hin, wenn Sie Fragen haben, kommentieren Sie sie bitte, damit ich sie beantworten kann.