Daftar CSS
Daftar Tidak Terurut:
- Kopi
- teh
- minuman bersoda
- Kopi
- teh
- minuman bersoda
Daftar yang dipesan:
- Kopi
- teh
- minuman bersoda
- Kopi
- teh
- minuman bersoda
Daftar HTML dan Properti Daftar CSS
Dalam HTML, ada dua jenis daftar utama:
- daftar tidak berurutan (<ul>) - item daftar ditandai dengan peluru
- daftar terurut (<ol>) - item daftar ditandai dengan angka atau huruf
Properti daftar CSS memungkinkan Anda untuk:
- Tetapkan penanda item daftar yang berbeda untuk daftar yang dipesan
- Tetapkan penanda item daftar yang berbeda untuk daftar yang tidak berurutan
- Tetapkan gambar sebagai penanda item daftar
- Tambahkan warna latar belakang ke daftar dan daftar item
Penanda Item Daftar yang Berbeda
Properti list-style-typemenentukan jenis penanda item daftar.
Contoh berikut menunjukkan beberapa penanda item daftar yang tersedia:
Contoh
ul.a {
list-style-type: circle;
}
ul.b {
list-style-type: square;
}
ol.c {
list-style-type: upper-roman;
}
ol.d {
list-style-type: lower-alpha;
}
Catatan: Beberapa nilai adalah untuk daftar yang tidak diurutkan, dan beberapa untuk daftar yang diurutkan.
Gambar sebagai Penanda Item Daftar
Properti list-style-imagemenentukan gambar sebagai penanda item daftar:
Contoh
ul
{
list-style-image: url('sqpurple.gif');
}
Posisikan Penanda Item Daftar
Properti list-style-positionmenentukan posisi penanda item daftar (poin poin).
"daftar-gaya-posisi: luar;" berarti bahwa poin-poin akan berada di luar item daftar. Awal setiap baris item daftar akan disejajarkan secara vertikal. Ini adalah default:
- Kopi - Minuman yang diseduh yang dibuat dari biji kopi panggang...
- teh
- minuman bersoda
"daftar-gaya-posisi: di dalam;" berarti bahwa poin-poin akan berada di dalam item daftar. Karena ini adalah bagian dari item daftar, itu akan menjadi bagian dari teks dan mendorong teks di awal:
- Kopi - Minuman yang diseduh yang dibuat dari biji kopi panggang...
- teh
- minuman bersoda
Contoh
ul.a {
list-style-position: outside;
}
ul.b {
list-style-position: inside;
}
Hapus Pengaturan Default
Properti list-style-type:noneini juga dapat digunakan untuk menghapus penanda/peluru. Perhatikan bahwa daftar juga memiliki margin dan padding default. Untuk menghapus ini, tambahkan margin:0dan padding:0ke <ul> atau <ol>:
Contoh
ul
{
list-style-type: none;
margin: 0;
padding: 0;
}
Daftar - Properti singkatan
Properti list-styleadalah properti singkatan. Ini digunakan untuk mengatur semua properti daftar dalam satu deklarasi:
Contoh
ul
{
list-style: square inside url("sqpurple.gif");
}
Saat menggunakan properti singkatan, urutan nilai properti adalah:
list-style-type(jika gambar-gaya-daftar ditentukan, nilai properti ini akan ditampilkan jika gambar karena alasan tertentu tidak dapat ditampilkan)list-style-position(menentukan apakah penanda item daftar akan muncul di dalam atau di luar aliran konten)list-style-image(menentukan gambar sebagai penanda item daftar)
Jika salah satu nilai properti di atas tidak ada, nilai default untuk properti yang hilang akan dimasukkan, jika ada.
Daftar Gaya Dengan Warna
Kita juga dapat menata daftar dengan warna, agar terlihat sedikit lebih menarik.
Apa pun yang ditambahkan ke tag <ol> atau <ul>, memengaruhi seluruh daftar, sementara properti yang ditambahkan ke tag <li> akan memengaruhi item daftar individual:
Contoh
ol {
background: #ff9999;
padding: 20px;
}
ul {
background: #3399ff;
padding: 20px;
}
ol li {
background:
#ffe5e5;
padding: 5px;
margin-left: 35px;
}
ul li {
background:
#cce5ff;
margin: 5px;
}
Hasil:
- Coffee
- Tea
- Coca Cola
- Coffee
- Tea
- Coca Cola
Lebih Banyak Contoh
Contoh ini menunjukkan cara membuat daftar dengan batas kiri merah.
Contoh ini menunjukkan cara membuat daftar berbatas tanpa poin.
Contoh ini menunjukkan semua penanda item daftar yang berbeda di CSS.
Semua Properti Daftar CSS
| Property | Description |
|---|---|
| list-style | Sets all the properties for a list in one declaration |
| list-style-image | Specifies an image as the list-item marker |
| list-style-position | Specifies the position of the list-item markers (bullet points) |
| list-style-type | Specifies the type of list-item marker |