Styling List Menggunakan CSS
Apa itu list HTML?
Diskripsi : List artinya daftar. Pada HTML, terdapat dua jenis tipe list yaitu <ul> (daftar ditandai dengan bullet) dan <ol>(daftar ditandai dengan nomor dan huruf) . Dengan sentuhan CSS maka kita dapat mengedit seperti memberi warna bacground list, mengatur foto sebagai penanda list, dan lainya.
Property yang terkait dengan list yaitu list-style, list-style-image, list-style-position, dan list-style-type
1. List-style-image
Diskripsi: digunakan untuk pengganti item penanda list dengan gambar
Value : none, url
ex.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <!DOCTYPE html> <html> <head> <style> ul { list-style: square inside url("lilchick.gif"); } </style> </head> <body> <ul> <li>satu</li> <li>dua</li> <li>tiga</li> </ul> </body> </html> |
kami sudah menyediakan gambar bernama lilchick.gif dalam satu folder bersama file html diatas. hasilnya sebagai berikut:
2. List-Style-Position
Diskripsi : properti yang digunakan untuk menentukan apakah list/daftar berada di dalam atau di luar content
Value : Inside, outside.
ex.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | <!DOCTYPE html> <html> <head> <style> ul.a { list-style-position: inside; } ul.b { list-style-position: outside; } li { border: 1px solid black; } </style> </head> <body> <p>The following list has list-style-position: inside:</p> <ul class="a"> <li>Earl Grey Tea - A fine black tea</li> <li>Jasmine Tea - A fabulous "all purpose" tea</li> <li>Honeybush Tea - A super fruity delight tea</li> </ul> <p>The following list has list-style-position: outside:</p> <ul class="b"> <li>Earl Grey Tea - A fine black tea</li> <li>Jasmine Tea - A fabulous "all purpose" tea</li> <li>Honeybush Tea - A super fruity delight tea</li> </ul> <p>"list-style-position: outside" is the default setting.</p> </body> </html> |
3. List-Style-Type
Diskripsi : properti ini duganakan untuk menentukan jenis item sebagai penanda list
Value : disc, armenian, circle, cjk-ideographic, decimal, decimal-leading-zero, georgian, hebrew, hiragana, hiragana-iroha, katakana, katakana-iroha, lower-alpha, lower-greek, lower-latin, lower-roman, none, square, upper-alpha, upper latin, upper-roman. untuk penjelasan fungsinya ada di contoh kode berikut:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 | <!DOCTYPE html> <html> <head> <style> ul.a {list-style-type: circle;} ul.b {list-style-type: disc;} ul.c {list-style-type: square;} ol.d {list-style-type: armenian;} ol.e {list-style-type: cjk-ideographic;} ol.f {list-style-type: decimal;} ol.g {list-style-type: decimal-leading-zero;} ol.h {list-style-type: georgian;} ol.i {list-style-type: hebrew;} ol.j {list-style-type: hiragana;} ol.k {list-style-type: hiragana-iroha;} ol.l {list-style-type: katakana;} ol.m {list-style-type: katakana-iroha;} ol.n {list-style-type: lower-alpha;} ol.o {list-style-type: lower-greek;} ol.p {list-style-type: lower-latin;} ol.q {list-style-type: lower-roman;} ol.r {list-style-type: upper-alpha;} ol.s {list-style-type: upper-latin;} ol.t {list-style-type: upper-roman;} ol.u {list-style-type: none;} ol.v {list-style-type: inherit;} </style> </head> <body> <ul class="a"> <li>Circle type</li> <li>Tea</li> <li>Coca Cola</li> </ul> <ul class="b"> <li>Disc type</li> <li>Tea</li> <li>Coca Cola</li> </ul> <ul class="c"> <li>Square type</li> <li>Tea</li> <li>Coca Cola</li> </ul> <ol class="d"> <li>Armenian type</li> <li>Tea</li> <li>Coca Cola</li> </ol> <ol class="e"> <li>Cjk-ideographic type</li> <li>Tea</li> <li>Coca Cola</li> </ol> <ol class="f"> <li>Decimal type</li> <li>Tea</li> <li>Coca Cola</li> </ol> <ol class="g"> <li>Decimal-leading-zero type</li> <li>Tea</li> <li>Coca Cola</li> </ol> <ol class="h"> <li>Georgian type</li> <li>Tea</li> <li>Coca Cola</li> </ol> <ol class="i"> <li>Hebrew type</li> <li>Tea</li> <li>Coca Cola</li> </ol> <ol class="j"> <li>Hiragana type</li> <li>Tea</li> <li>Coca Cola</li> </ol> <ol class="k"> <li>Hiragana-iroha type</li> <li>Tea</li> <li>Coca Cola</li> </ol> <ol class="l"> <li>Katakana type</li> <li>Tea</li> <li>Coca Cola</li> </ol> <ol class="m"> <li>Katakana-iroha type</li> <li>Tea</li> <li>Coca Cola</li> </ol> <ol class="n"> <li>Lower-alpha type</li> <li>Tea</li> <li>Coca Cola</li> </ol> <ol class="o"> <li>Lower-greek type</li> <li>Tea</li> <li>Coca Cola</li> </ol> <ol class="p"> <li>Lower-latin type</li> <li>Tea</li> <li>Coca Cola</li> </ol> <ol class="q"> <li>Lower-roman type</li> <li>Tea</li> <li>Coca Cola</li> </ol> <ol class="r"> <li>Upper-alpha type</li> <li>Tea</li> <li>Coca Cola</li> </ol> <ol class="s"> <li>Upper-latin type</li> <li>Tea</li> <li>Coca Cola</li> </ol> <ol class="t"> <li>Upper-roman type</li> <li>Tea</li> <li>Coca Cola</li> </ol> <ol class="u"> <li>None type</li> <li>Tea</li> <li>Coca Cola</li> </ol> <ol class="v"> <li>inherit type</li> <li>Tea</li> <li>Coca Cola</li> </ol> </body> </html> |
Semoga bermanfaat. Sampai jumpa di postingan selanjutnya.
Written by @akhi_syabab
Programmer python yang punya banyak ambisi.
Remote developer at remoteworker.id Software Agency