====== Listen und Aufzählungen ======
Auch die bereits bekannten Listen kann man mit CSS einfach formatieren, häufig werden auch Menüs von Webseiten mit Listen gestaltet.
**Zur Wiederholung eine ungeordnete Liste in (X)HTML:**
- Ein Punkt
- Ein weiterer Punkt
- Ein weiterer Punkt
Listen werden in ul (ungeordnete Listen -> Aufzählungszeichen) und ol (geordnete Listen -> Zahlen oder Buchstaben zur Aufzählung) getrennt.
===== Wichtige CSS-Eigenschaften für Listen =====
^ Eigenschaft ^ erlaubte Werte ^ Erklärung ^ Anwendung möglich auf ^
| list-style-type | none (ol+ul), disc, circle, square (bei ul), decimal, lower-alpha, upper-alpha, lower-roman, upper-roman, lower-greek, decimal-leading-zero, hebrew, armenian, georgian, cjk-ideographic, hiragana, katakana, hiragana-iroha, katakana-iroha (bei ol) | Bestimmt das Aufzählungszeichen (Standardmäßig disc - gefüllter Kreis) | ul, ol, li |
| list-style-image | none, url(), Inherit (vererbt vom übergeordneten Element) | Für die Verwendung einer Grafik anstatt eines Symbols von list-style-type | ul, ol, li |
| list-style-position | inside, outside | Bestimmt, ob Aufzählungszeichen innerhalb oder außerhalb des Textblocks stehen sollen (Standard: outside) | ul, ol, li |
Weitere Informationen zu den einzelnen Eigenschaften gibt es unter [[http://www.css4you.de/listproperty.html|http://www.css4you.de/listproperty.html]].
Natürlichen können die "allgemeinen" CSS-Eigenschaften für Text, Links, Bilder, Farben, etc. auch innerhalb von Listen angewendet werden.
===== Verschachtelung =====
Bekanntlicherweise können Listen verschachtelt werden. In X(HTML) sieht das folgendermaßen aus:
- Ein Punkt
- Ein weiterer Punkt
- Ein weiterer Punkt
Zur Formatierung der Unterpunkte arbeitet man mit Nachfahrenselektoren, das sieht folgendermaßen aus (CSS-Code):
ul {
list-style-type: disc;
}
ul ul
{
list-style-type: circle;
}
ul ul ul
{
list-style-type: square;
}
Würde man keine Nachfahrenselektoren deklarieren, würde das übergeordnete ul-Element die Eigenschaft an die untergeordneten vererben.
===== BSP: Menü mit Listen =====
Listen inline
- Ein Punkt
- Ein Punkt
- Ein Punkt
- Ein Punkt
===== Links =====
[[http://www.css4you.de/listproperty.html|CSS4You: Eigenschaften für Listen]]