Cascading Stylesheets Stil mit <Stil>

CSS2-Referenz | HTML-4.01-Referenz | Farben, Zeichen und Maße | Workshop | Externe Links | Impressum | Hinweise

# Lists and markers – Eigenschaften für Aufzählungen und Aufzählungssymbole

Ungeordnete Aufzählungen werden typischerweise durch gefüllte Kreise eingeleitet, gefolgt von einem Einzug und einem Text. Alternativ können eigene Bilder anstelle des gefüllten Kreises benutzt werden. Geordnete Aufzählungen werden typischerweise durch eine Folge von Zahlen oder Buchstaben eingeleitet, gefolgt von einem Einzug und einem Text.

Geordnete Aufzählungen oder Listen werden durch das Tag <ol> und ungeordnete Listen durch das Tag <ul> eingeschlossen.

list-style-image • list-style-position • list-style-type • list-style • marker-offset

## list-style-image

IE4+ M1 N6 O5+ Version: CSS1 Erblich: Ja | list-style-image ist die Adresse eines Bildes, das als Aufzählungssymbol in einer Liste benutzt wird. | url ("urladdress") | none

url ("urladdress") ist der Pfad eines Bildes. Die Adresse muss in Klammern und von Hochkommas eingeschlossen sein.

none ist die Voreinstellung und gibt an, dass kein Bild eingespielt wird. Die Angabe von none stellt sicher, dass vorangegangene Deklarationen nicht weiter angewendet werden.

#### Beispiel

    ul.knopf { list-style-position: outside;
        list-style-image: url("knopf.gif")}
    	...
    	<ul class="knopf">
        <li >Montag</li>
        <li>Dienstag</li>
        <li>Mittwoch</li>
        </ul>

↑

## list-style-position

IE4+ M1 N6 O5+ Version: CSS1 Erblich: Ja | list-style-position legt fest, ob die Listenabsätze eingezogen werden oder nicht. | inside | outside

Wenn sich der Listeneintrag über mehrere Zeilen erstreckt, setzt inside das Listensymbol in den Absatz.

Wenn sich der Listeneintrag über mehrere Zeilen erstreckt, setzt outside das Listensymbol links vor den Absatz (Voreinstellung).

#### Beispiel

    .liste_innen_eingezogen { list-style-position: inside;
                              list-style-type: circle;
                              width: 300px}
     .liste_aussen_ausgezogen {list-style-position: outside;
                               list-style-type:
                               circle ; width: 300px}

↑

## list-style-type

IE4+ M1 N4+ O5+ Die CSS2-Werte werden zurzeit noch nicht von allen Browsern erkannt. Version: CSS1/Erweitert in CSS2 Erblich: Ja | list-style-type bestimmt das Aufzählungssymbol in einer Liste. Dabei stehen drei Arten von Symbolen zur Verfügung: alphabetisch, Glyphen und numerisch. In ungeordneten Listen können Sie zwischen gefüllten und ungefüllten Kreisen und Quadraten wählen. In geordneten Listen können Sie zwischen alphabetischen und numerischen Werten wählen. Sowohl in geordneten als auch in ungeordneten Listen kann das Listensymbol durch die Angabe von none unterdrückt werden. | disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none | armenian | cjk-ideographic | georgian | lower-greek | hebrew | hiragana | hiragana-iroha | katakana | katakana-iroha | lower-latin | upper-latin

Diese Eigenschaft wirkt nur bei Elementen, die Listenelemente darstellen können.

Viele Browser werden nur den gefüllten schwarzen Kreis erkennen, egal, welches Symbol angegeben wird. Mozilla 1 und Netscape 6 unterstützen die gesamte Bandbreite der Aufzählungssymbole, wenn die entsprechenden Zeichensätze installiert sind, während Opera 5 nur den gefüllten schwarzen Kreis und dezimale Zahlen darstellen kann.

circle (CSS1): gefüllte Kreise (bullets)

decimal (CSS1): 1, 2, 3 etc.

disc (CSS1): Standardsymbol

none (CSS1): Ausgabe ohne Listensymbol

lower-roman (CSS1): i, ii, iii, iv etc.

upper-roman (CSS1): I, II, III, IV etc.

square (CSS1): Vierecke

armenian (CSS2): traditionelle armenische Symbole

cjk-ideographic (CSS2): einfache ideographische Zahlen als Symbole

georgian (CSS2): traditionelle georgische Symbole

lower-greek (CSS2): klassische kleine griechische Zeichen als Symbole

