CSS (Cascading Stylesheets) ist/sind ein mächtiges Mittel, um dem Inhalt eines (X)HTML-Dokumentes zu formatieren. Idealer Weise enthält ein solches (X)HTML-Dokument lediglich Auszeichnungen, die frei von jeglicher Form der Layoutinformation sind. Mehr noch, ein wirklich gutes Dokument enthält keinerlei Kopplung an Informationen, die das Layout betreffen. Die strikte Trennung von Inhalt und Layout ist der heilige Gral der Webentwicklung.
Dieser Artikel beschäftigt sich mit den Grundlagen von CSS und soll einen Weg aufzeigen, wie man es erreichen kann, der perfekten Webseite ein Stück näher zu kommen. Im Gegensatz zu CSS2 ist das künftige CSS3 deutlich leistungsfähiger. Leider ist die Spezifikation zu CSS3 nocht nicht vom W3C freigegeben, und die Unterstützung durch die verschiedenen Browser noch nicht vollständig gegeben. Aus diesem Grund befasst sich dieser Artikel zunächst mit den Konzepten von CSS2.
Einfache Selektoren
Eines vorweg! Es gibt in CSS keine Befehle. Dies mag als Wortklauberei erscheinen, trifft den Kern der Sache aber sehr genau. Befehle, zumindest die, die man aus echten Programmiersprachen kennt, sind immer atomar und nicht mehrdeutig. Ferner sind Befehle Elemente im Ablauf einer Reihe von Anweisungen, die nacheinander ausgeführt werden. CSS-Regeln funktionieren völlig anders. Es gibt keinen vorgegebenen Ablauf. Die Art und Weise oder gar die Reihenfolge der Abarbeitung durch den Browser kann in keinster Weise beeinflusst oder eingesehen werden. Zwar sind die einzelnen Regeln hintereinander in einer oder mehreren Dateien notiert, eine Abarbeitungsreihenfolge lässt sich daraus aber nicht ableiten. Wie auch? Über Regeln werden Informationen von Außen an Elemente des Elementbaumes, dem DOM (Document Object Model), gebunden. Nicht mehr und nicht weniger.
Um nun die Elemente des DOM mit Style-Informationen zu versehen, müssen einzelne Elemente des DOM ausgewählt werden. Dafür gibt es die Selektoren. Mittels dieser Selektoren ist es möglich, jedes Element im Elementbaum zu selektieren, und ein Layout an dieses zu binden.
Ein einfacher Selektor besteht aus einem Typselektor oder dem Universalselektor unmittelbar (d.h. ohne Leerzeichen) gefolgt von keinem, einem oder mehreren ID-Selektoren, Klassenselektoren, Attributselektoren oder Pseudoklassen in beliebiger Reihenfolge. Eine Übereinstimmung (Match) wird dann erzielt, wenn alle Komponenten des einfachen Selektors auf ein Element zutreffen.
Nehmen wir die Komponenten, aus denen einfache Selektoren aufgebaut sein können einmal genauer unter die Lupe.
Aus folgenden Komponenten kann ein einfacher Selektor bestehen:
- Universalselektor
- Typselektor (Element-Selektor)
- Pseudo-Element
- ID-Selektor
- Klassenselektor
- Pseudo-Klasse
- Attribut-Selektor
Universalselektor
Durch den Universalselektor * wird jedes Element im DOM angesprochen. Er stimmt also mit jedem Namen eines Elementes des DOM überein und selektiert somit jedes Element.
* {color: #000000;}
Diese Beispiel setzt die Vordergrundfarbe jedes Elementes im Dokumentbaum auf schwarz.
Mittels des Universalselektors ist es auf einfache Weise möglich, allen Elemente eine Formatierung zuzuweisen. Darüber hinaus dient er, genauer das Asterisk (*), als Platzhalter in verketteten Selektoren.
Typselektor
Mittels des Typselektors lassen sich Elemente über ihren Namen ansprechen. Alle Elemente des aktuellen Dokumentes, deren Name dem angegebenen entspricht, erhalten somit eine bestimmte Formatierung. Das folgende Beispiel setzt den Einzug des Elementes mit dem Namen body auf »0«.
body { margin: 0 }
Pseudoelement
Pseude-Elemente (aber auch Pseudo-Klassen) werden verwendet, um Formatierungen auf Basis von Informationen zu ermöglichen, die nicht im Dokumentbaum enthalten sind. Zum Bespiel existiert in (X)HTML keine Möglichkeit die erste Zeile oder den ersten Buchstaben (z.B. innerhalb eines Absatzes <p>) auszuzeichnen und somit ansprechbar zu machen. Wir haben also keine Möglichkeit, diese »Pseudo-Elemente« auf herkömmliche Art und Weise mit Formatierungen zu versehen, außer über den Umweg von <span> oder <div>. Diese Auszeichnungen haben aber eine andere Semantik, so dass deren Verwendung zu einer schlechten wenn nicht gar falschen Auszeichnung führen würde. Aus diesem Grund bietet CSS den Pseudo-Element Selektor.
Folgende Pseudo-Elemente existieren:
:first-line:first-letter:before:after
ID-Selektor
Da keine zwei Elemente im Dokumentbaum denselben Wert innherhalb eines id-Attributs haben dürfen, ist ein Element, dass über dieses Attribut verfügt, eindeutig ansprechbar. Diesen Umstand macht sich CSS zu Nutze, Mittels des ID-Selektors kann nun ein einzelnes, eindeutiges Element mit Formatierungen versehen werden.
Dies geschieht wie folgt.
Notation in der (X)HTML-Datei:
<div id="eineID">...</div>
Notation im Stylesheet:
#eineID{ background-color: #FF0000; }
Klassenselektor
Um eine Gruppe oder besser eine Klasse von Elementen zu selektieren, kann der Klassenselektor verwendet werden. Im Dokument wird ein Element einer Klasse zugehörig, indem für dieses Element das class-Attribut notiert wird. Einschränkungen auf die Art der Elemente, auf die eine spezielle Klasse angewendet werden kann, existieren nicht.
Auf diese Weise ist es möglich den verschiedensten Elementen eine bestimmte Formatierung zuzuweisen. Es ist zulässig, mehrere Klassen über ein einziges Attribut an ein Element zu binden. Für die Definition einer Klasse wird in CSS die Punktnotation verwendet. Es soll aber nicht verschwiegen werden, dass in diesem Fall natürlich auch der Attribut-Selektor verwendet werden kann.
Hier ein paar Beispiele.
/* alle Elemente der Klasse myclass */
.myclass {font-family: Verdana;}
/* alle Übersschriften der Kategorie H1 UND der Klasse small */
h1.small { font-size: 50%; }
/* equivalente Darstellung der obigen Formatierung*/
h1[class~=small] { font-size: 50%; }
Noch eine Anmerkung:
CSS ist sehr mächtig. Die Leistungsfähigkeit des class-Attributs ist ebenfalls beachtlich. Man kann nun auf die Idee kommen, Dokumente zu entwickeln, die gänzlich auf Elemente wie <div> zurückgreifen, um eine bestimmte Darstellung zu erreichen. Jedoch ist die Semantik dieses Elementes in Bezug auf die Strukturierung von Informationen höchst fragwürdig. Strukturelle Informationen, die einem Dokument durch Auszeichnung mit geeigneten Elementen gegeben werden, sind jedoch überaus bedeutsam. Daher sollte DIVitis unbedingt vermieden werden!
Pseudoklasse
Wie schon bei Pseudo-Elementen haben Pseudoklassen die Eigenschaft, dass die referenzierten Elemente keine Entsprechungen im Dokumentbaum besitzen. Ansonsten sind sie den Klassenselektoren sehr ähnlich.
Das bekannteste Beispiel für die Verwendung von Pseudoklassen sind die Link-Definitionen. :link, :visited, :hover, :active und :focus. Es existieren darüber hinaus aber noch :first-child für das erste Kind des aktuellen Elements und :lang, das die Auswahl der Elemente entsprechend ihrer Sprache erlaubt.
a:link{ color: #FF0000; }
a:visited{ color: #FFFF00; }
a:hover{ color: #00FF00; }
a:active{ color: #0000FF; }
a:focus{ color: #FF00FF; }
Attribut-Selektor
Elemente des Dokumentbaumes zu selektieren ist die Aufgabe der Selektoren. Der Attribut-Selektor ermöglicht es, Elemente anhand von vorhandenen Attributen zu selektieren. Es ist hierbei nicht nötig, den Namen des Elementes zu verwenden. Es werden immer alle Elemente selektiert, die über ein Attribut verfügen, dass die definierten Eigenschaften aufweist.
/* Jede Überschrift h1 mit dem Attribut 'title'*/
h1[title] { ... }
/* Jede Überschrift h1 mit dem Attribut 'title' */
/* und dem Wert 'wichtig' */
h1[title=wichtig] { ... }
/* Jedes Element mit dem Attribut 'class'. */
/* Einer der durch Leerzeichen getrennten Werte */
/* muss 'simple' lauten */
h1[class~=simple] { ... }
/* Jedes Element mit dem Attribut 'class'. */
/* Der erste durch »:-« getrennten Wert */
/* muss 'simple' lauten */
h1[class|=simple] { ... }
Selektor
Ein Selektor ist eine Verkettung aus einem oder mehreren einfachen Selektoren, durch Kombinatorzeichen voneinander getrennt. Kombinatorzeichen sind: Leerraum (» «), »>« und »+«. Leerraum kann zwischen einem Kombinatorzeichen und den umgebenden einfachen Selektoren stehen.
Im Folgenden werden die Selektoren und die verwendeten Kombinatorzeichen anhand von Platzhaltern (E und F) erläutert.
Nachfahre
Ein Nachfahre ist ein Kind, ein Enkel, ein Urenkel, … eines bestimmten Elementes.
Um einen Nachfahren zu selektieren wird folgende Notation verwendet.
E F
Es werden somit alle Elemente ausgewählt, die Nachfahre von E sind, und auf die Regel F zustrifft.
Kind
Der Kindselektor ist eine Spezialisierung des Nachfahrenselektors. Das bedeutet, dass durch die Verwendung dieses Selektors nicht mehr alle Nachfahren sondern nur noch Nachfahren ersten Grades, das Kind, selektiert werden. Für die Auswahl von Kindern eines bestimmten Elementes wird die Kindselektor-Notation verwendet.
E > F
Es werden alle Elemente ausgewählt, auf die die Regel F zutrifft, und die Kind von E sind.
Geschwister
Zur Selektion von im Dokumentbaum nebeneinander stehenden Elementen, wird der Selektor zur Selektion von Geschwistern verwendet.
E + F
Hierbei werden alle Elemente selektiert, die auf F passen. Zusätzlich müssen die direkten Vorgänger von F auf E passen. Es werden nur Elemente selektiert, die in der angegebenen Reihenfolge im Dokumentbaum direkt nebeneinander stehen.
Gruppierung
Um die verschiedenen Elemente auf einfache Weise ein und dieselbe Formatierung zuzuweisen, können Selektoren zu Gruppen zusammengefasst werden. Hierbei werden die einzelnen Selektoren durch Komma getrennt hintereinander notiert.
Ist ein Bestandteil einer Regel ungültig, wird die gesamt Regel ignoriert. Das heißt keine Regel der Gruppe wird verwendet. Dies kann vorkommen, wenn ein bestimmter Browser eine bestimmte Regel nicht kennt.
h1, h2, h3 { color: FF0000; }
/* entspricht dem vorherigen Beispiel */
h1 { color: FF0000; }
h2 { color: FF0000; }
h3 { color: FF0000; }
Soviel zum Einstieg in die Verwendung von CSS-Selektoren.
Links zum Thema
- Übersicht über aktuelle Spezifikation des W3C – Liste mit den W3C-Spezifiaktionen auch in der deutschen Übersetzung
- i:Motion – 10 Tipps für eine perfekte Website – Artikelreihe mit interessanten Anregungen und Denkanstößen rund um das Thema Webdesign
- Wikipedia: Cascading Stylesheets