Verwenden von Stilklassen und IDs in HTML und CSS

Das Erstellen von Websites im heutigen Web erfordert ein tiefes Verständnis von CSS (Cascading Style Sheets). Dies sind die Anweisungen, die Sie einer Website geben, um zu bestimmen, wie sie im Browserfenster angeordnet wird. Sie wenden eine Reihe von "Stilen" auf Ihr HTML-Dokument an, die das Erscheinungsbild Ihrer Webseite bestimmen.

Es gibt viele Möglichkeiten, die oben genannten Stile auf ein Dokument anzuwenden, häufig möchten Sie jedoch nur einen Stil verwenden etwas der Elemente in einem Dokument, aber nicht alle Instanzen dieses Elements. Sie können auch einen Stil erstellen, den Sie auf mehrere Elemente in einem Dokument anwenden können, ohne die Stilregel für jede einzelne Instanz wiederholen zu müssen. Um diese gewünschten Stile zu erreichen, verwenden Sie die Klassen- und ID-HTML-Attribute. Diese Attribute sind globale Attribute, die auf nahezu jedes HTML-Tag angewendet werden können. Das heißt, unabhängig davon, ob Sie Abteilungen, Absätze, Links, Listen oder andere HTML-Elemente in Ihrem Dokument gestalten, können Sie Klassen- und ID-Attribute verwenden, um diese Aufgabe zu erledigen!

Klassenauswahl

Mit der Klassenauswahl können Sie mehrere Stile auf dasselbe Element oder Tag in einem Dokument festlegen. Beispielsweise möchten Sie, dass bestimmte Abschnitte Ihres Textes in einer anderen Farbe dargestellt werden als der Rest des Textes im Dokument. Diese hervorgehobenen Abschnitte können eine "Warnung" sein, die Sie auf der Seite einstellen. Sie können Ihre Absätze mit Klassen wie folgt zuordnen:

p {color: # 0000ff; } p.alert {color: # ff0000; }

Diese Stile würden die Farbe von festlegen alles Absätze werden blau (# 0000ff), aber jeder Absatz mit dem Klassenattribut "alert" würde stattdessen rot dargestellt (# ff0000). Dies liegt daran, dass das Klassenattribut eine höhere Spezifität aufweist als die erste CSS-Regel, die nur einen Tag-Selektor verwendet. Bei der Arbeit mit CSS überschreibt eine spezifischere Regel eine weniger spezifische. In diesem Beispiel wird mit der allgemeineren Regel die Farbe aller Absätze festgelegt. Die zweite, spezifischere Regel überschreibt diese Einstellung jedoch nur in einigen Absätzen.

So könnte dies in einigen HTML-Markups verwendet werden:

Dieser Absatz wird in Blau angezeigt. Dies ist die Standardeinstellung für die Seite.

Dieser Absatz wäre auch in blau.

Dieser Absatz wird rot dargestellt, da das Klassenattribut die Standardfarbe Blau aus dem Elementauswahlstil überschreibt.
In diesem Beispiel würde der Stil von "p.alert" nur für Absatzelemente gelten, die diese "alert" -Klasse verwenden. Wenn Sie diese Klasse für mehrere HTML-Elemente verwenden möchten, entfernen Sie das HTML-Element einfach vom Anfang des style-Aufrufs (lassen Sie nur den Punkt (

.) an Ort und Stelle, wie folgt:
.alert {Hintergrundfarbe: # ff0000;}
Diese Klasse ist jetzt für jedes Element verfügbar, das sie benötigt. Jeder Teil Ihres HTML-Codes, der den Klassenattributwert "alert" hat, erhält jetzt diesen Stil. In dem HTML-Code haben wir sowohl einen Absatz als auch eine Überschriftenebene 2, die die "alert" -Klasse verwenden. Beide hätten eine rote Hintergrundfarbe basierend auf dem gerade gezeigten CSS.

Dieser Absatz wird in rot geschrieben.

Und diese H2 wäre auch rot.

Auf heutigen Websites werden Klassenattribute häufig für die meisten Elemente verwendet, da sie aus einer bestimmten Perspektive wie IDs leichter zu bearbeiten sind. Die meisten aktuellen HTML-Seiten werden mit Klassenattributen gefüllt, von denen einige mehrmals in einem Dokument wiederholt werden und andere nur einmal angezeigt werden.

ID-Selektoren

Mit der ID-Auswahl können Sie einem bestimmten Stil einen Namen geben, ohne ihn mit einem Tag oder einem anderen HTML-Element zu verknüpfen. Angenommen, Sie hatten eine Abteilung in Ihrem HTML-Markup, die Informationen zu einem Ereignis enthält. Sie können dieser Division ein ID-Attribut von "event" zuweisen, und wenn Sie diese Division mit einem 1 Pixel breiten schwarzen Rand skizzieren möchten, schreiben Sie einen ID-Code wie folgt:

#event {border: 1px solid # 000; }
Die Herausforderung bei ID-Selektoren besteht darin, dass sie in einem HTML-Dokument nicht wiederholt werden können. Sie müssen eindeutig sein (Sie können dieselbe ID auf mehreren Seiten Ihrer Website verwenden, jedoch nur einmal in jedem einzelnen HTML-Dokument). Wenn Sie also 3 Ereignisse hatten, für die diese Grenze erforderlich war, müssten Sie ihnen ID-Attribute für "event1", "event2" und "event3" geben und jedes davon einzeln formatieren. Es wäre daher viel einfacher, das vorgenannte Klassenattribut "event" zu verwenden und alle gleichzeitig zu stylen.

Komplikationen von ID-Attributen

Eine weitere Herausforderung bei ID-Attributen besteht darin, dass sie eine höhere Spezifität aufweisen als Klassenattribute. Wenn Sie also CSS benötigen, das einen zuvor festgelegten Stil überschreibt, kann dies schwierig sein, wenn Sie sich zu sehr auf IDs verlassen. Aus diesem Grund haben viele Webentwickler die IDs in ihrem Markup nicht mehr verwendet, selbst wenn sie diesen Wert nur einmal verwenden möchten, sondern sich für fast alle Stile für weniger spezifische Klassenattribute entschieden.

Der einzige Bereich, in dem ID-Attribute zum Tragen kommen, ist, wenn Sie eine Seite mit In-Page-Anker-Links erstellen möchten. Zum Beispiel, wenn Sie eine Website im Parallax-Stil haben, die den gesamten Inhalt einer Seite mit Links enthält, die zu verschiedenen Teilen dieser Seite "springen". Dies geschieht mithilfe von ID-Attributen und Textlinks, die diese Ankerlinks verwenden. Sie fügen einfach den Wert dieses Attributs, dem das Symbol "#" vorangestellt ist, zum Attribut "href" des Links hinzu, wie folgt:

Das ist die Verbindung
Wenn Sie darauf klicken oder berühren, springt dieser Link zu dem Teil der Seite, der dieses ID-Attribut enthält.Wenn kein Element auf der Seite diesen ID-Wert verwendet, führt der Link nichts aus.

Denken Sie daran, wenn Sie In-Page-Links auf einer Site erstellen möchten, ist die Verwendung von ID-Attributen erforderlich. Sie können jedoch Klassen zu allgemeinen CSS-Stilzwecken verwenden. So kennzeichnen wir Seiten heute - wir verwenden Klassenselektoren so weit wie möglich und wenden uns IDs nur zu, wenn das Attribut nicht nur als Hook für CSS, sondern auch als In-Page-Link fungiert.