Gaya daftar - Trik CSS

Anonim

The list-styleproperti adalah properti singkatan yang set nilai-nilai selama tiga terkait daftar yang berbeda sifat dalam satu deklarasi:

ul ( list-style: || || ; )

Berikut contoh sintaks:

ul ( list-style: square outside none; )

Yang mana akan sama dengan versi longhand berikut:

ul ( list-style-type: square; list-style-position: outside; list-style-image: none; )

Singkatnya, jika ada nilai yang dihilangkan, mereka akan kembali ke keadaan semula.

Nilai untuk list-style-type

The list-style-typeproperti mendefinisikan jenis daftar dengan menetapkan isi dari masing-masing penanda, atau peluru, pada daftar. Nilai kata kunci yang dapat diterima untuk list-style-typemenyertakan:

  • disc
  • circle
  • square
  • decimal
  • decimal-leading-zero
  • lower-roman
  • upper-roman
  • lower-greek
  • lower-latin
  • upper-latin
  • armenian
  • georgian
  • lower-alpha
  • upper-alpha
  • none

MDN memiliki daftar yang lebih lengkap. Nilai non-kata kunci diperkenalkan di CSS3, dan mulai mendapatkan dukungan, seperti:

ul ( list-style-type: "→"; )

Demo berikut menyertakan sekelompok daftar tidak berurutan untuk menunjukkan setiap nilai kata kunci:

The list-style-typeproperti berlaku untuk semua daftar, dan untuk setiap elemen yang diatur untuk display: list-item.

Warna penanda daftar akan menjadi apa pun warna elemen yang dihitung (disetel melalui colorproperti).

Nilai untuk list-style-position

The list-style-positionmendefinisikan properti dimana posisi daftar penanda, dan ia menerima salah satu dari dua nilai: insideatau di luar. Ini ditunjukkan di bawah dengan paddingdihapus dari daftar dan perbatasan merah kiri ditambahkan:

Nilai untuk list-style-image

The list-style-imageproperti menentukan apakah daftar penanda diatur dengan gambar, dan menerima nilai “tidak” atau URL yang menunjuk ke gambar:

ul ( list-style-image: url(images/bullet.png.webp); )

Lebih Banyak Demo

Dukungan Browser

Chrome Safari Firefox Opera YAITU Android iOS
Bekerja Bekerja Bekerja Bekerja Bekerja Bekerja Bekerja

IE6 / 7 tidak mendukung semua nilai kata kunci untuk list-style-typedan juga memiliki bug di mana item daftar mengambang tidak menampilkan penanda daftar mereka. Ini diatasi dengan menggunakan gambar latar belakang (bukan list-style-image) pada item daftar.