Websiteentwicklung: CSS: Listen

Vor zu Pseudoklassen, Pseudoelemente und erzeugte Strukturen

Listen sind besondere Strukturen, die auch insbesondere visuell speziell präsentiert werden, etwa mit Symbolen für Listenpunkte und mit Einrückungen. Daher stellt CSS auch einige Eigenschaften bereit, die speziell dazu dienen, die Darstellung von Listen zu beeinflussen.

Hat display den Wert 'list-item', so wird eine Block-Box erzeugt für den Inhalt des Listenpunktes. Hinzu kommt eine weitere Box für das Listensymbol, auf welche spezielle Eigenschaften wie list-style-type und list-style-image wirken. Das mögliche Listenpunktsymbol (englisch: marker, also Markierung) ist also in einer eigenen Box angesiedelt, ist somit selbst nicht Ziel der Eigenschaften, die auf die Box selbst angewendet werden, wie etwa der Hintergrund.

Listenpunktsymbol - list-style-type

Die Darstellung des Symbols für oder vor einem Listenpunkt kann mit der Eigenschaft list-style-type beeinflußt werden.

Der Wert ist eines der folgenden Schlüsselwörter. Die Eigenschaft wird vererbt und ist anwendbar auf visuelle Medien und dort auf Elemente mit display 'list-item'. Ferner hat die Eigenschaft nur einen Effekt, wenn die Eigenschaft list-style-image den Wert 'none' hat.

Mögliche Schlüsselwörter:

inherit - geerbt
none - kein Symbol
disc - Scheibe, gefüllter Kreis; Initialwert
circle - Kreis
square - Quadrat

Weitere zur Numerierung:

decimal - Dezimalzahlen, beginnend mit 1; also 1, 2, 3, ... 10, 11, ... 203, 204 etc
decimal-leading-zero - Dezimalzahlen, immer gleiche Anzahl von Ziffern, gegebenenfalls wird vorne mit Nullen aufgefüllt, also 001, 002, ... 078, 079, ... 203, 204 etc
lower-roman - kleine römische Ziffernzeichen, also i, ii, iii, iv, v etc
upper-roman - große römische Ziffernzeichen, also I, II, III, IV, V etc
armenian - Traditionelle armenische Numerierung mit großen Ziffern
georgian - Traditionelle georgische Numerierung (an, ban, gan, ..., he, tan, in, in-an, ...)

Weitere zur Numerierung, nicht in CSS2.1 aufgeführt, aber in CSS2.0:

hebrew - Traditionelle hebräische Numerierung
cjk-ideographic - Einfache ideographische Zahlen
hirangana - a, i, u, e, o, ka, ki, ...
hiragana-iroha - i, ro, ha, ni, ho, he, to, ...
katakana - A, I, U, E, O, KA, KI, ...
katakana-iroha - I, RO, HA, NI, HO, HE, TO, ...

Weitere mit Buchstaben, wobei der Autor darauf achten muß, dass die Liste nicht mehr Listenpunkte hat als das jeweilige Alphabet Buchstaben hat:

lower-greek - kleine klassische griechische Buchstaben, also α, β, γ etc
lower-latin - kleine lateinische Buchstaben nach ASCII, also a, b, c, ... z (26 Möglichkeiten)
upper-latin - große lateinische Buchstaben nach ASCII, also A, B, C, ... Z (26 Möglichkeiten)
lower-alpha - kleine lateinische Buchstaben nach ASCII, also a, b, c, ... z (26 Möglichkeiten)
upper-alpha - große lateinische Buchstaben nach ASCII, also A, B, C, ... Z (26 Möglichkeiten)

Beispiel:

ol {list-style-type: upper-roman}

Zahlen römisch und arabisch:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

Listenpunktbild - list-style-image

Statt der mit list-style-type vorgegebenen Symbole kann auch ein eigenes verwendet werden. Dazu wird mit der Eigenschaft list-style-image ein Bild von dem Symbol referenziert.

Der Wert von list-style-image ist entweder eines der Schlüsselwörter 'inherit' oder 'none' oder die Angaben einer URI/IRI eines Bildes in der für CSS üblichen Notation 'url("BildIRI.svg")', wobei "BildIRI.svg" für die URI/IRI eines Bildes steht. CSS selbst sieht keine spezifischen Formate vor, die interpretiert werden müßten, typisch sind etwa SVG, PNG, JFIF/JPEG, GIF.

Der Initialwert ist 'none'. Bei 'none' wird kein Bild verwendet, sondern gemäß list-style-type vorgegangen. Die Eigenschaft wird vererbt und ist anwendbar auf Elemente mit display 'list-item' bei visuellen Medien. Das Bild ersetzt dann das mit list-style-type angegebene Symbol, aber nur sofern das Bild verfügbar ist, was man auch auf nicht interpretierte Bildformate übertragen kann.

Hinsichtlich der Größe (Höhe und Breite) des dargestellten Bildes wird jene verwendet, die im Bild angegeben ist, sofern es solche Angaben komplett gibt. Ist stattdessen nur eine Angabe zum Aspektverhältnis verfügbar und nur entweder Höhe oder Breite sind angegeben, so wird die fehlende Größe anhand des Aspektverhältnisses bestimmt. Ist nur das Aspektverhältnis verfügbar, wird eine Breite von 1em angenommen und die Höhe gemäß Aspektverhältnis berechnet. Ist kein Aspektverhältnis verfügbar, wird sofern angegeben die Breite verwendet, sonst 1em. Entsprechend wird die angegebene Höhe verwendet, sofern verfügbar, sonst 1em.

