Hauptmenü

Untermenü

CSS - Grundlagen - Definition

1. Möglichkeiten

Für die Definition von Stylesheet-Anweisungen haben wir vier verschiedene Möglichkeiten. Dabei muss man auf ein paar Feinheiten achten, die mit der Kaskadierung zusammenhängen. Aber dazu komme ich gleich.

2. Über den Typ-Selektor

Dabei verknüpfen wir ein entsprechendes HTML-Element mit einer Anweisung. Der Selektor heißt dabei genau so wie das gewünschte Tag nur ohne die spitzen Klammern.


{ ... }

In diesem Beispiel bezieht sich dann die Zuweisung auf alle Absätze.

3. Über einen Klassen-Selektor

Anweisungen über einen Klassen-Selektor zeichnen sich durch einen Punkt vor dem Selektor aus. Also folgendermaßen:


.bla { ... }

Diese Klasse wird dann bei den entsprechenden HTML-Tags über das Attribut class zugewiesen.


<class="bla">Hier kommt der Text mit der Formatierung</p>

4. Über einen ID-Selektor

Eine ID-Anweisung beginnt mit dem so genannten "Lattenzaun", dem #:


#blubb { ... }

Die entsprechende Zuweisung erfolgt dann mit dem id-Atttribut:


<div id="blubb">Blubb blubber</div>

5. Über eine Style-Defintion

Hier schreiben wir die CSS-Anweisungen direkt in das style-Attribut des HTML-Tags. Dabei wird weder ein Selektor angegeben, noch muss man geschweifte Klammern setzen. Die Eigenschaften werden einfach hintereinander geschrieben, getrennt durch ein Semikolon.


<p style="eigenschaft1: wert1; eigenschaft2: wert2;">
  
Dieser Text wurde entsprechend formatiert.
</
p>

6. Benamung von Klassen- und ID-Selektoren

Bei der Benamung der Selektoren gelten dieselben Regeln wie die Vergabe von Variablennamen bei gängigen Programmiersprachen. Erlaubt sind alle Buchstaben von A-Z (groß- und kleingeschrieben), sowie alle Zahlen. Die Bezeichnung muss dabei mit einem Buchstaben beginnen. Der Unterstrich ist laut Spezifikation nicht gestattet, funktioniert aber trotzdem. Der Bindestrich dagegen wird erstaunlicherweise zugelassen. Sonderzeichen wie Umlaute sind verboten. Möglich sind also folgende Beispiele.


.blubb { ... }
.
blubber { ... }
.
anton-61 { ... }

/* verboten, funktioniert trotzdem */
.bla_schwall { ... }

Folgende Bezeichnungen dagegen sind verboten (und funktionieren auch nicht):


.grün { ... }
.61anton { ... }
.
_achwasweissich { ... }

Achtet auch bitte auf die Schreibweise, da CSS in diesem Fall je nach DTD teilweise case-sensitive ist. Mein Tipp: schreibt alles immer(!) klein, da vermeidet ihr böse Überraschungen.

Bezeichnung

Man gerät sehr leicht in Versuchung, Klassen oder IDs entsprechend ihres Aussehens zu benamen. Das sollte man tunlichst unterlassen. Stattdessen sollte man Namen wählen, die die Aufgaben der entsprechenden Definition beschreiben. Nehmen wir mal ein Beispiel mit einer Klasse fettrot, die auf etwas Besonderes aufmerksam machen möchte. Was passiert, wenn sich dort die Definition ändert also nicht mehr Fett und nicht mehr Rot? Dann haben Andere später das Problem, die entsprechende Zuweisung zuordnen zu können, da sich das Aussehen verändert hat. Lasst euch also Bezeichnungen einfallen, wie zum Beispiel hervorheb oder fehler anstelle von fettrot.

7. Wann setze ich was ein?

Auch hier existieren analog zur Einbindung kaum verbindliche Regeln. Eigentlich gibt es nur eine:

Pro Seite darf eine ID nur EINMAL für ein HTML-Tag vergeben werden.

Warum dem so ist, werdet ihr erfahren, wenn es zum Beispiel darum geht, CSS-Eigenschaften per JavaScript zu manipulieren. Ansonsten möchte ich hier erst mal nur ein paar Tipps geben, die Details erfahrt ihr bei den Tutorials:

Sehr oft findet man Beispiele, wo permanent mit ID-Selektoren gearbeitet wird. Warum das gemacht wird, kann ich persönlich nicht nachvollziehen. Zumal niemals darauf hingewiesen wird, dass man IDs nur einmal pro Seite verwenden darf. Das Ergebnis dieser sträflichen Unterlassung müssen dann die armen Moderatoren in den einschlägigen Foren ausbaden. Mein eindringlicher Rat lautet daher: setzt IDs nur dann ein, wenn ihr sie unbedingt benötigt. Ich habe dazu auch ein kleines Elaborat verfasst.

zurück zum vorherigen Abschnitt weiter zum nächsten Abschnitt