CSS - Listen
Listen sind sehr hilfreich bei der Übermittlung einer Reihe von nummerierten oder Aufzählungspunkten. In diesem Kapitel erfahren Sie, wie Sie Listentyp, Position, Stil usw. mithilfe von CSS steuern.
Wir haben die folgenden fünf CSS-Eigenschaften, mit denen Listen gesteuert werden können:
Das list-style-type Mit dieser Option können Sie die Form oder das Erscheinungsbild des Markers steuern.
Das list-style-position Gibt an, ob ein langer Punkt, der in eine zweite Linie eingeschlossen wird, an der ersten Linie ausgerichtet werden soll oder unter dem Anfang der Markierung beginnen soll.
Das list-style-image Gibt ein Bild für die Markierung anstelle eines Aufzählungspunkts oder einer Aufzählungszahl an.
Das list-style dient als Abkürzung für die vorhergehenden Eigenschaften.
Das marker-offset Gibt den Abstand zwischen einer Markierung und dem Text in der Liste an.
Nun werden wir anhand von Beispielen sehen, wie diese Eigenschaften verwendet werden.
Die Eigenschaft vom Typ Listenstil
Mit der Eigenschaft list-style-type können Sie die Form oder den Stil des Aufzählungspunkts (auch als Markierung bezeichnet) bei ungeordneten Listen und den Stil der Nummerierung von Zeichen in geordneten Listen steuern.
Hier sind die Werte, die für eine ungeordnete Liste verwendet werden können -
| Sr.Nr. | Wert & Beschreibung |
|---|---|
| 1 | none N / A |
| 2 | disc (default) Ein ausgefüllter Kreis |
| 3 | circle Ein leerer Kreis |
| 4 | square Ein ausgefülltes Quadrat |
Hier sind die Werte, die für eine geordnete Liste verwendet werden können -
| Wert | Beschreibung | Beispiel |
|---|---|---|
| Dezimal | Nummer | 1,2,3,4,5 |
| Dezimal-führende-Null | 0 vor der Nummer | 01, 02, 03, 04, 05 |
| niedrigeres Alpha | Alphanumerische Kleinbuchstaben | a, b, c, d, e |
| oberes Alpha | Alphanumerische Großbuchstaben | A, B, C, D, E. |
| niederrömisch | Römische Kleinbuchstaben | i, ii, iii, iv, v |
| Oberrömisch | Römische Großbuchstaben | I, II, III, IV, V. |
| Untergriechisch | Der Marker ist untergriechisch | Alpha, Beta, Gamma |
| Niederlatein | Der Marker ist niederlateinisch | a, b, c, d, e |
| Oberlatein | Der Marker ist oberlateinisch | A, B, C, D, E. |
| hebräisch | Der Marker ist eine traditionelle hebräische Nummerierung | |
| Armenisch | Der Marker ist eine traditionelle armenische Nummerierung | |
| georgisch | Der Marker ist eine traditionelle georgische Nummerierung | |
| cjk-ideographisch | Der Marker sind einfache ideografische Zahlen | |
| Hiragana | Der Marker ist Hiragana | a, i, u, e, o, ka, ki |
| Katakana | Der Marker ist Katakana | A, I, U, E, O, KA, KI |
| Hiragana-Iroha | Der Marker ist Hiragana-Iroha | ich, ro, ha, ni, ho, er, zu |
| Katakana-Iroha | Der Marker ist Katakana-Iroha | Ich, RO, HA, NI, HO, HE, TO |
Hier ist ein Beispiel -
<html>
<head>
</head>
<body>
<ul style = "list-style-type:circle;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ul>
<ul style = "list-style-type:square;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ul>
<ol style = "list-style-type:decimal;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ol>
<ol style = "list-style-type:lower-alpha;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ol>
<ol style = "list-style-type:lower-roman;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ol>
</body>
</html>Es wird das folgende Ergebnis erzeugt -
Die Eigenschaft list-style-position
Die Eigenschaft list-style-position gibt an, ob die Markierung innerhalb oder außerhalb des Felds mit den Aufzählungspunkten angezeigt werden soll. Es kann einen der beiden Werte haben -
| Sr.Nr. | Wert & Beschreibung |
|---|---|
| 1 | none N / A |
| 2 | inside Wenn der Text in eine zweite Zeile eingefügt wird, wird der Text unter der Markierung umbrochen. Es wird auch eingerückt angezeigt, wo der Text begonnen hätte, wenn die Liste den Wert außerhalb gehabt hätte. |
| 3 | outside Wenn der Text in eine zweite Zeile eingefügt wird, wird der Text am Anfang der ersten Zeile (rechts vom Aufzählungszeichen) ausgerichtet. |
Hier ist ein Beispiel -
<html>
<head>
</head>
<body>
<ul style = "list-style-type:circle; list-stlye-position:outside;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ul>
<ul style = "list-style-type:square;list-style-position:inside;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ul>
<ol style = "list-style-type:decimal;list-stlye-position:outside;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ol>
<ol style = "list-style-type:lower-alpha;list-style-position:inside;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ol>
</body>
</html>Es wird das folgende Ergebnis erzeugt -
Die Eigenschaft list-style-image
Mit dem Listenstil-Bild können Sie ein Bild angeben, damit Sie Ihren eigenen Aufzählungszeichenstil verwenden können. Die Syntax ähnelt der Hintergrundbildeigenschaft, wobei die Buchstaben-URL den Wert der Eigenschaft gefolgt von der URL in Klammern beginnt. Wenn das angegebene Bild nicht gefunden wird, werden Standardaufzählungszeichen verwendet.
Hier ist ein Beispiel -
<html>
<head>
</head>
<body>
<ul>
<li style = "list-style-image: url(/images/bullet.gif);">Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ul>
<ol>
<li style = "list-style-image: url(/images/bullet.gif);">Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ol>
</body>
</html>Es wird das folgende Ergebnis erzeugt -
Die Eigenschaft im Listenstil
Mit dem Listenstil können Sie alle Listeneigenschaften in einem einzigen Ausdruck angeben. Diese Eigenschaften können in beliebiger Reihenfolge angezeigt werden.
Hier ist ein Beispiel -
<html>
<head>
</head>
<body>
<ul style = "list-style: inside square;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ul>
<ol style = "list-style: outside upper-alpha;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ol>
</body>
</html>Es wird das folgende Ergebnis erzeugt -
Die Marker-Offset-Eigenschaft
Mit der Eigenschaft " Marker-Offset" können Sie den Abstand zwischen dem Marker und dem Text für diesen Marker festlegen. Sein Wert sollte eine Länge sein, wie im folgenden Beispiel gezeigt -
Leider wird diese Eigenschaft in IE 6 oder Netscape 7 nicht unterstützt.
Hier ist ein Beispiel -
<html>
<head>
</head>
<body>
<ul style = "list-style: inside square; marker-offset:2em;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ul>
<ol style = "list-style: outside upper-alpha; marker-offset:2cm;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ol>
</body>
</html>Es wird das folgende Ergebnis erzeugt -