CSS Hilfe

CSS Kurs Teil 2

Allgemeine Syntax

CSS-Eigenschaften folgen folgender genereller Syntax:

HTML-Element (auf welches die Eigenschaft angewendet werden soll) { Eigenschaft1:Wert; Eigenschaft2:Wert; }

Alle Eigenschaften eines Elementes stehen also in einer geschweiften Klammer ({}) und werden jeweils durch einen Strichpunkt (;) voneinander getrennt. Für jede Eigenschaft steht jeweils Eigenschaft dann ein Doppelpunkt (:) und dann der Wert der Eigenschaft. Ein Beispiel:

p { font-family:Arial; }

Die Eigenschaft gilt also für das p-Tag in HTML die Eigenschaft ist font-family und hat den Wert Arial. Es werden also alle p-Tags mit der Schriftart Arial geschrieben.
Selektoren

Selektoren nennt man in CSS die Angabe des Elementes für die die betreffende CSS-Angabe gilt. Ein Selektor ist also das was in einer CSS-Angabe vor der geschweiften Klammer steht. Die einfache Angabe eines HTML-Elemetes haben wir schon kennengelernt. Was aber wenn man gleich mehrere HTML-Elemente mit einer Eigenschaft versehen will? In diesem Fall kann man die betreffenden HTML Elemente einfach durch Kommas getrennt hintereinander setzen. Ein Beispiel:

