Daftar CSS
- marker-offset Font CSS
- Hal Sebelumnya Ringkasan Model Kisi CSS
Properti daftar CSS memungkinkan Anda menempatkan, mengubah tanda item daftar, atau menggunakan gambar sebagai tanda item daftar.
Daftar CSS
Dalam arti yang salah, setiap konten yang bukan teks deskriptif dapat dianggap sebagai daftar. Sensus, sistem surya, silsilah, daftar kunjungan, bahkan semua teman Anda dapat diwakili sebagai daftar atau daftar dalam daftar.
Karena daftar begitu beragam, hal ini membuat daftar sangat penting, sehingga kekurangan gaya daftar yang kaya di CSS sebenarnya adalah sebuah kelemahan besar.
Jenis daftar
Untuk mempengaruhi gaya daftar, cara paling sederhana (dan mendukung paling luas) adalah mengubah jenis tanda.
Contoh, dalam daftar tak berurutan, tanda item daftar (marker) adalah titik yang muncul di sebelah setiap item daftar. Dalam daftar berurutan, tanda mungkin huruf, angka, atau simbol dalam sistem penghitungan lainnya.
Untuk mengubah jenis tanda yang digunakan untuk item daftar, dapat digunakan properti: Atur posisi tanda daftar item dalam daftar.:
ul {list-style-type : square}
Deklarasi di atas mengatur tanda item daftar dalam daftar tak berurutan menjadi kotak.
Gambar item daftar
Kadang-kadang, tanda biasa tidak cukup. Anda mungkin ingin menggunakan gambar untuk setiap tanda, yang dapat digunakan: Atribut singkat. Digunakan untuk mengatur semua properti yang digunakan dalam daftar dalam sebuah deklarasi. properti seperti ini:
ul li {list-style-image : url(xxx.gif)}
Dengan hanya menggunakan nilai url(), dapat menggunakan gambar sebagai tanda.
Lokasi tanda daftar
CSS2.1 dapat menentukan tanda muncul di luar atau di dalam konten item daftar. Ini adalah dengan cara: Atur gambar sebagai tanda daftar item. Selesai.
Gaya daftar singkat
Untuk keperluan sederhana, dapat digabungkan 3 properti gaya daftar di atas ke properti yang nyaman untuk digunakan:Deskripsiseperti ini:
li {list-style : url(example.gif) square inside}
Nilai list-style dapat ditampilkan dalam urutan apapun, dan nilai ini dapat diabaikan. Jika hanya satu nilai yang disediakan, nilai lainnya akan diisi dengan nilai default.
Contoh CSS daftar:
- Tanda daftar berbeda dalam daftar tak berurutan
- Contoh ini menunjukkan semua jenis tanda daftar item yang berbeda di CSS.
- Tanda item daftar berbeda dalam daftar berurutan
- Contoh ini menunjukkan semua jenis tanda daftar item yang berbeda di CSS.
- Contoh ini menunjukkan semua jenis tanda daftar item yang berbeda di CSS.
- Semua Jenis Tanda Daftar Item
- Contoh ini menunjukkan semua jenis tanda daftar item yang berbeda di CSS.
- Menggunakan Gambar sebagai Tanda Daftar Item
- Contoh ini menunjukkan bagaimana menggunakan gambar sebagai tanda daftar item.
- Menempatkan Tanda Daftar
- Contoh ini menunjukkan tempat menempatkan tanda daftar.
- Definiskan semua properti daftar dalam deklarasi
Contoh ini menunjukkan bagaimana mengatur semua properti yang digunakan untuk daftar dalam properti singkat.
| Properti Daftar CSS (list) | Atribut |
|---|---|
| Deskripsi | list-style |
| Atribut singkat. Digunakan untuk mengatur semua properti yang digunakan dalam daftar dalam sebuah deklarasi. | list-style-image |
| Atur gambar sebagai tanda daftar item. | list-style-position |
| Atur posisi tanda daftar item dalam daftar. | list-style-type |
| Atur jenis tanda daftar item dalam daftar. |
- marker-offset Font CSS
- Hal Sebelumnya Ringkasan Model Kisi CSS