hebrew (CSS2): traditionelle hebräische Zahlen als Symbole

hiragana (CSS2): die japanischen Hiragana-Zeichen als Symbole

hiragana-iroha (CSS2): die japanische Hiragana-Iroha-Ordnung als Symbole

katakana (CSS2): japanische Katakana-Zeichen als Symbole

katakana-iroha (CSS2): die japanische Katakana-Iroha-Ordnung als Symbole

lower-latin (CSS2): lateinische Kleinbuchstaben (a, b, c etc.) als Symbole

upper-latin (CSS2): lateinische Großbuchstaben (A, B, C etc.) als Symbole

#### Beispiel

    .li_disc { list-style-type: disc}
    .li_circle { list-style-type: circle}
    .li_square { list-style-type: square}
    .li_decimal { list-style-type: decimal}
    .li_lower-roman { list-style-type: lower-roman}
    .li_upper-roman { list-style-type: upper-roman}
    .li_lower-greek { list-style-type: lower-greek}
    .li_hebrew { list-style-type: hebrew}
    .li_lower-latin { list-style-type: lower-latin}
    .li_upper-latin { list-style-type: upper-latin}
    .li_lower-greek { list-style-type: lower-greek}
    .li_hiragana { list-style-type: hiragana}
    .li_cjk-ideographic { list-style-type: cjk-ideographic}

↑

## list-style

IE4+ M1 N6 O5+ Version: CSS1 Erblich: Ja | list-style kombiniert drei Eigenschaften in einer Deklaration: list-style-image und/oder list-style-position und/oder list-style-type. | list-style-image &| list-style-position &| list-style-type

Jede dieser drei Eigenschaften wurde in den vorangegangenen Absätzen beschrieben.

#### Beispiel

    .liste_mond   { list-style: url(rouge.gif) inside}
    .liste_innen  { list-style: upper-roman inside }
    .liste_aussen { list-style: square outside}

↑

## marker-offset

Zurzeit von keinem Browser unterstützt Version: CSS2 Erblich: Nein | marker-offset gibt den horizontalen Abstand (hier als offset oder dt. Einzug bezeichnet) zwischen der Symbolbox und der Aufzählungsbox an. Der Abstand wird an den beiden zueinander gewandten Kanten der beiden Boxen gemessen. | auto | length

Diese Darstellung einer Aufzählung verwendet eine Box für den prinzipiellen Inhalt der Aufzählung und eine Box für die Listensymbole. Ein Absatz der Liste liegt in der Aufzählungsbox, während sich das Aufzählungssymbol in der Symbolbox auf der linken Seite befindet. Das eröffnet die Möglichkeit, mehrere Listenstile in einer Aufzählung zu definieren und die Listensymbole können über die content-Eigenschaft definiert werden.

marker-offset setzt die Symbolbox in ein präzises Verhältnis zur Aufzählungsbox. Die Symbolbox kann sowohl innerhalb als auch außerhalb der Aufzählungsbox liegen, aber die Position der Symbolbox hat keine Auswirkung auf die Position der Aufzählungsbox.

auto ist die Voreinstellung und erlaubt dem Browser, den Abstand automatisch zu setzen.

length kann in einer der folgenden Maßeinheiten angegeben werden:

Maßeinheit | Abkürzung | Maßeinheit | Abkürzung
Zentimeter | cm | Millimeter | mm
ems | em | Pica | pc
x-Höhe | ex | Pixel | px
Inch | in | Point | pt

↑

aural Stile für die Sprachausgabe

border Stile für die Gestaltung eines Rahmens um ein Element

color und background Stile für die Vordergrundfarbe und Hintergrundgestaltung

content Stile für automatisch generierten Inhalt

dimension Stile für die Abmessungen und Ausrichtung von Elementen

font Stile für die Schriftgestaltung

lists and markers Stile für Aufzählungen und Listen

margin Stile für den Abstand eines Elements gegen umgebende Elemente

padding Stile für den inneren Abstand zum Element

paged media Stile für den Druck

positioning Stile für die Positionierung

Pseudoklassen und Pseudoelemente Stile für die Gestaltung von Pseudolinks und Pseudoelementen

table Stile für die Gestaltung von Tabellen

text Stile für die Absatzgestaltung

user interface Stile für die Gestaltung der Benutzeroberfläche durch Rahmen und Mauszeiger

Cascading Styleheets – Stil mit <Stil> • Das Begleitmaterial zum Buch
© media engineering Ulrike Häßler 2002 • Frechen