[Formate für HTML- Elemente definieren]

In einem style-Bereich oder in einer externen CSS-Datei können Sie für HTML-Elementtypen CSS-Formate definieren. Wenn Sie entsprechende HTML-Elemente dann in der HTML-Datei verwenden, werden alle Formate angewendet, die Sie für den Elementtyp definiert haben.

<style type="text/css"> <!-- body { background-color:#FFFFCC;         margin-left:100px; } h1 { font-size:48pt;         color:#FF0000;         font-style:italic;         border-bottom:solid thin black; } p,li { font-size:12pt;         line-height:14pt;         font-family:Helvetica,Arial,sans-serif;         letter-spacing:0.2mm;         word-spacing:0.8mm;         color:blue; } --> </style>

Um ein zentrales Format für alle HTML-Elemente eines bestimmten Typs zu definieren, notieren Sie als Selektor den Namen des HTML-Elementtyps. Im obigen Beispiel werden body (Dokument), h1 (Überschriften 1. Ordnung), p (Textabsätze) und li (Listeneinträge) auf diese Weise notiert.
Wenn Sie ein Format für mehrere HTML-Elementtypen definieren wollen, geben Sie alle gewünschten Elementtypen an und trennen Sie diese durch Kommata, so wie im obigen Beispiel p,li.
Dahinter folgen die gewünschten Definitionen, Details hierzu entnehmen Sie der Referenz.

Formate für verschachtelte HTML-Elemente definieren

Wenn Sie nichts anderes definieren, übernimmt ein HTML-Element, das innerhalb eines anderen HTML-Elements vorkommt, dessen Eigenschaften und fügt seine eigenen Eigenschaften nur hinzu.

Beispiel:<h3>Hallo <i>Welt</i></h3> würde so dargestellt:

Hallo Welt

Sie können mit Hilfe von Style-Sheets jedoch bestimmen, dass ein HTML-Element bestimmte Eigenschaften nur dann hat, wenn es innerhalb eines bestimmten anderen HTML-Elements vorkommt. So können Sie etwa bestimmen, dass <i>...</i> innerhalb von Überschriften nicht kursiv, stattdessen aber in blauer Farbe dargestellt wird, während das gleiche Element innerhalb anderer HTML-Tags nach wie vor nichts anderes als eine kursive Darstellung bewirkt.

Beispiel:<h3>Hallo<i> Welt</i></h3> würde demzufolge so dargestellt:

Hallo Welt

Die Notierung erfolgt hierzu auf folgende Weise:

<style type="text/css"> <!-- h3 { color:red; } h3 i { color:blue; font-style:normal; } --> </style>

Im Gegensatz zur Auflistung gleicher Formate (siehe weiter oben) wird hier zwischen den Elementen anstelle des Kommas lediglich ein Leerzeichen gesetzt.

Ab CSS 2.0 gibt es weitere Möglichkeiten für Angaben zu verschachtelten Elementen. Im eben besprochenen Verfahren der Verschachtelung wird ein Element immer im definierten Format dargestellt, egal, wie tief die Verschachtelung ist, also sowohl bei <h3><i>.....</i><</h3> als auch bei <h3><b><i>.....</i></b></h3>

CSS 2.0 bietet die Möglichkeit, den Grad der Verschachtelung etwas genauer zu definieren:

<style type="text/css"> <!-- h3 { color:red; } h3 > i { color:blue; font-style:normal; } --> </style>

Mit dem Zeichen > wird in diesem Selektor festgelegt, dass i-Elemente, sofern sie eine Ebene innerhalb eines h3-Bereichs vorkommen, in blauer Textfarbe und nicht kursiv dargestellt werden. Eine Ebene innerhalb bedeutet, das i-Element kommt direkt nach dem h3-Element.(<h3><i>.....</i></h3>)

<style type="text/css"> <!-- h3 { color:red; } h3 * i { color:blue; font-style:normal; } --> </style>

Mit dem Zeichen * wird in diesem Selektor festgelegt, dass i-Elemente, sofern sie mindestens zwei Ebenen innerhalb eines h3-Bereichs vorkommen, in blauer Textfarbe und nicht kursiv dargestellt werden. (<h3><p><b><i>.....</i></b></p></h3>).

Mit Hilfe attribut-bedingter Formate können Sie in Selektoren angeben, dass Formatdefinitionen nur für Elemente mit bestimmten Attributen oder sogar nur für Elemente mit bestimmten Wertzuweisungen an Attribute gelten sollen.

<style type="text/css"> <!-- p { color:red; } p[align] { color:blue } p[align=center] { color:green; text-align: left } *[lang|=en] { background-color:#FF0000; color:#FFFFFF; } --> </style>

Im obigen Beispiel wird definiert, dass p-Elemente ohne weitere Attribute rot dargetsellt werden. Enthält der Tag jedoch das Attribut align, dann wird es in blauer Farbe dargestellt. Wenn der Tag das Attribut align=center (zentriert ausrichten) enthält, dann wird es in grüner Farbe dargestellt und links ausgerichtet (!!).
Mit *[lang|=en] schließlich werden alle Elemente (der Stern ist das Platzhalterzeichen für "alle Elemente") erfasst, die ein Universalattribut lang= mit einem Wert wie en oder auch en-US haben.

HINWEIS:CSS 2.0 Definitionen sollten mit Vorsicht eingesetzt werden, das sie von den Browsern in unter- schiedlichem Umfang implementiert sind.