Membuat list di html memang mudah, tapi tampilannya hanya gitu-gitu aja. Kita bisa mengganti style list dengan menggunakan CSS.
Secara default html, list itu ada dua tipe. Yaitu unordered list (UL) atau list yang tidak ada urutannya. Dan ordered list (OL) yaitu list yang ada urutannya.
Contoh UL itu seperti daftar dengan titik atau strip, sedangkan contoh OL seperti daftar dengan angka, huruf.
List Style Type
Properti pertama yang bisa digunakan adalah list-style-type. Property ini digunakan untuk mengganti style tipe list yang digunakan.
List Style Type UL
Pertama adalah tipe ul, ada tiga tipe list-style untuk ul. Berikut contohnya langsung:
<style type="text/css">
ul.circle {list-style-type: circle;}
ul.disc {list-style-type: disc;}
ul.square {list-style-type: square;}
</style>
<ul class='.circle'><li>circle</li><li>Cendol</li><li>Dawet</li></ul>
<ul class='.square'><li>square</li><li>Cendol</li><li>Dawet</li></ul>
<ul class='.disc'><li>disc</li><li>Cendol</li><li>Dawet</li></ul>
Hasilnya:
- Tipe: circle
- Cendol
- Dawet
- Tipe: square
- Cendol
- Dawet
- Tipe: disc
- Cendol
- Dawet
List Style Type OL
Untuk ol jauh lebih banyak lagi, karena ada banyak bahasa dan karakter di dunia ini.
<style type="text/css">
.upper-roman{ list-style-type:upper-roman; }
.upper-latin{ list-style-type:upper-latin; }
.upper-greek{ list-style-type:upper-greek; }
.upper-alpha{ list-style-type:upper-alpha; }
.square{ list-style-type:square; }
.none{ list-style-type:none; }
.lower-roman{ list-style-type:lower-roman; }
.lower-latin{ list-style-type:lower-latin; }
.lower-greek{ list-style-type:lower-greek; }
.lower-alpha{ list-style-type:lower-alpha; }
.katakana-iroha{ list-style-type:katakana-iroha; }
.katakana{ list-style-type:katakana; }
.initial{ list-style-type:initial; }
.inherit{ list-style-type:inherit; }
.hiragana-iroha{ list-style-type:hiragana-iroha; }
.hiragana{ list-style-type:hiragana; }
.hebrew{ list-style-type:hebrew; }
.georgian{ list-style-type:georgian; }
.decimal-leading-zero{ list-style-type:decimal-leading-zero; }
.decimal{ list-style-type:decimal; }
.cjk-ideographic{ list-style-type:cjk-ideographic; }
</style>
<ul class='upper-roman'><li>Type: upper-roman</li><li>Cendol</li><li>Dawet</li></ul>
<ul class='upper-latin'><li>Type: upper-latin</li><li>Cendol</li><li>Dawet</li></ul>
<ul class='upper-greek'><li>Type: upper-greek</li><li>Cendol</li><li>Dawet</li></ul>
<ul class='upper-alpha'><li>Type: upper-alpha</li><li>Cendol</li><li>Dawet</li></ul>
<ul class='square'><li>Type: square</li><li>Cendol</li><li>Dawet</li></ul>
<ul class='none'><li>Type: none</li><li>Cendol</li><li>Dawet</li></ul>
<ul class='lower-roman'><li>Type: lower-roman</li><li>Cendol</li><li>Dawet</li></ul>
<ul class='lower-latin'><li>Type: lower-latin</li><li>Cendol</li><li>Dawet</li></ul>
<ul class='lower-greek'><li>Type: lower-greek</li><li>Cendol</li><li>Dawet</li></ul>
<ul class='lower-alpha'><li>Type: lower-alpha</li><li>Cendol</li><li>Dawet</li></ul>
<ul class='katakana-iroha'><li>Type: katakana-iroha</li><li>Cendol</li><li>Dawet</li></ul>
<ul class='katakana'><li>Type: katakana</li><li>Cendol</li><li>Dawet</li></ul>
<ul class='initial'><li>Type: initial</li><li>Cendol</li><li>Dawet</li></ul>
<ul class='inherit'><li>Type: inherit</li><li>Cendol</li><li>Dawet</li></ul>
<ul class='hiragana-iroha'><li>Type: hiragana-iroha</li><li>Cendol</li><li>Dawet</li></ul>
<ul class='hiragana'><li>Type: hiragana</li><li>Cendol</li><li>Dawet</li></ul>
<ul class='hebrew'><li>Type: hebrew</li><li>Cendol</li><li>Dawet</li></ul>
<ul class='georgian'><li>Type: georgian</li><li>Cendol</li><li>Dawet</li></ul>
<ul class='decimal-leading-zero'><li>Type: decimal-leading-zero</li><li>Cendol</li><li>Dawet</li></ul>
<ul class='decimal'><li>Type: decimal</li><li>Cendol</li><li>Dawet</li></ul>
<ul class='cjk-ideographic'><li>Type: cjk-ideographic</li><li>Cendol</li><li>Dawet</li></ul>
Hasilnya:
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
List Style Gambar
Kita bisa mengganti list-style dengan gambar. Caranya sangat mudah tinggal menggunakan format atribut:
list-style-image: url("gambar.jpg");
Contoh, saya punya 3 gambar. Yaitu: hati, lampu dan bintang. Tapi, yang jelas kamu harus paham url gambar yang akan dipanggil.
Dalam hal ini, saya buat di satu folder supaya lebih mudah.
Maka kode CSSnya adalah:
<style type="text/css">
.hati{ list-style-image:url(hati.png); margin-bottom:30px}
.bintang{ list-style-image:url(bintang.png); margin-bottom:30px}
.lampu{ list-style-image:url(lampu.png); margin-bottom:30px}
.centang{ list-style-image:url(centang.png); margin-bottom:30px}
</style>
<ul class='hati'><li>Type: hati</li><li>Cendol</li><li>Dawet</li></ul>
<ul class='bintang'><li>Type: bintang</li><li>Cendol</li><li>Dawet</li></ul>
<ul class='lampu'><li>Type: lampu</li><li>Cendol</li><li>Dawet</li></ul>
<ul class='centang'><li>Type: lampu</li><li>Cendol</li><li>Dawet</li></ul>
Hasilnya adalah:
- Type: hati
- Cendol
- Dawet
- Type: bintang
- Cendol
- Dawet
- Type: lampu
- Cendol
- Dawet
- Type: centang
- Cendol
- Dawet
Jadi, kamu bisa mengganti dengan gambar sesuai keinginan kamu. Kalau mau centang / checklist tinggal diganti gambar yang centang.
Darimana saya dapat icon tersebut? Kunjungi situs: https://www.flaticon.com/. Kemudian pilih ukuran 16px.
Property CSS List
Berikut ini adalah tabel daftar property untuk list css:
| Property | Keterangan |
|---|---|
| list-style-type | Mengatur tipe style list |
| list-style-position | Mengatur posisi style list |
| list-style-image | Memilih gambar untuk dijadikan style list |
| list-style | Mengatur style list |
Sekian tutorial mengatur list style dengan css. Semoga paham ya.!