SELFHTML: Stylesheets / CSS-Eigenschaften / Listenformatierung
Author: Redaktion SELFHTML, selfhtml81@selfhtml.org
Description: Welche CSS-Eigenschaften es gibt, um Aufzählungslisten oder nummerierte Listen in HTML zu gestalten und zu kontrollieren.
Keywords: SELFHTML, CSS, Stylesheets, Cascading Stylesheets, HTML, CSS-Eigenschaften, Listen, Aufzählungslisten, nummerierte Listen, ul, ol, li, list-style-type, list-style-position, list-style-image, list-style, Bulltets, Bullet-Grafiken, Aufzählungszeichen, römische Nummerierung
Date: 2005-08-22T21:21:39+02:00

| # Listenformatierung
| Allgemeines zur Listenformatierung list-style-type (Darstellungstyp) list-style-position (Listeneinrückung) list-style-image (eigene Bullet-Grafik) list-style (Listendarstellung allgemein)

## Allgemeines zur Listenformatierung

Die Stylesheet-Angaben für Listen beziehen sich speziell auf die HTML-Elemente `ul` ( Aufzählungslisten) und `ol` ( nummerierte Listen).

Sie können mit Hilfe von Stylesheet-Angaben die gleichen Formatierungen erzwingen, wie es in den einleitenden HTML-Tags `<ul>` und `<ol>` mit Hilfe von zusätzlichen Attributen möglich ist. Die entsprechenden Attribute sind in HTML 4.0 jedoch alle als "deprecated" ausgewiesen, also als künftig unerwünscht. Stattdessen sollen die hier beschriebenen CSS-Eigenschaften verwendet werden, um solche Listen zu formatieren. Neben den Möglichkeiten, die HTML bietet, stehen auch erweiterte Möglichkeiten zum Formatieren von Listen zur Verfügung, etwa die Möglichkeit, Listen aus- statt einzurücken oder eine eigene Grafik als Aufzählungssymbol zu definieren.

## list-style-type (Darstellungstyp)

Für Aufzählungslisten können Sie das Erscheinungsbild des Bullet-Zeichens bestimmen. Für nummerierte Liste können Sie die Darstellung der Durchnummerierung beeinflussen.

### Beispiel:

Anzeigebeispiel: So sieht's aus

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
    <html><head><title>list-style-type</title>
    </head><body>

    <h4>Aufz&auml;hlungsliste &lt;ul&gt; mit Darstellungstyp <i>disc</i></h4>
    <ul style="list-style-type:disc">
    <li>Probieren geht &uuml;ber Studieren</li>
    <!--usw.-->
    </ul>
    <h4>Aufz&auml;hlungsliste &lt;ul&gt; mit Darstellungstyp <i>circle</i></h4>
    <ul style="list-style-type:circle">
    <li>Probieren geht &uuml;ber Studieren</li>
    <!--usw.-->
    </ul>
    <!--usw.-->

    <h4>Nummerierte Liste &lt;ol&gt; mit Darstellungstyp <i>decimal</i></h4>
    <ol style="list-style-type:decimal">
    <li>Tagesordnung</li>
    <!--usw.-->
    </ol>
    <h4>Nummerierte Liste &lt;ol&gt; mit Darstellungstyp <i>lower-roman</i></h4>
    <ol style="list-style-type:lower-roman">
    <li>Tagesordnung</li>
    <!--usw.-->
    </ol>

    <!--usw.-->
    </body></html>

### Erläuterung:

Mit `list-style-type:` können Sie das Aussehen von Listenzeichen kontrollieren. Erlaubt ist eine der folgenden Angaben.

`decimal` = für `ol`-Listen: Nummerierung 1.,2.,3.,4. usw.
`lower-roman` = für `ol`-Listen: Nummerierung i.,ii.,iii.,iv. usw.
`upper-roman` = für `ol`-Listen: Nummerierung I.,II.,III.,IV. usw.
`lower-alpha` oder `lower-latin` = für `ol`-Listen: Nummerierung a.,b.,c.,d. usw.
`upper-alpha` oder `upper-latin` = für `ol`-Listen: Nummerierung A.,B.,C.,D. usw.
`disc` = für `ul`-Listen: gefüllter Kreis als Bullet-Zeichen
`circle` = für `ul`-Listen: leerer Kreis als Bullet-Zeichen
`square` = für `ul`-Listen: rechteckiges Bullet-Zeichen
`none` = kein Bullet-Zeichen, keine Nummerierung

Die folgenden, neueren CSS-Angaben sind ebenfalls möglich, werden bislang jedoch nur von Netscape ab Version 6.0, Firefox und teilweise von Opera, Konqueror und Safari interpretiert:

