Penjelasan terperinci tentang sifat gaya senarai CSS: jenis gaya senarai dan imej gaya senarai-tutorial css-php.cn

Penjelasan terperinci tentang sifat gaya senarai CSS: jenis gaya senarai dan imej gaya senarai

PHPz

Lepaskan： 2023-10-26 12:15:50

asal

2854 orang telah melayarinya

CSS 列表样式属性详解：list-style-type 和 list-style-image

Penjelasan terperinci tentang atribut gaya senarai CSS: jenis gaya senarai dan imej gaya senarai

Dalam reka bentuk web, senarai ialah elemen yang kerap digunakan, yang boleh membentangkan siri kandungan berkaitan dengan jelas. Untuk menjadikan persembahan senarai lebih cantik dan konsisten dengan tema halaman web, CSS menyediakan beberapa sifat untuk mengawal gaya senarai. Antaranya, atribut yang biasa digunakan termasuk senarai-style-type dan list-style-image.

atribut jenis gaya senarai

atribut jenis gaya senarai digunakan untuk menentukan jenis teg di hadapan item senarai. Ia boleh mempunyai nilai berikut:

cakera: titik pepejal (nilai lalai)
bulatan: titik berongga
segi: persegi pepejal
tiada: tiada tanda
perpuluhan: nombor (bertambah daripada perpuluhan) terkemuka-sifar: nombor berlapik sifar (nombor kurang daripada 10 akan bermula dengan 0)
roman bawah: angka Roman huruf kecil (i, ii, iii)
roman atas: angka Roman huruf besar (I, II , III)
alfa-rendah: huruf kecil (a, b, c)
alfa-atas: huruf besar (A, B, C)
bawah-greek: huruf kecil Yunani
atas-greek: huruf besar Yunani
Sebagai contoh, kami ingin menukar tanda di hadapan item senarai senarai tidak tertib kepada segi empat sama:

ul {
  list-style-type: square;
}

Salin selepas log masuk

atribut imej gaya senarai

atribut imej gaya senarai boleh digunakan untuk mentakrifkan hadapan item senarai Teg ialah imej tersuai. Anda boleh menggunakan fungsi URL() untuk merujuk fail imej sebagai markup. Kod sampel adalah seperti berikut:

ul {
  list-style-image: url("marker.png");
}

Salin selepas log masuk

Kod di atas akan menukar tanda di hadapan item senarai senarai tidak tersusun kepada gambar "marker.png".

Perlu diambil perhatian bahawa atribut imej gaya senarai akan mengatasi tetapan atribut jenis gaya senarai, iaitu apabila kedua-dua jenis gaya senarai dan imej gaya senarai ditetapkan untuk item senarai, hanya imej gaya senarai berkuat kuasa.

Contoh

Berikut ialah contoh lengkap yang menunjukkan cara menggunakan atribut senarai-gaya-jenis dan senarai-gaya-imej untuk menyesuaikan gaya senarai:

<!DOCTYPE html>
<html>
<head>
  <style>
    ul {
      list-style-image: url("marker.png");
    }
    
    ol {
      list-style-type: lower-roman;
    }
  </style>
</head>
<body>
  <h2>无序列表</h2>
  <ul>
    <li>列表项一</li>
    <li>列表项二</li>
    <li>列表项三</li>
  </ul>
  
  <h2>有序列表</h2>
  <ol>
    <li>列表项一</li>
    <li>列表项二</li>
    <li>列表项三</li>
  </ol>
</body>
</html>

Salin selepas log masuk

Atas ialah kandungan terperinci Penjelasan terperinci tentang sifat gaya senarai CSS: jenis gaya senarai dan imej gaya senarai. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!