Hvordan lage en stilisert nummerert liste i CSS

Lister er de vanlige komponentene som brukes i dokumenter til gruppedata. Mer spesifikt kalles de bestilte listene ofte nummererte lister. De grupperte dataene med en sekvens av tall, alfabeter, romersk eller mer. En beskrivende liste, en uordnet liste og en bestilt liste er de tre forskjellige typene lister som kan brukes i HTML.

Denne oppskrivningen vil spesifikt veilede om metoden for å lage og stilisere nummererte lister i CSS.

Hvordan lage nummerert liste i HTML?

For å lage en nummerert liste i HTML:

• • Legg til en div med klassenavnet “O_LIST”.
  • Spesifisere

    element for overskrift.

  • Etter det, legg til
    element for å lage en bestilt liste.
    1. Legg til flere
    2. elementer inne i
       Tagger som holder listeelementene:

bestilt liste

1. Html


2. CSS


3. JavaScript

Her er utgangen fra ovennevnte HTML -kode:

Hvordan du styliserer nummerert liste i CSS?

CSS “List-stil-type”Eiendom brukes til innstilling av listeelementmarkørene. Disse markørene er alfabet, romersk, gresk eller mer.

Analyser de gitte instruksjonene for styling av den nummererte listen i CSS.

Trinn 1: Spesifiser hver DIV -klasse

Nummerlisten kan brukes på stilene beskrevet nedenfor. Hver

Element er spesifisert med klassenavnet “Roman”,“l_roman”,“c_alphabets”, Og“L_alphabets”. Disse klassene er stylet med forskjellige tallstiler i 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




Trinn 2: Bruk egenskapen “List-Style-type” på DIV-klasser

La oss bruke “List-stil-type”Eiendom til alle klasser.

Stil “Roman” Div

ol.Roman
List-stil-type: øvre-romersk;



Klassen "Roman”Av DIV -elementet brukes på“List-stil-type”Eiendom med verdien”øvre-romersk”.

Stil “l_roman” div

ol.l_roman
List-stil-type: lavere-romersk;



Klassen “L_Roman”Av DIV -elementet brukes på“List-stil-type”Eiendom med verdien”lavere-romersk”.

Stil “c_alphabets” div

ol.c_alphabets
List-stil-type: øvre alfa;



Verdien "øvre alfa”Er satt for“List-stil-type" av "c_alphabets”Div.

Stil “l_alphabet” div

ol.l_alphabets
Liste-stil-type: Lower Alpha;



Tilsvarende "Nedre alfa”Verdien er spesifisert for klassen“L_alphabets”.

Her er utgangen fra den ovennevnte koden:


Trinn 3: Styliser “O_LIST” DIV

Bruk nå CSS -stylingegenskaper på O_List Div.

Stil “o_list” div

.o_list
Bakgrunnsfarge: #3C4048;
Farge: Ghostwhite;
polstring: 10px;
Padding-Left: 40px;
Font-Family: Verdana, Genève, Tahoma, Sans-Serif;



“.O_LIST”Henviser til O_List Div. “.”Er kjent som klasseleseren.

Følgende egenskaper brukes på DIV:

• • “bakgrunnsfarge”Eiendom setter elementets bakgrunnsfarge.
  • “farge”Eiendom brukes til innstillingen/påføring av skriftfargen.
  • “polstring”Attributt brukes til å legge til mellomrom rundt elementets innhold eller inne i grensen.
  • “Padding-venstre”Eiendom brukes til å sette plass som venstre side av elementets innhold.
  • “Font-familie”Er satt med“Verdana, Genève, Tahoma, Sans-serif”Verdier. Denne listen over verdier sikrer at hvis den første skriftstilen ikke støttes av nettleseren, vil den andre bli brukt.


Trinn 4: Styliser “ol” -elementet

.o_list ol
farge svart;
bakgrunnsfarge: #eaeaea;



Følgende CSS -egenskaper brukes på “ol”Element:

• • “farge”Eiendom brukes til innstilling av elementets farge.
  • “bakgrunnsfarge”Eiendom/attributt brukes til å angi/bruke elementets bakgrunnsfarge.

Så her er det endelige blikket på vår stiliserte nummererte liste:


Vi har samlet egenskapene for å stilisere en nummerert liste i CSS.

Konklusjon

Lister er de vanlige komponentene som brukes i ethvert dokument når de hjelper til med å gruppere elementer. Listene er av tre typer: bestilte lister, beskrivende lister og uordnede lister. De bestilte listene kalles ofte nummererte lister. Disse listeelementmarkørene kan styles som romersk, alfabet, gresk eller mer ved å bruke CSS-listestil-typen egenskap. I denne artikkelen demonstrerer vi prosedyren for å lage en stilisert nummerert liste i CSS med et praktisk eksempel.