CSS:n lista määrittää, miten sisältö tai kohteet on listattu tietyllä tavalla, eli ne voidaan järjestää joko siististi tai satunnaisesti, mikä auttaa luomaan puhtaan verkkosivun. Koska ne ovat mukautuvia ja helppoja käsitellä, niitä voidaan käyttää suurten materiaalimäärien järjestämiseen. Luettelon oletustyyli on reunaton. Luettelo voidaan jakaa kahteen luokkaan:

Järjestämätön lista:Järjestämättömien luetteloiden luetteloelementit on oletusarvoisesti merkitty luettelomerkeillä, jotka ovat pieniä mustia ympyröitä.Tilauslista:Järjestetyissä luetteloissa olevat luetteloelementit on merkitty numeroilla ja kirjaimilla.

Seuraavat CSS-luetteloominaisuudet ovat käytettävissä CSS-luetteloiden hallinnassa:

List-tyylinen tyyppi:Tätä ominaisuutta käytetään määrittämään luettelon alkion merkin ulkoasu, kuten levy, merkki tai mukautettu laskurityyli.Listatyylinen kuva:Tällä parametrilla voidaan määrittää kuvat, jotka toimivat luettelon merkintöinä.Listatyylinen sijainti:Se kuvaa, missä merkkilaatikon tulee olla päälohkolaatikon kohdalla.Listatyyli:Luettelotyyli on määritetty tällä määritteellä.

Opimme nyt lisää näistä ominaisuuksista esimerkkien avulla.

Luettelotyylinen ominaisuus

Merkin oletusluettelotyyppi voidaan vaihtaa useisiin muihin tyyppeihin, mukaan lukien neliö, ympyrä, roomalaiset numerot, latinalaiset kirjaimet ja monet muut. Järjestämättömän luettelon merkinnät on merkitty pyöreillä luettelomerkeillä (•), kun taas järjestetyn luettelon kohteet on numeroitu oletusarvoisesti arabialaisilla numeroilla (1, 2, 3 jne.).

Merkinnät tai luodit poistetaan, jos asetamme niiden arvoksi none.

Syntaksi:

list-style-type:arvo;

kirjaudu ulos google-tilistä Androidissa

Voimme käyttää arvoa seuraavasti:

1. ympyrä
2. desimaali, esim.:1,2,3 jne
3. desimaali-alkunollat, esim. :01,02,03,04 jne
4. alempi-roomalainen
5. ylä-roomalainen
6. alempi alfa, esim. a,b,c jne
7. ylempi alfa, esim. A, B, C jne
8. neliö

Huomautus: Oletustäyttö ja marginaali sisältyvät myös luetteloon. Kohteeseen on lisättävä täyte:0 ja marginaali:0

ja
tunnisteita tämän poistamiseksi.

Esimerkki

Tämä esimerkki näyttää CSS-luettelon, jossa on useita luettelotyyppejä ja arvoja, jotka on asetettu neliöiksi ja ylemmäksi alfaksi ja useiksi.

 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> 

Lähtö