CSS-Listen (List)


CSS Tutorial  >  Listen

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:

    • Element 1
    • Element 2

    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 © 2024   1keydata.com   Alle Rechte vorbehalten