So erstellen Sie eine stilisierte nummerierte Liste in CSS

Listen sind die gängigen Komponenten, die in Dokumenten verwendet werden, um Daten zu gruppieren. Insbesondere werden die bestellten Listen oft als nummerierte Listen bezeichnet. Sie gruppierten die Daten mit einer Folge von Zahlen, Alphabeten, römisch oder mehr. Eine beschreibende Liste, eine ungeordnete Liste und eine geordnete Liste sind die drei verschiedenen Arten von Listen, die in HTML verwendet werden können.

In diesem Artikel wird speziell zur Methode zum Erstellen und Stylieren von nummerierten Listen in CSS geführt.

So erstellen Sie eine nummerierte Liste in HTML?

Zum Erstellen einer nummerierten Liste in HTML:

• • Fügen Sie ein Div mit dem Klassennamen hinzu “O_LIST”.
  • Angeben

    Element zum Übergang.

  • Danach hinzufügen
    Element zum Erstellen einer bestellten Liste.
    1. Mehrfach hinzufügen
    2. Elemente im Inneren der
       Tags, die die Listenelemente enthalten:

Bestellliste

1. Html


2. CSS


3. JavaScript

Hier ist die Ausgabe des oben genannten HTML -Code:

So stylieren Sie die nummerierte Liste in CSS?

CSS “Listenstil-TypDie Eigenschaft wird für die Einstellung der Listenelementmarkierungen verwendet. Diese Marker sind Alphabet, Roman, Griechisch oder mehr.

Analysieren Sie die angegebenen Anweisungen zum Styling der nummerierten Liste in CSS.

Schritt 1: Geben Sie jede Div -Klasse an

Die Zahlenliste kann auf die unten beschriebenen Stile angewendet werden. Jede

Element wird mit dem Klassennamen angegeben “römisch","l_roman","C_alphabets", Und "L_alphabets”. Diese Klassen sind mit unterschiedlichen Zahlenstilen in CSS gestaltet:



1. Html


2. CSS


3. JavaScript








1. Html


2. CSS


3. JavaScript








1. Html


2. CSS


3. JavaScript








1. Html


2. CSS


3. JavaScript




Schritt 2: Bewerben Sie die Eigenschaft im Typ „Listenstil“ auf Div-Klassen

Lassen Sie uns das anwenden "Listenstil-TypEigentum an allen Klassen.

Stil „römischer“ Div

ol.römisch
Listenstil-Typ: Oberroman;



Die Klasse "römisch"Des Divelelements wird auf das angewendet"Listenstil-Typ”Eigenschaft mit dem Wert“Oberrömer”.

Stil "l_roman" div

ol.l_roman
Listenstil-Typ: Unter-Römer;



Die Klasse “L_römisch"Des Divelelements wird auf das angewendet"Listenstil-Typ”Eigenschaft mit dem Wert“Unterranger”.

Stil "c_alphabets" div

ol.c_alphabets
Listenstil-Typ: Upper-Alpha;



Der Wert "Upper-Alpha”Ist für die“ eingestellt “Listenstil-Typ" des "C_alphabets”Div.

Stil "l_alphabet" Div

ol.l_alphabets
Listenstil-Typ: Lower-Alpha;



In ähnlicher Weise die “Lower-Alpha"Wert wird für die Klasse angegeben"L_alphabets”.

Hier ist die Ausgabe des oben genannten Code:


Schritt 3: Stylize die "O_List" Div

Wenden Sie nun CSS -Stylingeigenschaften auf die O_List Div an.

Stil "O_List" Div

.o_list
Hintergrundfarbe: #3c4048;
Farbe: Ghostwhite;
Polsterung: 10px;
Padding-Links: 40px;
Schriftfamilie: Verdana, Genf, Tahoma, Sans-Serif;



Der ".O_LIST”Bezieht sich auf die O_List Div. Der ".”Wird als Klassenauswahl bekannt.

Die folgenden Eigenschaften werden auf die DIV angewendet:

• • “HintergrundfarbeDie Eigenschaft legt die Hintergrundfarbe des Elements fest.
  • “FarbeEigenschaft wird für die Einstellung/Anwendung der Schriftfarbe verwendet.
  • “PolsterungDas Attribut wird zum Hinzufügen von Leerzeichen um den Inhalt des Elements oder innerhalb des Randes verwendet.
  • “Padding-LinksEigenschaft wird verwendet, um den Raum als linke Seite des Inhalts des Elements festzulegen.
  • “Schriftfamilie”Wird mit dem" eingestellt "Verdana, Genf, Tahoma, Sans-Serif" Werte. Diese Werteliste stellt sicher, dass der andere angewendet wird, wenn der erste Schriftstil nicht vom Browser unterstützt wird, der andere angewendet wird.


Schritt 4: Stylize das "OL" -Element

.o_list ol
Farbe: Schwarz;
Hintergrundfarbe: #eaeaa;



Die folgenden CSS -Eigenschaften werden auf das angewendetol" Element:

• • “FarbeDie Eigenschaft wird für die Einstellung der Farbe des Elements verwendet.
  • “HintergrundfarbeEigenschaft/Attribut wird verwendet, um die Hintergrundfarbe des Elements festzulegen/anzuwenden.

Hier ist der letzte Blick auf unsere stilisierte nummerierte Liste:


Wir haben die Eigenschaften zusammengestellt, um eine nummerierte Liste in CSS zu stylieren.

Abschluss

Listen sind die gängigen Komponenten, die in jedem Dokument verwendet werden, um Elemente zu gruppieren. Die Listen sind drei Typen: Bestellte Listen, beschreibende Listen und ungeordnete Listen. Die bestellten Listen werden oft als nummerierte Listen bezeichnet. Diese Listenartikelmarkierungen können als römisch, alphabet, griechisch oder mehr bezeichnet werden. In diesem Artikel zeigen wir das Verfahren, um eine stilisierte nummerierte Liste in CSS mit einem praktischen Beispiel zu erstellen.