Class und ID

Erklärung von Class und ID

Mit Class können verschiedene Elemente einer Gruppe/Klasse zugeordnet werden, für die dann bestimmte Formatierungen gelten.

Du kannst z.B. ein Mal in der CSS-Datei festgelegen, wie hervorgehobener Text dargestellt werden soll, damit sich dieser vom Rest abhebt, z.B. durch einen gelben Hintergrund, wie ein Textmarker. 

.textmarkergelb{ 
	background-color: yellow;
}

Vor dem Namen der Klasse steht ein Punkt, um anzuzeigen, dass es sich um eine Klasse handelt. Das bedeutet, dass es auf einer Seite mehrere Dinge geben kann, die zu .textmarkergelb gehören.

Will ich nun in meiner HTML-Datei hervorgehobenen Text darstellen, schreibe ich z.B.

<span class="textmarkergelb">Hier kommt mein Text hinein. </span>

Klassen-Definitionen beginnen immer mit einem Punkt, IDs mit Raute #. IDs sind das Gleiche wie Klassen mit dem einzigen Unterschied, dass es von einer ID auf einer Seite nur ein Element geben darf.

Übung

Lass dir den Quelltext dieser Seite anzeigen und schau, ob hier eine weitere Klasse definiert ist. Was ist die Funktion dieser Klasse?

Noch eine Übung

Definiere eine Klasse .textmarkerrot. Wenn du im HTML-Code <span class="textmarkerrot"> schreibst, soll das bewirken, dass der Hintergrund des Geschriebenen rot ist, also wie von einem Textmarker hervorgehoben wirkt.

Weitere mögliche Anwendungen in einem Dokument könnten sein, dass du z.B. einmalig festlegst, wie Zitate innerhalb der Seite dargestellt werden, oder Definitionen, Hinweise, die besonders hervorgehoben werden sollen

In der CSS-Datei würde dann z.B. stehen:

.hinweis {
	font-weight: bold;
	font-style: italic;
	font-variant: small-caps;
	background-color: red;
}

In der HTML-Datei steht dann nur <span class="hinweis">Hier steht der Hinweis ...</span>

Anwendung für die Aufteilung einer Seite in Menü und Inhalt

Dafür solltest du unbedingt die Idee eines <div> verstanden haben.

Dann können wir die Seite in verschiedene Bereiche aufteilen, wie dies z.B. beim sogenannten Portallayout üblich ist.