Ein weiteres grundlegendes Konzept, bevor wir uns den Details der Definition von Styles widmen. Wie wir auf den folgenden Seiten sehen werden, kann man Style-Angaben sowohl für linked style sheets als auch embedded style tags für verschiedene HTML-Elemente wie <p>, <h1>, <li>, <table> usw. machen. Einiges an zusätzlicher Flexibilität bei Styles kann durch Style-Vererbung (inheritance) erreicht werden. Vererbung bedeutet, daß Sie zusätzliche Klassen (classes) jedes Elements angeben können, und jede Klasse wird einige der Style-Angaben des Grundelements erben, solange nicht explizit neue Werte eingetragen werden oder die jeweilige Funktion nicht vererbt wird. (Die Tabelle der Eigenschaften (properties) zeigt, welche vererbt werden und welche nicht.)

Beispiel

P
{
font-family: 'Trebuchet MS', 'Comic Sans MS', 'Arial', 'Sans-Serif', 'Helvetica';
font-weight: bold;
font-size: 11pt;
color: #000066;
position: relative;
margin-left: 1cm;
}

erstellt einen Absatz, der so aussieht wie dieser... während

P.small
{
font-family: 'Arial', 'Sans-Serif';
font-weight: normal;
font-size: 8pt;
text-align: center;
}

einen Absatz mit diesem Aussehen produziert.

Um den Basisabsatz zu erstellen, würden Sie einfach ein <p>-Tag benutzen, und zum Darstellen des kleinen, zentrierten Absatzes würden Sie das Attribut class=small hinzufügen (<p class=small>). Beachten Sie, daß auch generelle Klassen definiert werden können, die dann mit beliebigen HTML-Elementen Verwendung finden:

Beispiel

.note
{
font-size: 10pt;
color: #006600;
background: #FFFFFF;
position: relative;
padding: 2pt;
border-width: thin;
border-style: ridge;
}

Ist diese Klasse definiert, dann wird ein von <blockquote class=note> umgebener Absatz so wie dieser aussehen. (Die Umrandung ist nicht sichtbar, wenn Sie IE 3.x einsetzen)

Achten Sie darauf, daß nur eine Ebene von Klassen erlaubt ist: eine Klasse P.note.red wird nicht funktionieren.

Spezielle Klassen für Links

Sie sollten sich auch der vordefinierten Klassen für das <a>-Tag bewusst sein:

A.link { color: #FFFF00 }
A.visited { color: #990099 }
A.active { color: #FF0000 }

Wenn Sie wollen, daß Links und bereits besuchte Links sich durch unterschiedliche Farben hervorheben, wie wir es von den meisten Webseiten gewohnt sind, dann müssen diese Klassen in Ihren Style Sheets definiert sein. Und es gibt noch eine Einschränkung: die Klasse A.active wird von Internet Explorer noch nicht unterstützt. Das ist schade, da der aktive Link bei Seiten in Frames nützlich sein kann, bei denen ein Frame den Inhalt eines Abschnitts darstellt (d.h. die Farbänderung des aktiven Links würde automatisch den derzeitigen Standort des Benutzers in der Inhaltsliste kennzeichnen, ein Effekt, den Webdesigner normalerweise durch komplizierte und ineffiziente Mittel erreichen). Da die Klasse A.active aber möglicherweise nützlich werden kann, empfehle ich trotzdem, sie jetzt schon in Ihren Style Sheets einzubauen, damit sie schon da ist, wenn die Unterstützung dafür eintrifft -- bis dahin wird sie bestimmt nicht schaden.

Es gibt einige andere vordefinierte "pseudo-classes" für die erste Zeile und den ersten Buchstaben von Textblocks, aber diese werden noch nicht von Internet Explorer unterstützt.

Allgemein gesprochen ist Vererbung eine machtvolle Abkürzung zum Erstellen von Variationen eines Styles, in der gleichen Art, in der Vererbung es objekt-orientierten Programmierern erlaubt, effizient Variationen von Objekten zu erstellen (Style Sheets zu erstellen ist eigentlich eine sehr einfache Form des objekt-orientierten Programmierens). Gelegentlich kann aber die Vererbung zu einem Ärgernis werden, da bestimmte Eigenschaften vererbt werden, die Sie eigentlich nicht haben wollten (wir werden später ein Beispiel sehen).

Bernhard Friedrich

doozer@hsguide.com