Gebräuchliche Arten zur Änderung von Listeneigenschaften in CSS beinhalten folgende:
list-style-type
list-style-position
list-style-image
list-style
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:
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
Copyright 2008-2009 1keydata.com Alle Rechte vorbehalten.
|
|