 SELFHTML/Navigationshilfen Stylesheets (CSS) CSS-Eigenschaften |
|
 |
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.
Anzeigebeispiel: So sieht's aus
<html><head><title>list-style-type</title> </head><body> <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 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.1, Firefox und teilweise 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.
Anzeigebeispiel: So sieht's aus
<html><head><title>list-style-position</title> </head><body> <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> <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 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.
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> <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 Stylesheets (CSS) CSS-Eigenschaften |
|
© 2005 Impressum