Stilklassen und IDs verwenden

Klassen und IDs erweitern Ihr CSS

E+/Getty Images

Das Erstellen gut gestalteter Websites im heutigen Web erfordert ein tiefes Verständnis von Cascading Style Sheets . Wenden Sie eine Reihe von CSS-Stilen auf Ihr HTML-Dokument an, um das Erscheinungsbild Ihrer Webseite zu bestimmen.

Klassen- und ID-Attribute

Designer müssen manchmal nur einen Stil anwenden etwas der Elemente in einem Dokument, aber nicht alle Instanzen dieses Elements. Um diese gewünschten Stile zu erzielen, verwenden Sie die Klasse und ICH WÜRDE HTML-Attribute. Diese Attribute sind globale Attribute, die auf fast alle anwendbar sind HTML-Tag – Egal, ob Sie Unterteilungen, Absätze, Links, Listen oder andere HTML-Elemente in Ihrem Dokument formatieren, Sie können auf Klassen- und ID-Attribute zurückgreifen, um diese Aufgabe zu erfüllen!

Klassenselektoren

Der Klassenselektor legt mehrere Stile für dasselbe Element oder Tag in einem Dokument fest. Um beispielsweise bestimmte Abschnitte Ihres Textes als Hinweis in einer anderen Farbe hervorzuheben, weisen Sie Ihren Absätzen Klassen wie diese zu:

|_+_|

Diese Stile würden die Farbe von festlegen alle Absätze in Blau (#0000ff), aber alle Absätze mit einem Klassenattribut von Alarm würde stattdessen in Rot (#ff0000) gestaltet werden. Dies liegt daran, dass das Klassenattribut eine höhere Spezifität hat als die erste CSS-Regel, die nur einen Tag-Selektor verwendet. Beim Arbeiten mit CSS , überschreibt eine spezifischere Regel eine weniger spezifische. In diesem Beispiel legt also die allgemeinere Regel die Farbe aller Absätze fest, aber die zweite, spezifischere Regel überschreibt diese Einstellung nur in einigen Absätzen.

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

|_+_|

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

Dieser Absatz wäre ebenfalls blau.

Und dieser Absatz würde in Rot angezeigt, da das Klassenattribut die blaue Standardfarbe aus dem Stil des Elementselektors überschreiben würde.

In diesem Beispiel ist der Stil von p.alarm würde nur für Absatzelemente gelten, die das verwenden Alarm Klasse. Um diese Klasse über mehrere HTML-Elemente hinweg zu verwenden, entfernen Sie das HTML-Element wie folgt vom Anfang des Stilaufrufs:

|_+_|

Diese Klasse ist jetzt für jedes Element verfügbar, das sie benötigt. Jeder Teil Ihres HTML-Codes, der einen class-Attributwert von hat Alarm bekommt jetzt diesen Stil. Im folgenden HTML haben wir sowohl einen Absatz als auch eine Überschrift der zweiten Ebene, die das verwenden Alarm Klasse. Beide haben eine rote Hintergrundfarbe:

|_+_|

Dieser Absatz wird rot geschrieben.

Auf Websites werden heute häufig Klassenattribute für die meisten Elemente verwendet, da sie aus der Sicht der Spezifität einfacher zu handhaben sind als IDs. Sie werden feststellen, dass die meisten aktuellen HTML-Seiten mit Klassenattributen gefüllt sind, von denen einige häufig in einem Dokument wiederholt werden und andere möglicherweise nur einmal vorkommen.

ID-Selektoren

Die ID Wähler benennt einen bestimmten Stil, ohne ihn mit einem Tag oder anderem zu verknüpfen HTML-Element .

Nehmen Sie eine Unterteilung in Ihrem HTML-Markup an, die Informationen zu einem Ereignis enthält. Sie könnten dieser Division ein geben ID-Attribut von Veranstaltung , und skizzieren Sie diese Teilung dann mit einem 1 Pixel breiten schwarzen Rand:

|_+_|

Die Herausforderung mit ID-Selektoren ist, 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, aber nur einmal in jedem einzelnen HTML-Dokument). Für drei Ereignisse, die alle diesen Rahmen benötigen, müssen Sie ID-Attribute von identifizieren Veranstaltung 1 , Ereignis2 , und Ereignis3 und stylen Sie jeden von ihnen. Es wäre daher viel einfacher, das oben erwähnte Klassenattribut von zu verwenden Veranstaltung und style sie alle auf einmal.

Komplikationen von ID-Attributen

Eine weitere Herausforderung bei ID-Attributen besteht darin, dass sie eine höhere Spezifität als Klassenattribute haben. Das Überschreiben eines zuvor festgelegten Stils kann schwierig sein, wenn Sie sich zu stark auf IDs verlassen haben. Viele Webentwickler sind von der Verwendung von IDs in ihrem Markup abgerückt, auch wenn sie beabsichtigen, diesen Wert nur einmal zu verwenden, und haben sich stattdessen für fast alle Stile den weniger spezifischen Klassenattributen zugewandt.

Der einzige Bereich, in dem ID-Attribute ins Spiel kommen, ist, wenn Sie eine Seite mit In-Page-Anchor-Links erstellen möchten. Stellen Sie sich zum Beispiel eine Website im Parallax-Stil vor, die den gesamten Inhalt auf einer einzigen Seite mit Links enthält, die zu verschiedenen Teilen dieser Seite „springen“. ID-Attribute und Textlinks verwenden diese Ankerlinks. Fügen Sie den Wert dieses Attributs hinzu, dem das vorangestellt ist # Symbol, zum href Attribut des Links, etwa so:

|_+_|

Wenn er angeklickt oder berührt wird, springt dieser Link zu dem Teil der Seite, der dieses ID-Attribut hat. Wenn kein Element auf der Seite diesen ID-Wert verwendet, würde der Link nichts bewirken.

Um In-Page-Links auf einer Website zu erstellen, ist die Verwendung von ID-Attributen erforderlich, aber Sie können sich immer noch an Klassen für allgemeine CSS-Stilzwecke wenden. So zeichnen Designer heute Seiten aus – sie verwenden so oft wie möglich Klassenselektoren und wenden sich nur dann IDs zu, wenn sie das Attribut nicht nur als Aufhänger für CSS, sondern auch als In-Page-Link benötigen.