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 -