So gestalten Sie Listen mit CSS

Zusammenfassung der HTML-Listen

Es gibt zwei Haupttypen von Listen in HTML - Geordnet und Ungeordnet .

In geordneten Listen (

    ) ist die Reihenfolge der Listenelemente wichtig. Die Elemente können in der Reihenfolge nach Nummer, römischer Ziffer, alphanumerischer Ziffer oder einem anderen Markertyp angezeigt werden. Die Standardmarkierung für geordnete Listen ist eine Zahl (oder decimal):

    In ungeordneten Listen (

      ) spielt die Reihenfolge der Listenelemente keine Rolle. Die Elemente werden im Aufzählungszeichenformat angezeigt. Die Standardmarkierung für ungeordnete Listen ist ein runder Aufzählungspunkt oder disc.

      Jedes Listenelement innerhalb einer geordneten oder ungeordneten Liste wird mit dem Tag erstellt.

      Listenspezifische Stile

      Es gibt drei allgemeine Eigenschaften spezifisch für Styling Listen: list-style-type, list-style-position, und list-style-image. Es gibt auch eine Kurzform, die alle drei umfasst.

      list-style-type

      Die Markierungen (oder Aufzählungszeichen), die in geordneten und ungeordneten Listen angezeigt werden, können auf verschiedene Arten gestaltet werden. Die CSS-Eigenschaft zum Stylen des Markertyps lautet list-style-type. Der Standardwert list-style-typefür eine geordnete Liste ist decimal, während der Standardwert für eine ungeordnete Liste ist disc.

      Beispiel für eine geordnete Liste:

      /* css */ ol { list-style-type: upper-roman; }

      Beispiel für eine ungeordnete Liste:

      /* css */ ul { list-style-type: square; }

      Kein Markierungsbeispiel:

      /* css */ ul { list-style-type: none; }

      Akzeptierte Werte für die list-style-typeEigenschaft sind:

      Ungeordnet:

      • Disc ( Standard )
      • Kreis
      • Quadrat

      Bestellt:

      • dezimal ( Standard )
      • Dezimal-führende-Null
      • niederrömisch
      • Oberrömisch
      • Untergriechisch
      • Niederlatein
      • Oberlatein
      • Armenisch
      • georgisch
      • niedrigeres Alpha
      • oberes Alpha

      Andere:

      • keiner

      Hinweis: Alle oben aufgeführten Eigenschaftswerte können zum Gestalten von geordneten und ungeordneten Listen verwendet werden (z. B. eine geordnete Liste mit squareListenmarkierungen).

      list-style-position

      list-style-positionsteuert, ob die Listenmarkierung innerhalb oder außerhalb jedes Listenelementelements ( ) angezeigt wird . Die Eigenschaft akzeptiert zwei Werte outside(Standard) oder inside.

      Positionieren Sie die Markierung outsidedes Listenelementelements, und alle Textzeilen und Unterzeilen jedes Listenelements werden vertikal ausgerichtet:

      /* css */ ul { list-style-position: outside; /* default */ }

      Positionieren Sie die Markierung inside, und die erste Textzeile jedes Listenelements wird eingerückt, um Platz für die Markierung zu schaffen. Alle Unterzeilen desselben Listenelements werden an der Markierung und nicht an der ersten Textzeile ausgerichtet:

      /* css */ ul { list-style-position: inside; }

      list-style-image

      Die list-style-imageEigenschaft akzeptiert eine Bild-URL anstelle der Listenmarkierung. Der Standardwert für diese Eigenschaft ist none.

      /* css */ ul { list-style-image: url(//url-to-image); }

      list-style Shorthand

      list-style is a shorthand property for the three style properties listed above. The order of values list-style accepts is list-style-type, list-style-position, and list-style-image. If any value is omitted, the default value for that property will be used.

      Example:

      /* css */ ul { list-style: circle inside none; }

      More List-Specific Styling

      Ordered list tags also accept attributes that control the flow, count, or specific marker values of its list items. These include the start, reversed, and value attributes. See the MDN resources listed below for further details.

      General Styling

      List content can be styled just like other p or div elements. color, font-family, margin, padding, or border are just a few examples of properties that can be added to either the ul, ol, or li elements.

      Note that any styles added to the ul or ol element will affect the entire list. Styles added directly to the li elements will affect the individual list items. In the example below, the border and background-color properties are styled differently between the list and list item elements:

      /* css */ ul { list-style-type: circle; border: 2px solid blue; background-color: lightblue; } li { margin: 5px; background-color: lightyellow; }

      List Spacing

      You may notice extra spacing in front of the list items when list-style-type is set to none. Setting padding to 0 (or whatever spacing is preferred) on the list element will override this default padding.

      /* css */ ul { list-style: none; padding: 0; } li { padding: 5px 10px; background-color: #EEEEEE; border: 1px solid #DDDDDD; }

      Sources:

      The links below were referenced in compiling information found in this article. Please visit them for further details about this topic.

      More Information:

      MDN - Styling Lists

      W3Schools - CSS Lists

      CSS Tricks - list-style