So ändern Sie den Nummerierungsstil in HTML. Korrekte Nummerierung in verschachtelten HTML-Nummerierungslisten mithilfe von CSS. Verschachtelte Listen mit automatischer Nummerierung

💖 Gefällt es dir? Teilen Sie den Link mit Ihren Freunden

Nummerierte Listen sind eine Sammlung von Elementen mit ihren fortlaufenden Nummern. Die Art und Art der Nummerierung hängt von den Elementparametern ab

    , das zum Erstellen der Liste verwendet wird. Als Nummerierungselemente können folgende Werte dienen:

    • Arabische Ziffern (1, 2, 3, ...);
    • Arabische Ziffern mit führender Null für Zahlen unter zehn (01, 02, 03, ..., 10);
    • lateinische Großbuchstaben (A, B, C, ...);
    • lateinische Kleinbuchstaben (a, b, c, ...);
    • Römische Ziffern in Großbuchstaben(I, II, III, ...);
    • römische Kleinbuchstaben (i, ii, iii, ...);
    • Armenische Nummerierung;
    • Georgische Nummerierung.

    Aus praktischer Sicht können die Prinzipien der Anzeige von Elementen in einer Liste mit Aufzählungszeichen auf ähnliche Weise auf eine nummerierte Liste angewendet werden. Da es sich jedoch um eine Aufzählung handelt, gibt es einige Merkmale, die weiter besprochen werden.

    Listennummerierung

    Es ist erlaubt, die Liste mit einer beliebigen Zahl zu beginnen; Hierzu wird das Startattribut des Elements verwendet

      oder Wert des Elements
    1. . Der Wert ist eine beliebige Ganzzahl positive Zahl. Es spielt keine Rolle, welche Art der Nummerierung eingestellt ist, auch wenn lateinische Buchstaben als Liste verwendet werden. Wenn sowohl das Start- als auch das Wertattribut gleichzeitig auf eine Liste angewendet werden, hat letzteres Vorrang und die Nummerierung wird ab der durch Wert angegebenen Zahl angezeigt, wie in Beispiel 1 gezeigt.

      Beispiel 1: Änderung der Listennummerierung

      Listen

      1. Sie sollten Ihren Arbeitsplatz gut pflegen.
      2. Stellen Sie die Beleuchtung im Raum so ein, dass sich die Lichtquelle seitlich oder hinter dem Bediener befindet.
      3. Um medizinische Komplikationen zu vermeiden, wird empfohlen, einen Stuhl mit weicher Sitzfläche zu wählen.


      Das erste Element der Liste in diesem Beispiel beginnt mit der römischen Zahl IV, da das Attribut start="4" angegeben ist, dann kommt die Zahl V, und das letzte Element kommt aus der Reihenfolge und erhält die Zahl X (Abbildung 1).

      Reis. 1. Römische Ziffern in der Liste

      Zahlen schreiben

      Standardmäßig hat eine nummerierte Liste ein bestimmtes Aussehen: Zuerst gibt es eine Zahl, dann einen Punkt und danach wird der Text durch ein Leerzeichen getrennt angezeigt. Diese Form des Schreibens ist visuell und praktisch, einige Entwickler bevorzugen jedoch eine andere Art der Gestaltung der Nummerierung von Listen. Nämlich so, dass anstelle eines Punktes eine schließende Klammer steht, wie in Abb. 2 oder so ähnlich.

      Reis. 2. Nummerierte Listenansicht mit Klammer

      Mithilfe von Stilen können Sie die Art der Listennummerierung mithilfe der Eigenschaften „Inhalt“ und „Zählerinkrement“ ändern. Zunächst muss der ol-Selektor auf counter-reset : item gesetzt werden, dies ist notwendig, damit die Nummerierung in jeder neuen Liste von neuem beginnt. Andernfalls wird die Nummerierung fortgesetzt und statt 1,2,3 sehen Sie 5,6,7. Der Artikelwert ist eine eindeutige Kennung für den Zähler; wir wählen ihn selbst aus. Als nächstes müssen Sie die ursprünglichen Markierungen über die Stileigenschaft list-style-type mit dem Wert none ausblenden.

      Die Content-Eigenschaft funktioniert normalerweise in Verbindung mit den Pseudoelementen ::after und ::before. Daher besagt die li::before-Konstruktion, dass vor jedem Element der Liste etwas Inhalt hinzugefügt werden muss (Beispiel 2).

      Beispiel 2. Erstellen Sie Ihre eigene Nummerierung

      Li::before ( content: counter(item) ") "; /* Den Zahlen eine Klammer hinzufügen */ counter-increment: item; /* Den Namen des Zählers festlegen */ )

      Die Content-Eigenschaft mit dem Wert counter(item) zeigt eine Zahl an; Durch das Hinzufügen einer Klammer, wie in diesem Beispiel gezeigt, erhalten wir die gewünschte Art der Nummerierung. Um die Listennummer um eins zu erhöhen, ist ein Zählerinkrement erforderlich. Beachten Sie, dass durchgehend derselbe Bezeichner namens item verwendet wird. Der endgültige Code ist in Beispiel 3 dargestellt.

      Beispiel 3: Listenansicht ändern

      Listen

      1. Erste
      2. Zweite
      3. Dritte
      4. Vierte


      Mit der oben beschriebenen Methode können Sie jede Art von nummerierter Liste erstellen und beispielsweise eine Zahl aufnehmen eckige Klammern, ändert sich nur eine Zeile in den Stilen.

      Inhalt: „[“ counter(item) „] „;

      Liste mit russischen Buchstaben

      Es gibt eine nummerierte Liste mit lateinischen Buchstaben, aber keine russischen Buchstaben für die Liste. Sie können mit der oben beschriebenen Technik künstlich hinzugefügt werden. Da die Nummerierung über Stile erfolgt, bleibt die Liste selbst original, es wird nur die ausgewählte Klasse hinzugefügt, nennen wir sie kyrillisch (Beispiel 4).

      Beispiel 4: Code zum Erstellen einer Liste

      1. Eins
      2. Zwei
      3. Drei

      Das Hinzufügen von Buchstaben erfolgt über das Pseudoelement ::before und die Eigenschaft content. Da jede Zeile einen eigenen Buchstaben haben muss, verwenden wir die Pseudoklasse :nth-child(1) , wobei die Buchstabennummer in Klammern steht. Der erste Buchstabe ist natürlich A, der zweite B, der dritte C usw. Dieser gesamte Satz wird wie folgt zum li-Selektor hinzugefügt (Beispiel 5).

      Beispiel 5: Verwendung der Pseudoklasse:nth-child

      Kyrillisch li:nth-child(1)::before ( Inhalt: „a)“; ) .cyrilic li:nth-child(2)::before ( content: "b)"; ) .cyrilic li:nth-child(3)::before ( content: "at)"; )

      In diesem Beispiel folgt auf jeden Buchstaben eine Klammer, alle Buchstaben sind Kleinbuchstaben. Sie können Ihre eigene Art der Listennummerierung definieren, sie kann beispielsweise Großbuchstaben mit einem Punkt, mit einer oder zwei Klammern oder nur Buchstaben enthalten. Im Gegensatz zur Standardnummerierung können wir hier tun und lassen, was wir wollen. Eine Liste mit zehn Buchstaben sollte für fast alle Situationen ausreichen, aber wenn sich herausstellt, dass dies plötzlich nicht mehr ausreicht, hindert uns nichts daran, unsere Liste um mindestens alle Buchstaben des russischen Alphabets zu erweitern.

      Abschließend passen wir die Ausrichtung und Position der Buchstaben an, legen optional die Schriftgröße, Farbe und weitere Parameter fest (Beispiel 6).

      Beispiel 6. Liste mit russischen Buchstaben

      Aufführen

      1. Borschtsch
      2. Hechtkoteletts
      3. Kulebyaka
      4. Pilze in Sauerrahm
      5. Pfannkuchen mit Kaviar
      6. Kwas


      Das Ergebnis dieses Beispiels ist in Abb. dargestellt. 3.

      Nummerierte Listen sind eine Sammlung von Elementen mit ihren fortlaufenden Nummern. Die Art und Art der Nummerierung hängt von den Tag-Attributen ab

        , das zum Erstellen der Liste verwendet wird. Jedes Element in der nummerierten Liste ist durch ein Tag gekennzeichnet
      1. Wie nachfolgend dargestellt.

        1. Erster Punkt
        2. Zweiter Punkt
        3. Dritter Punkt

        Wenn Sie keine zusätzlichen Attribute angeben und einfach das Tag schreiben

          , dann ist der Standardwert eine Liste mit arabischen Zahlen (1, 2, 3,...), wie in Beispiel 11.3 gezeigt.

          Beispiel 11.3. Erstellen Sie eine nummerierte Liste

          Nummerierte Liste

          Arbeiten mit der Zeit

          1. Pünktlichkeit schaffen (Sie werden nie zu spät kommen);
          2. Heilmittel gegen Pünktlichkeit (Sie werden es nie eilig haben);
          3. Veränderung der Wahrnehmung von Zeit und Uhren.


          Das Ergebnis dieses Beispiels ist in Abb. dargestellt. 11.3.

          Reis. 11.3. Nummerierte Listenansicht

          Beachten Sie, dass eine nummerierte Liste auch eine automatische Einrückung oben, unten und links im Text hinzufügt.

          Als Nummerierungselemente können folgende Werte dienen:

          • Arabische Zahlen (1, 2, 3, ...);
          • lateinische Großbuchstaben (A, B, C, ...);
          • lateinische Kleinbuchstaben (a, b, c, ...);
          • große römische Ziffern (I, II, III, ...);
          • römische Kleinbuchstaben (i, ii, iii, ...).

          Um den Typ der nummerierten Liste anzugeben, verwenden Sie das Typattribut des Tags

            . Die möglichen Werte sind in der Tabelle angegeben. 11.2.

            Tisch 11.2. Arten von nummerierten Listen
            Listentyp HTML Quelltext Beispiel
            Arabische Zahlen

            1. Tscheburaschka
            2. Krokodil Gena
            3. Shapoklyak
            Großbuchstaben des lateinischen Alphabets

            A. Tscheburaschka
            B. Krokodil Gena
            C. Shapoklyak
            Kleinbuchstaben des lateinischen Alphabets

            A. Tscheburaschka
            B. Krokodil Gena
            C. Shapoklyak
            Römische Ziffern in Großbuchstaben

            I. Tscheburaschka
            II. Krokodil Gena
            III. Shapoklyak
            Römische Ziffern in Kleinbuchstaben

            ich. Tscheburaschka
            ii. Krokodil Gena
            iii. Shapoklyak

            Um eine Liste mit einem bestimmten Wert zu beginnen, verwenden Sie das Startattribut des Tags

              . Es spielt keine Rolle, auf welchen Typ die Liste mithilfe von type festgelegt wird, das Startattribut funktioniert sowohl mit römischen als auch mit arabischen Ziffern gleich. Beispiel 11.4 zeigt, wie man eine Liste mit römischen Großbuchstaben, beginnend mit acht, erstellt.

              Beispiel 11.4. Listennummerierung

              Römische Zahlen

              1. König Magnum XLIV
              2. König Siegfried XVI
              3. König Sigismund XXI
              4. König Husbrandt I


              Das Ergebnis dieses Beispiels ist in Abb. dargestellt. 11.4.

              Reis. 11.4. Nummerierte Liste mit römischen Ziffern

              Für Listen, deren Erstellung mittels HTML hier beschrieben wird, gelten die folgenden CSS-Regeln.

              Listenstiltyp

              Gibt eine Aufzählungs- oder Listennummerierung anstelle des Typattributs im HTML-Code an. Immobilienwerte für Listen mit Aufzählungszeichen kann sein:

              • Scheibe- Kreis, standardmäßig eingestellt.
              • Kreis- Kreis.
              • Quadrat- Quadrat.

              Bei nummerierten Listen werden der Eigenschaft normalerweise die folgenden Werte zugewiesen:

              • Dezimal- Arabische Ziffern, Standardwert.
              • niederrömisch- kleine römische Ziffern.
              • Oberroman- große römische Ziffern.
              • niedrigeres Alpha- lateinische Kleinbuchstaben.
              • oberes Alpha- lateinische Großbuchstaben.

              Außerdem kann für jeden Listentyp die Eigenschaft „list-style-type“ auf „none“ gesetzt werden, wodurch die Markierung vollständig entfernt wird.

              Für nummerierte Listen sind andere Werte verfügbar, z cjk-ideografisch legt die ideografische Nummerierung fest, Armenisch- traditionelles Armenisch und Dezimal-führende Null setzt die Nummerierung in römischen Ziffern, jedoch mit führender Null: 01, 02, 03... 09, allerdings werden diese und ähnliche Werte in der Praxis äußerst selten verwendet.

              Das folgende Beispiel zeigt drei Listen: eine nummerierte Liste mit traditioneller armenischer Nummerierung, eine Aufzählungsliste mit einem Kreis und eine nummerierte Liste mit ideografisch nummerierten Elementen.

              <a href="https://128gb.ru/de/oformlenie-spiskov-list-style-pravila-css-dlya-nastroiki-vneshnego-vida-spiska-na-html.html">Listet CSS auf</a>

              1. Erster Punkt
              2. Zweiter Punkt
              3. Dritter Punkt
              • Erster Punkt
              • Zweiter Punkt
              • Dritter Punkt
              1. Erster Punkt
              2. Zweiter Punkt
              3. Dritter Punkt


              Ergebnis.

              Die Farbe der Markierungen entspricht der Farbe des Texts in der durch die Eigenschaft angegebenen Liste Farbe.

              Bild im Listenstil

              Ermöglicht Ihnen, Ihr eigenes Bild als Listenmarkierung festzulegen. Wenn beispielsweise der Ordner mit der Listenseite die Datei enthält marker.png, die Sie verwenden möchten, dann sieht der Designcode wie folgt aus:

              Ul ( list-style-image: url("marker.png"); )

              Listenstil-Position

              Bestimmt die Position des Markers: Entweder wird er außerhalb des Randes des Listenelements platziert ( Listenstilposition: außerhalb), oder der Text wird umbrochen ( Listenstilposition: innen).

              Das folgende Beispiel zeigt den Unterschied zwischen diesen Werten. Im ersten Fall befindet sich der Marker innerhalb der Liste, im zweiten Fall wird er außerhalb der Liste platziert.

              Listenstil-Position

              • Schauen Sie sich einfach den Unterschied zwischen innen und außen an.
              • Im Falle von inside fügt sich der Marker direkt in die Liste ein, ohne deren Grenzen zu überschreiten und ohne das Layout zu beeinträchtigen. Der Text fließt um ihn herum, die Markierung scheint darin zu sein.
              • Der äußere Wert verschiebt die Markierung außerhalb der Liste.


              Als Ergebnis wird die folgende Seite erstellt:

              Listenstil

              Ermöglicht Ihnen, den Code zu verkürzen, indem Sie alle drei aufgelisteten Eigenschaften in eine Zeile schreiben. Die Regeln werden durch Leerzeichen getrennt geschrieben:

              Ul ( Listenstil: innen quadratisch; )

              Schauen wir uns ein Beispiel einer Seite mit drei Listen an. Die erste ist mit Zahlen im Format 01, 02 nummeriert, die zweite ist mit einem benutzerdefinierten Bild markiert (Datei marker.png im Ordner mit der Seite), die Markierung der dritten Liste ist deaktiviert.

              Der HTML-Code ist unten angegeben.

              Listenstil

              1. Erster Punkt
              2. Zweiter Punkt
              3. Dritter Punkt
              • Erster Punkt
              • Zweiter Punkt
              • Dritter Punkt
              1. Erster Punkt
              2. Zweiter Punkt
              3. Dritter Punkt


              Der Browser zeigt die folgende Seite an.


              Sehr oft muss man Nummerierung verwenden: beim Erstellen verschiedener Listen, Listen, beim Entwerfen eines Inhaltsverzeichnisses oder Inhaltsverzeichnisses usw.

              CSS verwendet Zähler, um den Nummerierungsprozess zu automatisieren.

              Beginnen wir mit einem einfachen Beispiel. Dann erstellen wir auf kompliziertere Weise eine verschachtelte Liste mit automatischer Nummerierung ihrer Elemente und Unterelemente.

              Zähleridentifikation

              Zuerst müssen Sie den Zähler identifizieren.

              Über die Eigenschaft counter-reset wird dem Zähler ein Name und ein Anfangswert zugewiesen. Der Name kann beliebig sein, darf aber nicht mit einer Zahl beginnen.

              Code-Auszug:

              Dieser Eintrag sagt das für das Tag Es wird ein Zähler namens Zahl mit einem Anfangswert von 3 installiert.

              Standardmäßig ist der Anfangswert des Zählers 0.

              Zählererhöhung

              Hierzu wird die Counter-Inkrement-Eigenschaft verwendet. Es wird auch verwendet, um Zählerinkremente anzugeben – die Zahl, um die der Zählerwert erhöht wird.

              Code-Auszug:

              body (Zähler-Reset: Nummer 3 ;)
              body p (Zählerinkrement: Nummer 3 ; }

              Dieser Codeausschnitt besagt, dass Absätze ( Etikett

              ) im Hauptteil des Dokuments werden mit dem Nummernzähler in 3er-Schritten nummeriert.

              Der erste Absatz erhält die Nummer 6, da der Anfangswert des Zählers 3 ist und sein Inkrement 3 beträgt.

              Der Standardwert für Zählerinkremente ist 1.

              Nun werden alle notwendigen Zählerparameter eingestellt: Name, Anfangswert, Inkrement und Element, das nummeriert wird. Weiter....

              Zähleranzeige

              Jetzt müssen Sie den Zählerwert anzeigen und die Regeln für seinen Standort festlegen. Dies geschieht mithilfe der Content-Eigenschaft und der Vorher- und Nachher-Pseudoelemente.

              Die Content-Eigenschaft fügt den Inhalt vor ( Vor) oder danach ( nach) des angegebenen Elements.

              Code-Auszug:

              body (Zähler-Reset: Nummer 3 ;)
              body p:after ( Counter-Inkrement: Nummer 3 ; Inhalt: „entspricht „Zähler(Anzahl)“.“ ;)

              Deshalb haben wir dem vorherigen Codeausschnitt eine Inhaltseigenschaft hinzugefügt, die das Wort „equals“ gefolgt vom Wert der Zählernummer und einem Punkt „.“ ausgibt. . All dies wird nach dem Absatzinhalt auf der Seite eingefügt ( Etikett

              ), was das After-Pseudoelement sagt.

              Zusammenfassend...

              Nachfolgend finden Sie das beschriebene Beispiel.

              Code-Auszug:






              2 mal 3


              3 mal 3


              4 mal 3


              5 mal 3




              Ergebnis:

              Verschachtelte Listen mit automatischer Nummerierung

              Schauen wir uns ein Beispiel für die Verwendung von Zählern an, um den Prozess der Nummerierung verschachtelter Listen zu automatisieren.

              Sowohl aus HTML als auch aus dem Studium von Listen in CSS sollten Sie bereits wissen, dass Listenelemente automatisch nummeriert werden. Aber diese Nummerierung ist die einfachste.

              Wie sieht es mit der automatischen Nummerierung von Unterabschnitten wie 1.1, 1.2, 2.1, 2.2 usw. aus?

              Dieses Problem wird durch den Einsatz von Zählern gelöst, mit denen Sie die Nummerierung verschachtelter Listen automatisieren können.

              Code-Auszug:





              Automatische Nummerierung in CSS


              1. Erstes Listenelement

                1. 1. Unterabsatz von Absatz 1

                2. Zweiter Unterabsatz des ersten Absatzes

              2. Zweiter Listenpunkt

                1. 1. Unterabsatz von Absatz 2

                2. Zweiter Unterabsatz des zweiten Absatzes

              3. Dritter Punkt auf der Liste

                1. Erster Unterabsatz von Absatz 3

                2. Zweiter Unterabsatz des dritten Absatzes

                3. Dritter Unterabsatz des 3. Absatzes




                Ergebnis:

                So automatisieren Sie die Nummerierung verschachtelter Listen!

                Vom Autor: Mit Webbrowsern können Sie Änderungen vornehmen Aussehen viele Elemente auf einer Seite mit mit CSS. Beim Rendern einiger Elemente auf der Seite weigern sich Browser jedoch hartnäckig, ihr Design zu ändern. Beispielsweise haben Formularelemente wie Dropdown-Listen (select), Optionsfelder (radio) und Kontrollkästchen (checkbox) jeweils ihr eigenes spezifisches Erscheinungsbild Betriebssystem, und Browser versuchen, Webformularen dieses Aussehen aufzuzwingen.

                Webbrowser legen außerdem fest, wie unnummerierte und nummerierte Listen angezeigt werden sollen. Browser machen es beispielsweise sehr schwierig, das Erscheinungsbild von Aufzählungszeichen für nicht nummerierte Listen und von Nummern für nummerierte Listen zu ändern. Natürlich gibt es mehrere CSS-Eigenschaften für die Arbeit mit Listen, wie zum Beispiel list-style-type, list-style-image und list-style-position. Aber selbst etwas Einfaches (wie das Ändern der Farbe der Zahlen in einer Liste) erfordert den Rückgriff auf ausgefeilte HTML/CSS-Problemumgehungen.

                Glücklicherweise können Sie Ihren nummerierten Listennummern durch die Kombination einiger weniger bekannter CSS-Eigenschaften das gewünschte Aussehen verleihen. Tatsächlich werden Sie nach der Lektüre dieses Tutorials in der Lage sein, die Schriftarten, Farben und fast alle anderen Attribute der Zahlen in einer nummerierten Liste zu ändern.

                Das gesamte Geheimnis besteht aus zwei Komponenten: erstens, die Standardnummern (Standardnummern) in der nummerierten Liste vollständig auszublenden und zweitens das Pseudoelement ::before zu verwenden, um diese Nummern wieder hinzuzufügen.

                1. Fügen Sie eine Klasse oder einen Bezeichner (ID) für die nummerierte Liste hinzu. Dies ist eine gute Idee, damit Sie später jede Liste identifizieren können, für die Sie Ihre eigenen Zähler erstellen möchten:

                1. Dies ist das erste Element
                2. Dies ist das zweite Element
                3. Dies ist das dritte Element
                4. Dies ist das vierte Element
                5. Dies ist das fünfte Element
                6. Dies ist das sechste Element

                < ol class = "custom-counter" >

                < / ol >

                Wenn Sie nur Tag-Selektoren wie ol oder li verwenden, erhalten Sie für alle nummerierten Listen auf der Seite dieselben Zähler mit demselben Erscheinungsbild.

                2. Deaktivieren Sie die Standardansicht der Listenmarkierung. Zunächst müssen Sie sicherstellen, dass der Browser keine Standarddarstellung für die Zähler hinzufügt. Die folgende Regel hilft Ihnen dabei:

                Benutzerdefinierter Zähler ( margin-left: 0; padding-right: 0; list-style-type: none; )

                Benutzerdefiniert – Zähler (

                margin-left: 0;

                padding-right: 0;

                Listenstiltyp: keiner;

                Diese Regel entfernt auch die Einrückung, die Browser am Anfang nummerierter Listen hinzufügen. Da einige Browser die Eigenschaft „margin“ zum Einrücken verwenden und andere die Eigenschaft „padding“, müssen Sie beide Eigenschaften auf Null setzen.

                3. Legen Sie einen Namen für die Counter-Inkrement-Eigenschaft der Listenelemente fest. In CSS gibt es eine Eigenschaft namens Counter-Inkrement. Hier können Sie einen Namen für Ihren Zähler festlegen. Dies bringt uns nichts Besonderes, außer dass wir unseren Zähler identifizieren können, wenn wir das Pseudoelement ::before verwenden (was wir im nächsten Schritt tun werden). Hier ist ein einfaches Codebeispiel zur Angabe des Zählernamens:

                Benutzerdefinierter Zähler li (Zählerinkrement: Schrittzähler;)

                Benutzerdefiniert – Zähler li (

                Zähler-Inkrement: Schrittzähler;

                In diesem Beispiel hat der Name Schrittzähler keine besondere Bedeutung. Es handelt sich nicht um einen Wert für eine CSS-Eigenschaft oder etwas anderes. Dies ist nur ein Name, den wir von nun an verwenden werden. Sie können sich einen beliebigen Namen ausdenken: „Step“, „Theke“ oder sogar „Flaschen Root Beer an der Wand“.

                4. Verwenden Sie das Pseudoelement ::before, um Zählerzahlen hinzuzufügen und diese zu formatieren:

                Benutzerdefinierter Zähler li::before ( Inhalt: Zähler(Schrittzähler); Rand rechts: 5 Pixel; Schriftgröße: 80 %; Hintergrundfarbe: RGB (200,200,200); Farbe: Weiß; Schriftstärke: Fett; Polsterung : 3px 8px; Randradius: 3px; )

                Benutzerdefiniert – Zähler li::before(

                Inhalt: Zähler (Schrittzähler);

                Rand – rechts: 5px;

                Polsterung: 3px 8px;

                Randradius: 3px;

                Mit dem Pseudoelement::before können Sie Inhalte vor einem Element einfügen. In unserem Fall wird der Inhalt vor dem Listenelement eingefügt. Du benutzt CSS-Eigenschaft content, um dem Browser mitzuteilen, welchen Inhalt er am Anfang des Listenelements einfügen soll. Dies können echte Wörter oder etwas sein, das vom Browser automatisch generiert wird.

                Hier verwenden wir counter(), das als Parameter den aus der Counter-Inkrement-Eigenschaft erhaltenen Bezeichner verwendet. Denken Sie daran, dass wir in Schritt 2 den Namen „step-counter“ für die Eigenschaft „counter-increment“ angegeben haben, wodurch wir dem Zähler einen Namen gegeben und den Browser angewiesen haben, für jedes Element der Liste einen Zähler zu verwenden. Der Zähler wird für jedes Element der Liste um eins erhöht, d. h. Als Ergebnis haben wir die Zahl 1 vor dem ersten Element der Liste, die Zahl 2 vor dem zweiten Element der Liste usw.

                Natürlich tun Browser dies normalerweise. Durch die Verwendung des Pseudoelements ::before können wir diese Zahlen jedoch auch auf eine Weise formatieren, die mit standardmäßigen nummerierten Listenelementen nicht möglich wäre. Im Wesentlichen werden alle anderen Eigenschaften in der obigen Regel verwendet, um der Theke einfach ein cooles Aussehen zu verleihen (z. B. Hintergrundfarbe, abgerundete Ecken, andere Schriftfarbe usw.). Diese Stile veranschaulichen nur einige der Möglichkeiten, wie Sie das Erscheinungsbild von Zahlen in nummerierten Listen ändern können. Und es gibt noch mehr, was Sie tun können. Nutzen Sie also gerne die Ihnen bekannten CSS-Tricks, um interessante, unterhaltsame und schöne nummerierte Listen zu erstellen.

                Ein fertiges Arbeitsbeispiel für die Verwendung dieser Technik finden Sie auf der Website



Freunden erzählen