Membuat Daftar/ List Gaya Sendiri

Lompat ke Komentar

Melanjutkan tulisan sebelumnya, Belajar HTML Membuat Daftar/ List, saya ingin membuat daftar/list dengan gaya sendiri. Disini, saya harus mengerti dan memahami bahasa CSS, khususnya CSS Proverty yang berhubungan dengan TAG HTML untuk membuat daftar/list. Berikut ini CSS Proverty yang berkaitan dan dapat digunakan untuk membuat daftar/list dengan gaya sendiri, saya ambil dari HTMLDOG.COM.

list-style-type

Specifies the style of the list marker bullet or numbering system within a list.

Possible Values :

• inherit
• none : no list marker.
• disc : solid circle.
• circle : empty circle
• square : solid square.
• decimal : 1, 2, 3, 4, etc.
• decimal-leading-zero : 01, 02, 03, …10, 11, etc.
• lower-latin : a, b, c, d, etc.
• upper-latin : A, B, C, D, etc.
• lower-roman : i, ii, iii, iv, etc.
• upper-roman : I, II, III, IV, etc.
• lower-greek : Greek Characters.
• armenian
• georgian

Example : ul {list-style-type:upper-roman;}

list-style-position

Specifies whether the list marker for a list item should appear inside or outside the list-item box.

Possible Values :

• inherit
• inside
• outside (default)

Example : li {list-style-position:inside;}

list-style-image

Specifies an image to be used as the list marker for a list item.

Possible Values :

• inherit
• none
• [URL]

Example : li {list-style-image:url(images.jpg);}

list-style

Spesifies the style of a list item marker, combining list-style-type, list-style-position, and list-style-image.

Poosible Value :

• [combination of list-style-type, list-style-position, and list-style-image]

Example : list-style:disc inside;

Karena masih belajar, saya mencoba memprakteknya. Dan saat menulis posting, saya menulisnya seperti dibawah ini.

Menggunakan Angka Romawi Besar<ul style="list-style-type:upper-roman;"><li>Satu Romawi</li><li>Dua Romawi</li><li>Tiga Romawi</li><li>Empat Romawi</li></ul>

Dan setelah tulisan/posting dipublikasikan, akan terlihat seperti dibawah ini.

Menggunakan Angka Romawi Besar

• Satu Romawi
• Dua Romawi
• Tiga Romawi
• Empat Romawi

Baru ini yang dapat saya pelajari dan mudah dimengerti.

& Komentar

Filed under Blog Ponsel

Tag: belajar, belajar html, blog, css proverty, list gaya sendiri, membuat daftar, membuat list, tag html