`lower-greek` = für `ol`-Listen: Nummerierung mit den griechischen Buchstaben: α., β., γ., δ. usw.
`hebrew` = für `ol`-Listen: Nummerierung mit den hebräischen Buchstaben
`decimal-leading-zero` = für `ol`-Listen: Nummerierung mit führender 0: 01.,02.,03.,04., ... 98.,99. usw.
`cjk-ideographic` = für `ol`-Listen: Nummerierung mit ideographischen Zeichen
`hiragana` = für `ol`-Listen: Nummerierung in Japanisch (a, i, u, e, o, ka, ki, ... )
`katakana` = für `ol`-Listen: Nummerierung in Japanisch (A, I, U, E, O, KA, KI, ... )
`hiragana-iroha` = für `ol`-Listen: Nummerierung in Japanisch (i, ro, ha, ni, ho, he, to, ... )
`katakana-iroha` = für `ol`-Listen: Nummerierung in Japanisch (I, RO, HA, NI, HO, HE, TO, ... )

## list-style-position (Listeneinrückung)

Sie können bestimmen, wie sich Bullet-Zeichen oder Nummerierung mit dem Inhalt eines Listenpunktes in Bezug auf Einrückung verhalten.

### Beispiel:

Anzeigebeispiel: So sieht's aus

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
    <html><head><title>list-style-position</title>
    </head><body>

    <h4>Nummerierte Liste &lt;ol&gt; mit Listeneinr&uuml;ckung <i>inside</i></h4>
    <ol style="list-style-position:inside">
    <li>Tagesordnung<br>
    zweizeilig</li>
    <!--usw.-->
    </ol>

    <h4>Nummerierte Liste &lt;ol&gt; mit Listeneinr&uuml;ckung <i>outside</i></h4>
    <ol style="list-style-position:outside">
    <li>Tagesordnung<br>
    zweizeilig</li>
    <!--usw.-->
    </ol>

    </body></html>

### Erläuterung:

Mit `list-style-position:` können Sie das Einrückungsverhalten kontrollieren. Erlaubt ist eine der folgenden Angaben.

`inside` = eingerückt.
`outside` = ausgerückt (Voreinstellung).

## list-style-image (eigene Bullet-Grafik)

Sie können eine eigene geeignete Grafik als Bullet-Zeichen für Aufzählungslisten bestimmen.

### Beispiel:

Anzeigebeispiel: So sieht's aus

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
    <html><head><title>list-style-image</title>
    </head><body>

    <h4>Aufz&auml;hlungsliste &lt;ul&gt; mit eigener Bullet-Grafik</h4>
    <ul style="list-style-image:url(list_style_image.gif)">
    <li>&#160;<a href="../../../html/index.htm"><b>HTML/XHTML</b></a><br>
    Die Sprache des Web</li>
    <!--usw.-->
    </ul>

    </body></html>

### Erläuterung:

Mit `list-style-image:url([Dateiname])` können Sie eine Grafik für das eigene Bullet-Zeichen angeben. Anstatt einer Grafikreferenz ist auch der Wert `none` erlaubt. Als Grafikdateitypen sollten Sie wie in HTML üblich GIF-, PNG- oder JPG-Grafiken benutzen.

Im Beispiel wird vorausgesetzt, dass sich die Grafikdatei im gleichen Verzeichnis befindet wie die HTML-Datei. Wenn die Grafik in einem anderen Verzeichnis steht, müssen Sie den relativen oder absoluten Pfadnamen angeben. Das funktioniert genau so wie beim Einbinden von Grafiken in HTML.

## list-style (Listendarstellung allgemein)

Diese Angabe ist eine Zusammenfassung der folgenden möglichen Einzelangaben:
list-style-type (Darstellungstyp)
list-style-position (Listeneinrückung)
list-style-image (Eigene Bullet-Grafik)

### Beispiel:

Anzeigebeispiel: So sieht's aus

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
    <html><head><title>list-style</title>
    </head><body>

    <h4>Nummerierte Liste &lt;ol&gt; mit den Angaben <i>lower-roman inside</i></h4>
    <ol style="list-style:lower-roman inside">
    <li>bei Anette vorbeischauen<br>
    und Gr&uuml;&szlig;e an Gundula ausrichten</li>
    <!--usw.-->
    </ol>

    </body></html>

### Erläuterung:

Mit `list-style:` können Sie zusammenfassende Angaben zum Aussehen von Aufzählungslisten oder nummerierten Listen machen. Notieren Sie Angaben zum Darstellungstyp, zur Listeneinrückung sowie zur Bullet-Grafik mit Leerzeichen dazwischen, so wie im Beispiel oben. Die Reihenfolge der Einzelangaben ist egal. Es ist nicht erforderlich, zu allen Angaben etwas zu notieren.

### Beachten Sie:

Netscape 4.x interpretiert nur einen Teil dieser Angaben.

| Tabellenformatierung
| Hintergrundfarben und -bilder

© 2007 Impressum