CSS lernen - HTML-Listen im CSS formatieren

Arten von HTML-Listen

Es gibt drei verschiedene Arten von Listen in HTML:

• Ungeordnete Listen (<ul;>) - Eine HTML-Liste von Elementen, in der alle Listenelemente mit Aufzählungszeichen gekennzeichnet sind.
• Geordnete Listen (<ol;>) - Eine Liste von Elementen, wobei jedes Listenelement mit einer Nummerierung gekennzeichnet ist.
• Definitionsliste (<dl;>) - Eine Liste von Elementen mit einer Beschreibung eines jeden Elements.

HTML-Listen mit CSS gestalten

CSS bietet verschiedene Eigenschaften zum Gestalten und Formatieren der am häufigsten verwendeten ungeordneten und geordneten Listen. Mit diesen CSS-Listeneigenschaften können Sie dann zum Beispiel:

• Die Form und das Aussehen des Markers (•) steuern
• Statt der Standard-Marker ein Bild setzen
• Den Abstand zwischen Marker und folgendem Text setzen
• steuern ob der Marker innerhalb oder außerhalb des Listenelementes liegen soll

Im folgenden Abschnitt besprechen wir die Eigenschaften, die zum Stylen von HTML-Listen verwendet werden können und lernen wie wir diese anwenden können.

Ändern des Markertyps bei HTML-Listen

Standardmäßig werden Elemente in einer geordneten Liste (<ol>) mit arabischen Ziffern durchnummeriert (1, 2, 3, 5 usw.). Elemente in einer ungeordneten (<ul>) Liste mit runden Aufzählungszeichen (•) gekennzeichnet sind.

Sie können diesen Markierungstyp zum Beispiel in römische Zahlen, latainische Buchstaben, Kreise, Quadrate, uvm. abändern. Man verwendet dafür die list-style-Eigenschaft. Schauen wir uns folgende zwei Beispiele an:

ul {
list-style-type: square;
}

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

Ändern der Position der Listenmarkierung

Standardmäßig werden die Markierungen der einzelnen Listenelemente outside (also außen) in ihren Anzeigefeldern positioniert.

Sie können diese Markierungen oder Aufzählungspunkte jedoch auch innerhalb der Anzeigefelder des Listenelements platzieren. Verwenden Sie dazu die list-style-position-Eigenschaft mit dem Wert inside.

ol li {
list-style-position: inside;
background: #ddd;
padding:0.5em;
}

ol li {
list-style-position: outside;
background: grey;
padding:0.5em;
}

Verwenden von Bildern als Listenmarkierungen (list-style-image)

Sie können mit der list-style-image-Eigenschaft auch ein Bild als Listenmarkierung festlegen.

Der Syntax hierfür sieht folgendermaßen aus:

ul li {
    list-style-image: url("images/pfeil.png");
}

Es kommt vor, dass man mit dem Resultat nicht zufrieden ist, weil diese Verfahrensweise zugegeben auch etwas schwierig zu stylen ist. Als Workaround können Sie Bilder auch als Aufzählungszeichen verwenden, indem Sie diese als Hintergrund-Bild background-image für das Listenelement festlegen.

Zuerst muss dabei festgelegt werden, dass die Liste keine Standard-Aufzählungen mehr verwendet. Danach definieren wir das Bild als Hintergrund-Bild:

ul {
    list-style-type: none;
}
ul li {
    background-image: url("images/arrow.png");
    /* X-pos Y-pos (von oben links) */
    background-position: 0px 10px;    
    background-repeat: no-repeat;
    padding-left: 20px;
}

Auch eine Verwendung von Pseudo-Klassen (z.B.::before) ist möglich. Darauf werde ich später noch einmal genauer eingehen

Kurzschreibweise - Alle Eigenschaften von HTML-Listen auf einmal einstellen

Die list-style-Eigenschaft ist eine Kurzformeigenschaft zur Definition aller drei Eigenschaften list-style-type, list-style-image, und list-style-position einer Liste an einer Stelle. Die folgende Regel legt alle Listeneigenschaften in einer einzigen Deklaration fest:

ul {
    list-style: square inside url("images/arrow.png");
}