daftar gaya CSS (ul)
Peran CSS Daftar Properti adalah sebagai berikut:
- Mengatur item daftar yang berbeda ditandai sebagai daftar memerintahkan
- Mengatur item daftar yang berbeda ditandai sebagai daftar unordered
- Mengatur daftar gambar barang penanda
daftar
Dalam HTML, ada dua jenis daftar:
- Unordered daftar - daftar item ditandai dengan grafis khusus (seperti bintik hitam, kotak-kotak kecil, dll)
- daftar memerintahkan - daftar item ditandai dengan angka atau huruf
Dengan CSS, Anda bisa daftar gaya lebih lanjut, dan dapat membuat penanda daftar gambar barang.
Berbeda item daftar penanda
list-style-type atribut menentukan jenis item daftar penanda adalah ::
contoh
ul.b {list-style-type: square;}
ol.c {list-style-type: upper-roman;}
ol.d {list-style-type: lower-alpha;}
Coba »
Beberapa nilai yang daftar unordered, dan beberapa adalah daftar memerintahkan.
Sebagai daftar gambar barang penanda
Untuk menentukan daftar gambar barang penanda, menggunakan properti list-style-image:
Contoh di atas menunjukkan tidak sama di semua browser, IE dan Opera menampilkan tag gambar dari Firefox, Chrome dan Safari sedikit lebih tinggi.
Jika Anda ingin menempatkan gambar yang sama dari logo di semua browser, Anda harus menggunakan solusi kompatibilitas browser, sebagai berikut
Browser Compatibility Solusi
Juga di semua browser, contoh berikut akan menampilkan tag gambar:
contoh
{
list-style-type: none;
padding: 0px;
margin: 0px;
}
ul li
{
background-image: url(sqpurple.gif);
background-repeat: no-repeat;
background-position: 0px 5px;
padding-left: 14px;
}
Coba »
Contoh menjelaskan:
- ul:
- Mengatur list-style-type tidak menghapus item daftar penanda
- Pengaturan padding dan margin 0px (kompatibilitas browser)
- Semua ul li:
- Mengatur URL gambar, dan mengatur hanya muncul sekali (tidak ada pengulangan)
- Anda perlu mencari posisi gambar (0px meninggalkan dan 5px vertikal)
- Dengan atribut padding-kiri untuk teks dalam daftar
Daftar - properti singkat
Anda dapat menentukan daftar semua properti di satu properti. Ini disebut properti steno.
Menggunakan properti singkatan untuk daftar, daftar atribut gaya ditetapkan sebagai berikut:
Jika Anda menggunakan nilai properti singkatan dari order:
- list-style-type
- list-style-posisi (untuk petunjuk, lihat tabel atribut CSS berikut)
- list-style-image
Jika nilai-nilai ini kehilangan satu dari urutan yang tersisa masih ditentukan, tidak masalah.
contoh yang lebih
Semua berbeda item daftar penanda
Contoh ini menunjukkan semua daftar CSS item yang berbeda penanda.
Semua Daftar CSS Properti
milik | deskripsi |
---|---|
list-style | properti singkat. Untuk daftar semua properti disediakan dalam sebuah pernyataan |
list-style-image | gambar diatur untuk menandatangani daftar item. |
list-style-posisi | Mengatur posisi dalam daftar item daftar penanda. |
list-style-type | Mengatur jenis item daftar bendera. |