list-style-type
Properti list-style-type untuk menentukan jenis penanda.
ul {
list-style-type:circle;
}
ol {
list-style-type:upper-roman;
}
Nilai untuk Unordered Lists
| Nilai | Keterangan |
| none | Tidak ada penanda |
| disc | Penanda dengan lingkaran yang diisi |
| circle | Penanda dengan lingkaran |
| square | Penanda dengan kotak |
Nilai untuk Ordered Lists
| Nilai | Keterangan |
| armenian | Penanda memakai nomor tradisional armenia |
| decimal | Penanda memakai nomor |
| decimal-leading-zero | Penanda memakai angka dengan awal nol (01, 02, 03, dll.) |
| georgian | Penanda memakai nomor tradisional georgia |
| lower-alpha | Penanda memakai huruf kecil (a, b, c, d, e, dll.) |
| lower-greek | Penanda memakai huruf kecil Yunani (alpha, beta, gamma, dll.) |
| lower-latin | Penanda memakai huruf kecil latin (a, b, c, d, e, dll.) |
| lower-roman | Penanda memakai angka romawi kecil (i, ii, iii, iv, v, etc.) |
| upper-alpha | Penanda memakai huruf besar (A, B, C, D, E, dll.) |
| upper-latin | Penanda memakai huruf besar latin (A, B, C, D, E, dll.) |
| upper-roman | Penanda memakai angka romawi besar (I, II, III, IV, V, dll.) |
Browser IE8 tidak mendukung nilai : decimal-leading-zero, lower-greek, lower-latin, upper-latin, armenian, georgian.
list-style-position
Properti list-style-position untuk menentukan posisi list, apakah diluar atau didalam ?.
ul
{
list-style-position:inside;
}
Outside :
Inside :
| Nilai | Keterangan |
| inside | Penanda akan muncul didalam konten |
| outside | Penanda akan muncul diluar konten. Ini default |
list-style-image
Properti list-style-image untuk penanda menggunakan gambar.
ul.a
{
list-style-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8MCpZI8ZkocHiAtcS6LktQC6GoYpnScwc1CbBbG8-CZLSzgssdB_wCDl-gnjfY-Qbyw7BXNvUQvPctUEK9XMTfzH3g9VIhqCB-5Aw51pcYVDfOCiSZB2cy6kuNi1Y8RpayYyxL7TArY95/s128/tutorial%20css%20-%20Nano%20Yulianto.gif);
}
Contoh :
| Nilai | Keterangan |
| url | Gambar yang ingin ditampilkan sebagai penanda |
| none | Tidak ada Gambar |
Penggabungan
Kalau digabungkan memakai properti list-style.
ul
{
list-style:square inside url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8MCpZI8ZkocHiAtcS6LktQC6GoYpnScwc1CbBbG8-CZLSzgssdB_wCDl-gnjfY-Qbyw7BXNvUQvPctUEK9XMTfzH3g9VIhqCB-5Aw51pcYVDfOCiSZB2cy6kuNi1Y8RpayYyxL7TArY95/s128/tutorial%20css%20-%20Nano%20Yulianto.gif);
}
Urutan Properti :
ul{
list-style:list-style-type list-style-position list-style-image;
}
Alhamdulillah