p,div,ol,ul { color:#000000; }

In diesem Beispiel gilt die schwarze Schriftfarbe, für alle p-, div-, ol- und ul-Elemente.

Häufig möchte man aber genau das umgekehrte Erreichen: Eine Eigenschaft soll nur für die Teilmenge eines HTML Elementes gelten. Z. B. nur ein Teil aller p-Absätze soll eine blaue Schriftfarbe haben. In diesem Fall gibt es 2 Möglichkeiten: Man kann Klassen oder ID’s bilden. Selbstverständlich kann man das Element auch direkt mit einem style-Attribut versehen. Aber sobald man diese Formatierung häufiger braucht, wird es sinnvoll sie nicht jedes mal neu Angeben zu müssen. Was sind Klassen und was sind ID’s? Klassen sind Unterguppen von HTML Elementen. Dabei wird einer Klasse ein Name zugeteilt und alle darauf zugeteilten CSS-Eigenschaften werden dann mit dem Attribut class und dem zugehörigen Namen versehen. Die CSS Formatierungen werden dann nur auf die HTML-Elemente angewandt die der jeweiligen Klasse zugeordnet sind. Das klingt kompliziert ist aber eigentlich ganz einfach, daher ein Beispiel:

p.blau { color:#0000FF; }

In diesem Beispiel wird allen p-Absätzen die der Klasse “blau” angehören eine blaue Schriftfarbe zugeteilt. Der Name der Klasse wird also getrennt durch einen Punkt hinter das Tag gestellt. Wie sieht das dann in HTML aus?

Man kann Klassen als Layoutvorlage verstehen. Immer wenn man mit dem Attribut class einem Tag eine bestimmte Klasse zuweißt, werden alle Formate dieser Klasse auf dieses Tag angewandt.
ID’s

ID’s sind in HTML sogenannte Universalattribute die unterschiedlichen Zwecken dienen. In jedem Fall weißt eine ID einem HTML Tag eine einmalige eindeutige Identität zu. Ein entsprechender HTML-Tag kann z. B. so aussehen:

In diesem Fall wird dem Tag die eindeutige Identität mit dem Namen “abschnitt3” gegeben. Verwenden Sie in Namen von Klassen und ID’s keine Sonderzeichen, wie etwa deutsche Umlaute. Der Name einer ID darf nur einmal innerhalb einer HTML-Datei vorkommen, da es sich um eine dateiweit einmalige Identität handelt. ID’s dienen auch dafür, Verweise innerhalb der gleichen Seite zu realisieren. Außerdem können Sie auch in CSS verwendet werden um diesem Tag spezielle Formatierungen zu geben. Wie sieht die Syntax dafür aus:

#abschnitt3 { color:#FF0000; }

Hier wird dem HTML-Element das die ID “abschnitt3” hat eine rote Schriftfarbe zugeordnet. Das “#”-Zeichen verweißt immer auf eine ID. ID’s werden also immer dann verwendet, wenn in einem style-Bereich oder in einer externen CSS-Datei einem einzelnen HTML-Element eine spezielle Formatierung zugewiesen werden soll und kein style-Attribut direkt im Tag verwendet werden soll (was in diesem Fall natürlich auch möglich ist). Wenn die Formatierung mehr als einmal pro Datei vorkommt, sollten Klassen verwendet werden.
weitere Selektoren

Ein weiterer Selektor ist der Selektor für verschachtelte Tags. Möchte man beispielsweise das alle p-Tags die innerhalb eines blockquote-Tags stehen eine andere Formatierung erhalten, als andere p-Tags, läßt sich dieser Selektor einsetzen. Die Syntax dafür:

blockquote p { font-style:italic; }

Die Syntax für den Selektor beginnt also mit dem Elternelement und danach erfolgt durch einen Leerschritt getrennt das Kindelement auf welches die Formatierung angewandt werden soll. Dabei lassen sich auch größere Verschachtelungstiefen benutzen und ebenso auch Kombinationen mit Klassen. Z. B.:

blockquote p.sonder span { font-style:italic; }

In diesem Beispiel gilt die Formatierung nur für alle span-Tags die innerhalb eines p-Tags der Klasse sonder, die wiederrum innerhalb eines blockquote-Tags stehen.

Darüberhinaus gibt es noch weitere Selektoren, die aber leider noch nicht von allen Browsern unterstützt werden. Dazu zählen die Attributselektoren. Attributselektoren gelten nur für solche Tags, die zusätzlich ein bestimmtes Attribut enthalten. Die Syntax dafür:

p[align] { color:#FF0000; }

In diesem Beispiel gilt die Formatangabe nur für p-Elemente die das Attribut align enthalten. Ein Attributselektor kann auch so definiert werden, daß er nur für Elemente gilt bei denen das Attribut einen bestimmten Wert hat, beispielsweise:

p[align=center] { color:#FF0000; }

In diesem Fall gilt die Angabe nur für p-Elemente die das Attribut align haben, welchem außerdem der Wert “center” zugeordnet sein muß.
Pseudoformate

Pseudoformate sind eine Sondergruppe der Selektoren. Bei den Pseudoformaten wird eine Formatierung nur dann auf ein Element angewandt, wenn dieses einen bestimmten “Zustand” hat. Dies wird vor allem bei den verschiedenen Linkzuständen verwendet. Ein Link kann eine andere Formatierung haben, wenn er jeweils den Zustand neu (link), besucht (visited) mit der Maus überfahren (hover) oder soeben geklickt hat (active). Pseudoformate werden durch einen Doppelpunkt vom Element getrennt. Ein Beispiel:

a:link { color:#0000FF; }
a:visited { color:#660066; }
a:hover { color:#FFCC00; }
a:active { color:#CC0000; }

In diesem Beispiel werden den 4 unterschiedlichen Linkzuständen jeweils 4 unterschiedliche Farben zugeteilt. Außer für Linkzustände gibt es Pseudoformate auch noch z. B. für den ersten Buchstaben eines Elementes (:first-letter) oder auch die erste Zeile eines Absatzes (:first-line).
div und span

Eine gewisse Besonderheit stellen noch die div- und span-Tags in HTML dar. Beide Tags sind gewißermaßen Tags ohne besondere Bedeutung. Keines dieser Tags bewirkt für sich alleine genommen irgend eine Formatierung. Daher kann man mit CSS auf diese Tags beliebig aufsetzen. Der Unterschied zwischen beiden Tags ist nur, daß das div-Tag ein blockbildendes Element ist, während span ein Inline-Element ist. Diese beiden Tags können immer dann verwendet werden, wenn einem Bereich keine bestimmte Markierung (im Sinne von: “dies ist ein Zitat”, “dies ist eine Überschrift” etc.) gegeben werden soll, wenn er aber dennoch eine bestimmte Formatierung erhalten soll.