Listahan ng CSS

Ang mga propety ng CSS listahan ay nagbibigay-daan sa iyo na ilagay, baguhin ang tanda ng item ng listahan, o gamitin ang larawan bilang tanda ng item ng listahan.

Listahan ng CSS

Sa isang paraan, kahit anong nilalaman na hindi naglalarawan ay maaaring ituring na listahan. Demograpiko, Sistemang Solar, ang Ancestral, Visita sa Menu, kahit ang lahat ng iyong mga kaibigan ay maaaring ipakita bilang isang listahan o listahan ng listahan.

Dahil ang listahan ay napakamarami, ito ay napakalalim, kaya't ang kawalan ng magandang estilo ng listahan sa CSS ay isang malaking pakinabang.

Uri ng Listahan

Ang pinakasimpleng paraan (at pinakadama) na maaaring maisaayos ang estilo ng listahan ay sa pamamagitan ng pagbabago ng uri ng tanda.

Halimbawa, sa isang walang order na listahan, ang tanda ng item ng listahan (marker) ay lalabas sa tabi ng bawat item ng listahan. Sa isang may order na listahan, ang tanda ay maaaring maging alpabeto, numero o isang simbolo na bahagi ng sistema ng pagbilang.

Para sa pagbabago ng uri ng tanda ng item ng listahan, maaaring gamitin ang propety: list-style-type:

ul {list-style-type : square}

Ang deklarasyon sa itaas ay nagtatakda ng tanda ng item ng walang order bilang square.

Larawan ng Item ng Listahan

Minsan, ang mga pangkaraniwang tanda ay hindi sapat. Maaring gusto mong gamitin ang isang larawan bilang tanda, na maaaring gamitin ang: list-style-image ang propety na ginagawa:

ul li {list-style-image : url(xxx.gif)}

Mga simpleng paggamit ng isang halaga ng url(), maaaring gamitin ang larawan bilang tanda.

Lokasyon ng Tanda ng Listahan

CSS2.1 ay maaaring tiyakin kung ang tanda ay lalabas sa labas o loob ng nilalaman ng listahan. Ito ay ginagamit sa pamamagitan ng: list-style-position Tapos na.

Maliit na Listahan ng Estilo

Para sa pagkakasagana, maaaring ipagsama ang tatlong listahan ng estilo ng listahan sa isang madaling gamitin na propety:list-styletulad nito:

li {list-style : url(example.gif) square inside}

Ang halaga ng list-style ay maaaring ilista kahit anong order, at lahat ng halaga ay maaaring ipagwalang bahala. Sa sandaling binigay ang isang halaga, ang iba ay pupunan ng kanilang default na halaga.

Halimbawa ng CSS List:

Sa walang order na listahan, ang mga tanda ng iba't ibang uri ng listahan
Ang halimbawa na ito ay nagpapakita ng lahat ng uri ng markang listahan sa CSS.
Sa pagkakasunod-sunod na listahan, ang mga tanda ng iba't ibang uri ng item ng listahan
Ang halimbawa na ito ay nagpapakita ng lahat ng uri ng markang listahan sa CSS.
Lahat ng uri ng markang listahan
Ang halimbawa na ito ay nagpapakita ng lahat ng uri ng markang listahan sa CSS.
Gamitin ang imaheng markang listahan
Ang halimbawa na ito ay nagpapakita kung paano gamitin ang imaheng markang listahan.
Ilagay ang markang listahan
Ang halimbawa na ito ay nagpapakita kung saan ilagay ang markang listahan.
Idefinir ang lahat ng atribute ng listahan sa isang pahayag
Ang halimbawa na ito ay nagpapakita kung paano ilagay ang lahat ng atribute na ginamit sa listahan sa isang maliit na atribute.

Atribute ng Listahan ng CSS (list)

Atribute Paglalarawan
list-style Maliit na Atribute. Ginagamit upang ilagay ang lahat ng atribute na ginamit sa listahan sa isang pahayag.
list-style-image Iset ang imaheng markang itinalaga sa listahan.
list-style-position Iset ang posisyon ng markang itinalaga sa listahan.
list-style-type Iset ang uri ng markang itinalaga sa listahan.
marker-offset