Rumah >hujung hadapan web >tutorial css >Penjelasan terperinci tentang sifat gaya senarai CSS: jenis gaya senarai dan imej gaya senarai

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

PHPzasal: 2023-10-26 12:15:502824semak imbas

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;
}

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");
}

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>

Dalam kod di atas, teg di hadapan senarai item senarai tidak tersusun Imej ini ditetapkan kepada "marker.png" melalui sifat senarai-gaya-imej. .

Ringkasnya, dengan menggunakan atribut jenis gaya senarai dan imej gaya senarai, kami boleh menyesuaikan gaya item senarai dengan mudah untuk menjadikan senarai lebih diperibadikan dan cantik di halaman web. Di atas adalah analisis terperinci sifat gaya senarai CSS saya harap ia akan membantu anda!

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!

css

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Petua pengoptimuman harta bar kemajuan CSS: kemajuan dan nilaiArtikel seterusnya：Petua pengoptimuman harta bar kemajuan CSS: kemajuan dan nilai

Artikel berkaitan

Lihat lagi

CSS 列表样式的实例讲解