Jak utworzyć stylizowaną listę ponumerowaną w CSS

Listy to wspólne komponenty wykorzystywane w dokumentach do grupowania danych. Mówiąc dokładniej, uporządkowane listy są często nazywane listami numerowanymi. Grupowali dane z sekwencją liczb, alfabetów, rzymskich lub więcej. Lista opisowa, lista nieopisana i uporządkowana lista to trzy różne typy list, które mogą być używane w HTML.

Ten zapis będzie specjalnie poprowadzony na temat metody tworzenia i stylizowania list ponurych w CSS.

Jak utworzyć numerowaną listę w HTML?

W celu utworzenia listy ponumerowanej w HTML:

• • Dodaj div z nazwą klasy „O_LIST".
  • Sprecyzować

    element do nagłówka.

  • Następnie dodaj
    element do utworzenia uporządkowanej listy.
    1. Dodaj wiele
    2. elementy wewnątrz
       Tagi, które zawierają pozycje listy:

uporządkowana lista

1. Html


2. CSS


3. JavaScript

Oto dane wyjściowe powyższego kodu HTML:

Jak stylizować numerowaną listę w CSS?

CSS „Typ w stylu listy„Własność jest wykorzystywana do ustawienia znaczników elementów listy. Te markery to alfabet, rzymski, grecki lub więcej.

Przeanalizuj podane instrukcje dotyczące stylizacji listy ponumerowanej w CSS.

Krok 1: Podaj każdą klasę DIV

Lista liczb można zastosować do stylów opisanych poniżej. Każdy

Element jest określony o nazwie klasy „rzymski”,„L_ROMAN”,„C_alphabets", I "L_alphabets". Klasy te są stylizowane z różnymi stylami liczb w CSS:



1. Html


2. CSS


3. JavaScript








1. Html


2. CSS


3. JavaScript








1. Html


2. CSS


3. JavaScript








1. Html


2. CSS


3. JavaScript




Krok 2: Zastosuj właściwość „w stylu listy” do klas DIV

Zastosujmy „Typ w stylu listy„Własność dla wszystkich klas.

Styl „rzymski” div

ol.Roman
Typ w stylu listy: górny rzymski;



Klasa "rzymski”Elementu DIV jest stosowany do„Typ w stylu listy„Własność o wartości”górna-rzymska".

Styl „l_roman” div

ol.l_roman
Typ w stylu listy: niższy-rzymski;



Klasa „L_rzymski”Elementu DIV jest stosowany do„Typ w stylu listy„Własność o wartości”niższy-rzymski".

Styl „c_alphabets” div

ol.c_alphabets
Typ w stylu listy: Upper-Alfa;



Wartość "górna alfa”Jest ustawiony dla„Typ w stylu listy”C_alphabets„Div.

Styl „l_alphabet” div

ol.l_alphabets
Typ w stylu listy: niższa alfa;



Podobnie „„ „Lower-alfa„Wartość jest określona dla klasy”L_alphabets".

Oto dane wyjściowe wyżej wymienionego kodu:


Krok 3: stylizuj „O_LIST” div

Teraz zastosuj właściwości stylizacji CSS do O_LIST DIV.

Styl „O_LIST” DIV

.O_LIST
kolor tła: #3C4048;
Kolor: Ghost White;
Wyściółka: 10px;
Padding-Left: 40px;
Font-Family: Verdana, Genewa, Tahoma, Sans-Serif;



„„.O_LIST”Odnosi się do Div O_LIST. „„.”Jest znany jako selektor klasowy.

Następujące właściwości są stosowane do Div:

• • "kolor tła”Właściwość ustawia kolor tła elementu.
  • "kolor„Właściwość jest używana do ustawienia/stosowania koloru czcionki.
  • "wyściółka„Atrybut służy do dodawania przestrzeni wokół zawartości elementu lub wewnątrz granicy.
  • "Padding-Left„Właściwość służy do ustawiania przestrzeni jako lewej strony zawartości elementu.
  • "rodzina czcionek”Jest ustawiony z„Verdana, Genewa, Tahoma, Sans-Serif”Wartości. Ta lista wartości zapewnia, że ​​jeśli pierwszy styl czcionki nie będzie obsługiwany przez przeglądarkę, druga zostanie zastosowana.


Krok 4: stylizuj element „ol”

.o_list ol
czarny kolor;
kolor tła: #Eaaea;



Następujące właściwości CSS są stosowane do „ol" element:

• • "kolor„Właściwość jest wykorzystywana do ustawienia koloru elementu.
  • "kolor tła”Właściwość/atrybut służy do ustawiania/zastosowania koloru tła elementu.

Oto ostatnie spojrzenie na naszą stylizowaną listę ponumerowaną:


Zebraliśmy właściwości do stylizowania listy ponumerowanej w CSS.

Wniosek

Listy to wspólne komponenty, które są wykorzystywane w dowolnym dokumencie, ponieważ pomagają w grupowaniu elementów. Listy są trzech typów: uporządkowane listy, listy opisowe i listy nieopisane. Uporządkowane listy są często wywoływane listy numerowane. Te markery przedmiotów można zaprojektować jako Roman, Alphabet, Grecki lub więcej, wykorzystując nieruchomość typu CSS List Style. W tym artykule pokazujemy procedurę utworzenia stylizowanej listy ponumerowanej w CSS z praktycznym przykładem.