Beispiel:

ul {url('Listenpunkt.svg')}

Listenpunktposition - list-style-position

Das Listenpunktsymbol hat eine eigene Box gegenüber jener Box des Listenpunktes selbst. Entsprechend kann angegeben werden, wie diese Box zu positionieren ist. Es gibt aber nur die Möglichkeit, dies recht vage anzugeben. Dazu dient die Eigenschaft list-style-position.

Der Wert von list-style-position ist eines der Schlüsselwörter 'inherit', 'inside', 'outside'. Der Initialwert ist 'outside'. Die Eigenschaft wird vererbt und ist anwendbar auf Elemente mit display 'list-item' bei visuellen Medien.

Bei 'inside' wird die Box des Symbols als erste inzeilige Box in der Box des Listenpunktes untergebracht. Mit CSS2.1 ist keine genaue Positionierung möglich. Bei 'outside' wird die Box des Symbols außerhalb der des Listenpunktes untergebracht. Bei der Schreibrichtung von links nach rechts links daneben, bei der Schreibrichtung von rechts nach links rechts daneben, was jeweils eine Einrückung des Listenpunktes zur Folge hat. Genauere Angaben dazu macht CSS2.1 nicht.

Beispiel

ul {list-style-position: outside}
ul.kompakt {list-style-position: inside}

Zahlen römisch und arabisch (kompakte Darstellung mit 'inside'):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

Listenstil - list-style

Mit der Eigenschaft list-style gibt es eine Kurznotation für list-style-type, list-style-image, und list-style-position.

Der Wert ist entweder das Schlüsselwort 'inherit' oder eine Liste der drei Eigenschaftswerte in beliebiger Reihenfolge, wobei nur mindestens ein Eigenschaftswert notiert werden muß. Der Initialwert entspricht einer Liste der Initialwerte der einzelnen Eigenschaften. Die Eigenschaft wird vererbt und ist anwendbar auf Elemente mit display 'list-item' bei visuellen Medien. Wie üblich für Kurznotationen wird für nicht gesetzte Werte jeweils der Initialwert verwendet. Wird 'none' als Wert gesetzt, bezieht sich das immer sowohl auf list-style-type als auch auf list-style-image.

Man beachte auch die korrekte Verwendung von Selektoren bei verschachtelten Listen. Zum Beispiel setzt ol li {list-style: circle } alle Listensymbole auf einen Kreis, falls diese in einem Element ol stehen, also auch solche, die etwa in einer untergeordneten Liste stehen, welche selbst in einem Listenpunkt notiert ist. Eine gezieltere Zuordnung kann mit einem Kindselektor erfolgen: ol > li {list-style: circle }. Das trifft dann nur auf Listenpunkte zu, welche direkte Kinder eines Elementes ol sind, nicht auf solche, die etwa in einem Element ul zu finden sein mögen, welches seinerseits lediglich Kindelement eines Listenpunktes ist.

Beispiel:

ol {list-style: outside square}
ol > li > ul > li {list-style: outside circle}
ol > li > ul > li > ol > li {list-style: inside disc}
ul {list-style: circle url('ListenpunktKreis.svg') inside}
ul > li > ol {list-style: url('ListenpunktQuadrat.svg') square inside}

Aufgrund der Selektivität der Selektoren werden hier also ineinander verschachtelte Listen mit anderen Symbolen versehen als solche, wo das nicht der Fall ist.

Listensymbolversatz - marker-offset

Mit der Eigenschaft marker-offset kann angegeben werden, um wieviel horizontal das Listensymbol von der zugehörigen Box versetzt dargestellt wird. Die Eigenschaft ist in CSS 2.0 definiert, aber einweilen in CSS 2.1 aufgrund mangelnder Interpretation durch gängige Darstellungsprogramme einstweilen wieder gestrichen.

Der Wert von marker-offset ist entweder eine Länge oder eines der Schlüsselwörter 'auto' oder 'inherit'. Der Initialwert ist 'auto'. Bei 'auto' bestimmt das Darstellungsprogramm den Abstand selbst.

Die Eigenschaft ist anwendbar auf Elemente mit der Eigenschaft 'display: marker' bei visuellen Medien. Die Zuordnung zu 'display: marker' kann natürlich auch bereits durch die Stilvorlage des Darstellungsprogrammes oder die Bedeutung des Elementes erfolgen, somit ist die Eigenschaft zum Beispiel bei (X)HTML pauschal auf die Listensymbole für Elemente vom Typ li anwendbar, um Einfluß auf diese Markierungen zu nehmen.

Beispiel:

ol.rom > li:before { 
   display: marker;
   marker-offset: 3em;
   content: counter(rom, lower-roman) ":";
   counter-increment: rom;

Zurück zu Tabellen |

Hoch zu CSS |

Vor zu Pseudoklassen, Pseudoelemente und erzeugte Strukturen