logo

TechCodeview

CSS-Listenstile

Die Liste in CSS bestimmt, wie die Inhalte oder Elemente auf eine bestimmte Weise aufgelistet werden, d. h. sie können entweder ordentlich oder zufällig angeordnet werden, was beim Erstellen einer sauberen Webseite hilft. Da sie anpassungsfähig und einfach zu handhaben sind, können sie zum Organisieren großer Materialmengen verwendet werden. Der Standardstil der Liste ist randlos. Die Liste kann in zwei Kategorien unterteilt werden:

    Ungeordnete Liste:Standardmäßig werden die Listenelemente in ungeordneten Listen mit Aufzählungszeichen gekennzeichnet, bei denen es sich um kleine schwarze Kreise handelt.Bestellliste:Die Listenelemente in geordneten Listen werden durch Zahlen und Buchstaben identifiziert.

Die folgenden CSS-Listeneigenschaften stehen zur Steuerung der CSS-Listen zur Verfügung:

    Listenstiltyp:Diese Eigenschaft wird verwendet, um das Aussehen der Listenelementmarkierung zu bestimmen, z. B. eine Scheibe, ein Zeichen oder ein benutzerdefinierter Zählerstil.Bild im Listenstil:Mit diesem Parameter können die Bilder angegeben werden, die als Listenelementmarkierungen dienen sollen.Position im Listenstil:Es beschreibt, wo sich das Markierungsfeld neben dem Hauptblockfeld befinden sollte.Listenstil:Mit diesem Attribut wird der Listenstil konfiguriert.

Wir werden nun anhand von Beispielen mehr über diese Eigenschaften erfahren.

Eigenschaft vom Typ „Liste“.

Der standardmäßige Listentyp der Markierung kann in eine Vielzahl anderer Typen geändert werden, darunter Quadrat, Kreis, römische Ziffern, lateinische Buchstaben und viele mehr. Die Einträge in einer ungeordneten Liste werden durch runde Aufzählungszeichen (•) gekennzeichnet, während die Elemente in einer geordneten Liste standardmäßig mit arabischen Ziffern (1, 2, 3 usw.) nummeriert werden.

Die Markierungen oder Aufzählungszeichen werden entfernt, wenn wir ihren Wert auf „Keine“ setzen.

Syntax:

Listenstiltyp:Wert;

Java8-Funktionen

Wir können den Wert wie folgt verwenden:

  1. Kreis
  2. dezimal, z. B.:1,2,3 usw
  3. dezimale führende Nullen, z. B. :01,02,03,04 usw
  4. niederrömisch
  5. Oberrömisch
  6. niedrigeres Alpha, z. B. a, b, c usw
  7. oberes Alpha, z. B. A, B, C usw
  8. Quadrat

Hinweis: Die Standardabstände und -ränder sind ebenfalls in der Liste enthalten. Es ist notwendig, padding:0 und margin:0 hinzuzufügen
    Und
      Tags, um dies zu beseitigen.

Beispiel

Dieses Beispiel zeigt eine CSS-Liste mit mehreren Listenstiltypen und Werten, die auf Quadrat, Großbuchstaben und viele gesetzt sind.

 Example for CSS Lists .num{ list-style-type:decimal; } .alpha{ list-style-type:upper-alpha; } .circle{ list-style-type:circle; } .square{ list-style-type:square; } .disc{ list-style-type:disc; } <h2> Ordered Lists </h2> <ol class="order"> <li>ONE</li> <li>TWO</li> </ol> <h2> Unordered lists </h2> <ul> <li>ONE</li> <li>TWO</li> </ul>

Ausgabe

CSS-Listenstile