Listen sind ein festes HTML-Element in und werden mittels CSS-Formatierung oft zur Erstellung von Navigation-Menüs verwendet. Listeneinträge können horizontal oder vertikal angeordnet werden, was bei der Erstellung einer horizontalen oder vertikalen Navigation hilfreich ist.
Listentypen
Es gibt zwei Listentypen: geordnete und ungeordnete Listen.
Geordnete Listen <ol> werden für Listen verwendet, in denen eine feste Reihenfolge der Listenelemente vorgesehen ist, z.B. bei Bauanleitungen oder Rezepten.
Ungeordnete Listen <ul> werden für alle Listen eingesetzt, deren Listenelemente keine feste Reihenfolge haben, die Reihenfolge der Aufzählung wird wie geschrieben ausgegeben. Im folgenden wird auf ungeordnete Listen eingegangen.
Die Struktur einer Liste besteht in dem umgebenden Listenelement <ul> und den untergeordneten Listeneinträgen <li>, bei denen es sich um weitere Elemente handelt.
Formatierung der Liste
Es werden sowohl das umgebende wie auch die Listenelemente des Inhalts formatiert - beide stehen in Abhängigkeit zueinander. Das umgebende Listenelement wird mittels CSS hinsichtlich des Hintergrunds, der Position und der Maße sowie des in der gesamten Liste verwendeten Fonts formatiert.
Die Formatierung des übergeordneten Listenelements wird mit dem Selektor ul ausgeführt. Die hier eingestellten Eigenschaften beziehen sich auf die komplette Liste inkl. der Listenelemente.
Formatierung der Listenelemente
Die einzelnen Listenelemente wie die Überschrift <h1> oder die Listeneinträge <li> müssen zusätzlich formatiert werden. Da die Schriftfamilie bereits in dem übergeordneten Listenelement eingestellt wurde, muss nun für die Anpassung der Überschrift nur noch die Größe geändert werden.
Listenstile
Der vordefinierte Standardstil einer Liste versieht die Listeneinträge mit Aufzählungspunkten. Neben den bullets gibt er eine Reihe Standardstile, um Listeneinträge zu kennzeichen. Dabei geht es bei der Formatierung grundsätzlich um die grafische Kennzeichnung vor einem Listeneintrag und dem Einzug der Textteile eines Listeneintrags.
Die Form der Aufzählung erfolgt in der Definition des <liststyle>:
Die Einstellung none blendet keine Aufzählungszeichen ein. Um einen individuellen Listenstil zu formatieren, wird i.d.R. dieser Parameter für eine ungeordnete Liste eingestellt.
Listeneinträge
Die einzelnen Listeneinträge werden in den untergeordneten Listenelementen <li> formatiert. Sie stehen in Abhängigkeit zu den übergeordneten Listenelementen, bestimmen aber letztendlich das Layout der Liste, da sie das eigentliche Kernstück der Liste bilden.
