CSS-Listen (List)

CSS Tutorial > Listen

Gebräuchliche Arten zur Änderung von Listeneigenschaften in CSS beinhalten folgende:

Weiter unten wird jede einzelne erläutert:

list-style-type

Die list-style-type-Eigenschaft erlaubt Ihnen, eine andere Markierung statt der vorgegebenen Scheibe zu benutzen. Die am meisten genutzten Stilarten für Listen sind:

none

disc

circle

square

Es können auch geordnete Reihen von Zeichen benutzt werden. Gebräuchlich sind:

upper-latin

lower-latin

upper-roman

lower-roman

upper-alpha

lower-alpha

Einige Beispiele:

Beispiel 1:

<ul style='list-style-type:upper-roman;'>
<li>Element 1</li>
<li>Element 2</li>
</ul>

Resultat:

Element 1
Element 2

Beispiel 2:

<ul style='list-style-type:square;'>
<li>Quadratisches Element 1</li>
<li>Quadratisches Element 2</li>
</ul>

Resultat:

Quadratisches Element 1
Quadratisches Element 2

list-style-position

Die list-style-position Eigenschaft gibt dem Benutzer die Möglichkeit zu bestimmen, ob die Markierung bezüglich Formatierung als Teil des normalen Textes behandelt werden soll. Mögliche Werte sind „inside" (innen) und „outside" (außen). 'Outside' ist der vorgegebene Wert.

Unten stehen zwei Beispiele um den Unterschied deutlich zu achen (beachten Sie die Einrückung und wie die Zeilen ausgerichtet sind):

Beispiel 3:

<ul style='list-style-position:inside;'>
<li>Erster<br>zweite Zeile
<li>Zweiter
</ul>

Resultat:

Erster
zweite Zeile
Zweiter

Beispiel 4:

<ul style='list-style-position:outside;'>
<li>Erster<br>zweite Zeile
<li>Zweiter
</ul>

Resultat:

Erster
zweite Zeile
Zweiter

list-style-image

Die list-style-image-Eigenschaft wird genutzt, um ein eigenes Bild für die Markierung zu benutzen. Der Syntax sieht so aus:

list-style-image:url([image_url]);

Wenn unser CSS-Code zum Beispiel so aussieht:

ul {
list-style-image:url("circle.gif");
}

so sieht der folgende HTML-Code

<ul>
<li>Erste Liste für eigene Markierung.
<li>Zweite Liste für eigene Markierung.
</ul>

so aus:

Erste Liste für eigene Markierung.
Zweite Liste für eigene Markierung.

list-style

Alle der oben genannten 3 Eigenschaften (list-style-type, list-style-position, und list-style-image)können in eine einzige list-style-Eigenschaft zusammengefügt werden. Dies nennt man Kurzbezeichnung, und die Reihenfolge ist hier nicht wichtig. Zum Beispiel:

ul {
list-style: url("circle.gif") none inside;
}

der folgende HTML-Code

<ul>
<li>Erste Liste für eigene Markierung.
<li>Zweite Liste für eigene Markierung.
</ul>

sieht so aus:

Erste Liste für eigene Markierung.
Zweite Liste für eigene Markierung.

Folgende Seite: CSS Table