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.
p { ... }
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.
<p 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:
- Allgemeine Definitionen werden über ein HTML-Tag definiert.
- Weiterführende Anweisungen werden mit einer Klasse zugewiesen.
- Für einmalig(!) vorkommende Elemente kann man eine ID-Definition nehmen.
- Ganz spezielle und einzigartige Anweisungen setzen wir in das style-Attribut.
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