So verwenden Sie mehrere CSS-Klassen für ein einzelnes Element

click fraud protection

Cascading Style Sheets Definieren Sie das Aussehen eines Webseitenelements, indem Sie sich in die Attribute einklinken, die Sie auf dieses Element anwenden. Diese Attribute können entweder eine ID oder eine Klasse sein und wie alle Attribute fügen sie den Elementen, denen sie zugeordnet sind, hilfreiche Informationen hinzu.

CSS-Codierung.
E+ / Getty Images

Je nachdem, welches Attribut Sie einem Element hinzufügen, können Sie einen CSS-Selektor schreiben, um die notwendige visuelle Stile, die erforderlich sind, um das Erscheinungsbild für dieses Element und die Website zu erreichen als Ganzes.

Während entweder IDs oder Klassen dazu dienen, sich mit CSS-Regeln einzuklinken, ist modernes Webdesign Methoden bevorzugen Klassen gegenüber IDs, zum Teil, weil sie weniger spezifisch und insgesamt einfacher zu handhaben sind.

Eine oder mehrere Klassen in CSS?

In den meisten Fällen weisen Sie einem Element ein einzelnes Klassenattribut zu, aber Sie sind nicht wie bei IDs auf nur eine Klasse beschränkt. Während ein Element kann nur ein einziges ID-Attribut haben, Sie können einem Element mehrere Klassen zuweisen und in einigen Fällen wird Ihre Seite dadurch einfacher zu gestalten und vieles mehr flexibel.

instagram viewer

Wenn Sie einem Element mehrere Klassen zuordnen müssen, fügen Sie die zusätzlichen Klassen hinzu und trennen Sie diese einfach durch ein Leerzeichen in Ihrem Attribut.

Dieser Absatz hat beispielsweise drei Klassen:

Dies wäre der Text des Absatzes

Dadurch werden die folgenden drei Klassen für das Absatz-Tag festgelegt:

  • Pullquote
  • Empfohlen
  • Links

Beachten Sie die Leerzeichen zwischen jedem dieser Klassenwerte. Diese Räume machen sie zu unterschiedlichen, individuellen Klassen. Aus diesem Grund dürfen Klassennamen auch keine Leerzeichen enthalten, da sie dadurch als separate Klassen festgelegt würden.

Sobald Sie Ihre Klassenwerte in HTML, können Sie diese dann als Klassen in Ihrem CSS zuweisen und die Stile anwenden, die Sie hinzufügen möchten. Beispielsweise.

.Pullquote {... }
.vorgestellt {... }
p.links {... }

In diesen Beispielen erscheinen die CSS-Deklarationen und die Wertepaare innerhalb der geschweiften Klammern, so dass diese Stile auf den entsprechenden Selektor angewendet werden.

Wenn du eine Klasse auf ein bestimmtes Element setzen (beispielsweise, p.links), können Sie es weiterhin als Teil einer Liste von Klassen verwenden; Beachten Sie jedoch, dass dies nur die Elemente betrifft, die im CSS angegeben sind. Mit anderen Worten, die p.links Der Stil wird nur auf Absätze mit dieser Klasse angewendet, da Ihr Selektor tatsächlich sagt, dass er auf "Absätze mit einem Klassenwert von. angewendet werden soll links," Im Gegensatz dazu geben die anderen beiden Selektoren im Beispiel kein bestimmtes Element an, sodass sie auf jedes Element angewendet werden, das diese Klassenwerte verwendet.

Mehrere Klassen, Semantik und JavaScript

Ein weiterer Vorteil der Verwendung mehrerer Klassen besteht darin, dass die Interaktivitätsmöglichkeiten erhöht werden.

Wenden Sie mithilfe von JavaScript neue Klassen auf vorhandene Elemente an, ohne die ursprünglichen Klassen zu entfernen. Sie können auch Klassen verwenden, um die Semantik eines Elements — Fügen Sie zusätzliche Klassen hinzu, um zu definieren, was dieses Element semantisch bedeutet. Dieser Ansatz ist wie Mikroformate funktioniert.

Vorteile mehrerer Klassen

Das Übereinanderlegen mehrerer Klassen kann es einfacher machen, Elementen Spezialeffekte hinzuzufügen, ohne einen ganz neuen Stil für dieses Element erstellen zu müssen.

Um beispielsweise Elemente nach links oder rechts zu verschieben, können Sie zwei Klassen schreiben:

links. 

und.

Recht. 

nur mit.

Schwimmer: links; 

und.

schweben rechts; 

in ihnen. Dann, wann immer Sie ein Element hatten, das Sie nach links schweben lassen müssen, fügen Sie einfach die Klasse "links" zu seiner Klassenliste hinzu.

Es ist jedoch ein schmaler Grat, hier zu gehen. Denken Sie daran, dass Webstandards die Trennung von Stil und Struktur vorschreiben. Die Struktur wird mit HTML behandelt, während der Stil in CSS ist. Wenn Ihr HTML-Dokument mit Elementen gefüllt ist, die alle Klassennamen wie "rot" oder "links" haben, die Namen sind, die diktieren, wie Elemente aussehen sollen und nicht, was sie sind, überschreiten Sie die Grenze zwischen Struktur und Stil.

Nachteile mehrerer Klassen

Der größte Nachteil bei der Verwendung mehrerer gleichzeitiger Klassen für Ihre Elemente besteht darin, dass sie im Laufe der Zeit etwas unhandlich werden und verwalten können. Es kann schwierig werden zu bestimmen, welche Stile sich auf ein Element auswirken und ob Skripte es beeinflussen. Viele der heute verfügbaren Frameworks, wie beispielsweise Bootstrap, verwenden stark Elemente mit mehreren Klassen. Dieser Code kann sehr schnell außer Kontrolle geraten und schwer zu bearbeiten sein, wenn Sie nicht aufpassen.

Wenn Sie mehrere Klassen verwenden, laufen Sie auch Gefahr, dass der Stil einer Klasse den Stil einer anderen überschreibt. Diese Kollision kann es dann schwierig machen, herauszufinden, warum Ihre Stile nicht angewendet werden, selbst wenn es so aussieht, als ob sie es sollten. Bleiben Sie sich der Spezifität bewusst, selbst wenn die Attribute auf dieses eine Element angewendet werden.

Wenn Sie ein Tool wie die Webmaster-Tools in Google Chrome verwenden, können Sie leichter erkennen, wie sich Ihre Kurse auf Ihre Stile auswirken, und dieses Problem mit widersprüchlichen Stilen und Attributen vermeiden.

instagram story viewer