SELFHTML/Navigationshilfen CSS Stylesheets CSS-Eigenschaften| SELFHTML/Navigationshilfen CSS Stylesheets CSS-Eigenschaften |
 |
Listenformatierung |
|
|
 | |
Die Style-Sheet-Angaben für Listen beziehen sich speziell auf die HTML-Elemente ul (
Aufzählungslisten) und ol ( nummerierte Listen).
Sie können mit Hilfe von Style-Sheet-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 "depracated" 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 Auzählungslisten können Sie das Erscheinungsbild des Bullet-Zeichens bestimmen. Für nummerierte Liste können Sie die Darstellung der Durchnummerierung beeinflussen.
Anzeigebeispiel: So sieht's aus
<html><head><title>list-style-type</title> </head><body bgcolor="FFFFFF" text="#000000"> <h4>Aufzählungsliste <ul> mit Darstellungstyp <i>disc</i></h4> <ul style="list-style-type:disc"> <li>Probieren geht über Studieren</li> <!--usw.--> </ul> <h4>Aufzählungsliste <ul> mit Darstellungstyp <i>circle</i></h4> <ul style="list-style-type:circle"> <li>Probieren geht über Studieren</li> <!--usw.--> </ul> <!--usw.--> <h4>Nummerierte Liste <ol> mit Darstellungstyp <i>decimal</i></h4> <ol style="list-style-type:decimal"> <li>Tagesordnung</li> <!--usw.--> </ol> <h4>Nummerierte Liste <ol> mit Darstellungstyp <i>lower-roman</i></h4> <ol style="list-style-type:lower-roman"> <li>Tagesordnung</li> <!--usw.--> </ol> <!--usw.--> </body></html> |
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 = für ol-Listen: Nummerierung a.,b.,c.,d. usw.
upper-alpha = für ol-Listen: Nummerierung A.,B.,C.,D. usw.
lower-latin = für ol-Listen: Nummerierung a.,b.,c.,d. usw. inclusive erweitertem Latin-Zeichensatz
upper-latin = für ol-Listen: Nummerierung A.,B.,C.,D. usw. inclusive erweitertem Latin-Zeichensatz
disc = für ul-Listen: Dateisymbol als Bulletzeichen
circle = für ul-Listen: rundes Bulletzeichen
square = für ul-Listen: rechteckiges Bulletzeichen
none = kein Bulletzeichen, keine Nummerierung
Die folgenden, neueren CSS-Angaben sind ebenfalls möglich, werden bislang jedoch nur von Netscape ab Version 6.1 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 Bulletzeichen oder Nuermerierung mit dem Inhalt eines Listenpunktes in Bezug auf Einrückung verhalten.
Anzeigebeispiel: So sieht's aus
<html><head><title>list-style-position</title> </head><body bgcolor="FFFFFF" text="#000000"> <h4>Nummerierte Liste <ol> mit Listeneinrückung <i>inside</i></h4> <ol style="list-style-position:inside"> <li>Tagesordnung<br> zweizeilig</li> <!--usw.--> </ol> <h4>Nummerierte Liste <ol> mit Listeneinrückung <i>outside</i></h4> <ol style="list-style-position:outside"> <li>Tagesordnung<br> zweizeilig</li> <!--usw.--> </ol> </body></html> |
Mit list-style-position: können Sie das Einrückungsverhalten kontrollieren. Erlaubt ist eine der folgenden Angaben.
inside = eingerückt.
outside = ausgerückt (Voreinstellung).
Netscape 4.x interpretiert diese Angabe noch nicht.
|
|
list-style-image (eigene Bullet-Grafik)Sie können eine eigene geeignete Grafik als Bullet-Zeichen für Aufzählungslisten bestimmen.
Anzeigebeispiel: So sieht's aus
<html><head><title>list-style-image</title> </head><body bgcolor="FFFFFF" text="#000000"> <h4>Aufzählungsliste <ul> mit eigener Bullet-Grafik</h4> <ul style="list-style-image:url(list_style_image.gif)"> <li> <a href="../../../html/index.htm"><b>HTML/XHTML</b></a><br> Die Sprache des Web</li> <!--usw.--> </ul> </body></html> |
Mit list-style-image:url([Dateiname]) können Sie eine Grafik für das eigene Bulletzeichen angeben. Als Grafikdateitypen sollten Sie wie in HTML üblich GIF- 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.
Netscape 4.x interpretiert diese Angabe noch nicht.
|
|
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)
Anzeigebeispiel: So sieht's aus
<html><head><title>list-style</title> </head><body bgcolor="FFFFFF" text="#000000"> <h4>Nummerierte Liste <ol> mit den Angaben <i>lower-roman inside</i></h4> <ol style="list-style:lower-roman inside"> <li>bei Anette vorbeischauen<br> und Grüße an Gundula ausrichten</li> <!--usw.--> </ol> </body></html> |
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.
Netscape 4.x interpretiert nur einen Teil dieser Angaben.
|
| |
 |
Tabellenformatierung
|
 |
Hintergrundfarben und -bilder
|
| SELFHTML/Navigationshilfen CSS Stylesheets CSS-Eigenschaften |
© 2001 
selfhtml@teamone.de