logo

TechCodeview

Štýly zoznamu CSS

Zoznam v CSS určuje, ako sú obsah alebo položky uvedené určitým spôsobom, t. j. môžu byť usporiadané úhľadne alebo náhodne, čo pomáha pri vytváraní čistej webovej stránky. Pretože sú prispôsobivé a jednoducho sa s nimi manipuluje, možno ich použiť na usporiadanie veľkého množstva materiálu. Predvolený štýl zoznamu je bez okrajov. Zoznam možno rozdeliť do dvoch kategórií:

    Neusporiadaný zoznam:V predvolenom nastavení sú prvky zoznamu v neusporiadaných zoznamoch označené odrážkami, čo sú malé čierne krúžky.Objednaný zoznam:Prvky zoznamu v usporiadaných zoznamoch sú označené číslami a písmenami.

Nasledujúce vlastnosti zoznamu CSS sú k dispozícii na použitie pri ovládaní zoznamov CSS:

    Typ štýlu zoznamu:Táto vlastnosť sa používa na určenie vzhľadu značky položky zoznamu, ako je disk, znak alebo vlastný štýl počítadla.Obrázok v štýle zoznamu:Pomocou tohto parametra je možné špecifikovať obrázky, ktoré budú slúžiť ako značky položiek zoznamu.Pozícia štýlu zoznamu:Popisuje, kde by mal byť rámček označenia okolo poľa hlavného bloku.Štýl zoznamu:Štýl zoznamu je nakonfigurovaný pomocou tohto atribútu.

Teraz sa o týchto vlastnostiach dozvieme viac na príkladoch.

Vlastnosť typu štýlu zoznamu

Predvolený typ zoznamu značiek možno zmeniť na rôzne iné typy vrátane štvorca, kruhu, rímskych číslic, latinských písmen a mnohých ďalších. Položky v neutriedenom zozname sú označené okrúhlymi odrážkami (•), zatiaľ čo položky v usporiadanom zozname sú štandardne očíslované arabskými číslicami (1, 2, 3 atď.).

Označenia alebo odrážky sa odstránia, ak ich hodnotu nastavíme na žiadnu.

Syntax:

list-style-type:value;

odinštalovať angular cli

Hodnotu môžeme použiť takto:

  1. kruh
  2. desatinné číslo, napr.:1,2,3 atď
  3. desatinné nuly, napr. :01,02,03,04 atď.
  4. nižšia rímska
  5. horný rímsky
  6. nižšie alfa, napr. a, b, c atď
  7. horné alfa, napr. A, B, C atď
  8. námestie

Poznámka: V zozname sú zahrnuté aj predvolené výplne a okraj. Je potrebné pridať padding:0 a margin:0
    a
      značky na odstránenie tohto.

Príklad

Tento príklad ukazuje zoznam CSS s niekoľkými typmi a hodnotami v štýle zoznamu nastavenými na štvorec a horné alfa a mnoho.

 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>

Výkon

Štýly zoznamu CSS