logo

TechCodeview

Stiluri de listă CSS

Lista în CSS determină modul în care conținutul sau elementele sunt listate într-un anumit mod, adică pot fi aranjate fie ordonat, fie aleatoriu, ceea ce ajută la crearea unei pagini web curate. Deoarece sunt adaptabile și ușor de manevrat, pot fi folosite pentru a organiza cantități mari de material. Stilul implicit al listei este fără margini. Lista poate fi împărțită în două categorii:

    Lista neordonata:În mod implicit, elementele listei din listele neordonate sunt notate cu marcatori, care sunt cercuri negre minuscule.Lista ordonata:Elementele listei din liste ordonate sunt identificate prin cifre și litere.

Următoarele proprietăți ale listei CSS sunt disponibile pentru utilizare în controlul listelor CSS:

    Tip de stil de listă:Această proprietate este utilizată pentru a determina aspectul marcatorului elementului din listă, cum ar fi un disc, un caracter sau un stil de contor personalizat.Imagine-stil-listă:Imaginile care vor servi drept marcatori de elemente de listă pot fi specificate utilizând acest parametru.Listă-stil-poziție:Descrie unde ar trebui să fie caseta de marcare în jurul casetei de bloc principal.Stil listă:Stilul listei este configurat cu acest atribut.

Vom afla acum mai multe despre aceste caracteristici prin exemple.

Proprietate de tip listă

Tipul de marcator implicit al listei poate fi modificat într-o varietate de alte tipuri, inclusiv pătrat, cerc, cifre romane, litere latine și multe altele. Intrările dintr-o listă neordonată sunt notate cu marcatoare rotunde (•), în timp ce articolele dintr-o listă ordonată sunt numerotate implicit folosind cifre arabe (1, 2, 3 etc.).

Marcajele sau gloanțele vor fi eliminate dacă le setăm valoarea la niciunul.

Sintaxă:

list-style-type:valoare;

mockito oricând

Putem folosi valoarea după cum urmează:

  1. cerc
  2. zecimal, de exemplu:1,2,3 etc
  3. zerouri zecimale, de exemplu:01,02,03,04 etc
  4. inferior-roman
  5. sus-roman
  6. alfa inferior, de exemplu, a,b,c etc
  7. alfa superioară, de exemplu, A, B, C etc
  8. pătrat

Notă: umplutura și marja implicite sunt de asemenea incluse în listă. Este necesar să adăugați padding:0 și margin:0 la
    și
      etichete pentru a elimina acest lucru.

Exemplu

Acest exemplu arată o listă CSS cu mai multe tipuri și valori în stil de listă setate la pătrat și upper-alpha și multe.

 Example for CSS Lists .num{ list-style-type:decimal; } .alpha{ list-style-type:upper-alpha; } .circle{ list-style-type:circle; } .square{ list-style-type:square; } .disc{ list-style-type:disc; } <h2> Ordered Lists </h2> <ol class="order"> <li>ONE</li> <li>TWO</li> </ol> <h2> Unordered lists </h2> <ul> <li>ONE</li> <li>TWO</li> </ul>

Ieșire

Stiluri de listă CSS