Nulis-Ilmu.com

Tutorial Elektronika dan Komputer

You are here: Home / CSS / Tutorial CSS Part 7: Mengatur Style List (OL dan UL)

Tutorial CSS Part 7: Mengatur Style List (OL dan UL)

By

mengatur style list

Kita bisa mengatur style list pada ordered lists(ol) dan unordered lists(ul) dengan CSS. Ada beberapa properti yang disediakan seperti untuk mengatur tanda item list pada ordered lists dan unordered lists dan membuat tanda item list ordered lists dan unordered lists dengan gambar. Selain itu kita juga bisa mengatur penempatan tanda list pada oldan ul.

Sebelumnya perlu diingat kembali tentang List pada HTML ada dua, yaitu ordered lists dan unordered lists. Ordered lists adalah list dengan tanda item list berupa angka atau huruf sedangkan unordered lists adalah list dengan tanda item list berupa bullet/dot.


Ada dua cara dalam mengatur tampilan list OL dan UL dengan CSS, yaitu mengatur tampilan list dengan menggunakan properti list-style-type dan list-style-image.

1. list-style-type

Adalah properti CSS yang digunakan untuk mengatur tampilan tanda list UL dan OL menggunakan library dari CSS. Ada beberapa model yang bisa dipilih seperti circle (lingkaran) atau square (kotak) untuk tampilan unordered lists dan upper-roman atau lower-alpha untuk tampilan ordered lists.

Contoh penggunaan CSS list-style-type untuk ordered lists(ol) :

ul.x {
    list-style-type: circle;
}

ul.y {
    list-style-type: square;
}

Contoh penggunaan CSS list-style-type untuk unordered lists(ul) :

ol.x {
    list-style-type: upper-roman;
}

ol.y {
    list-style-type: lower-aplha;
}

Kita bisa berlatih CSS list-style-type disini >>

Berikut ini beberapa model yang bisa dipilih untuk tampilan ordered lists(ol) dan unordered lists(ul)

Value Deskripsi
disc tanda default, bertanda lingkaran berisi warna hitam penuh.
armenian tanda penomoran tradisional armenian.
circle tanda lingkaran tanpa isi.
cjk-ideographic tanda nomor ideographic.
decimal tanda nomor biasa.
decimal-leading-zero tanda desimal dengan leading angka seperti 01,02,03 dan seterusnya.
georgian tanda penomoran tradisional georgian.
hebrew tanda penomoran tradisional yahudi.
hiragana tanda penomoran tradisional hiragana.
hiragana-iroha tanda penomoran tradisional hiragana-iroha.
katakana tanda penomoran tradisional katakana.
katakana-iroha tanda penomoran tradisional katakana-iroha.
lower-alpha tanda huruf kecil biasa.
lower-greek tanda huruf kecil yunani.
lower-latin tanda huruf kecil latin.
lower-roman tanda angka romawi kecil.
none tanpa tanda atau tanpa tanda list.
square tanda kotak.
upper-alpha tanda huruf besar biasa.
upper-latin tanda huruf besar latin.
upper-roman tanda angka romawi besar.

2. list-style-image

Adalah properti CSS yang digunakan untuk mengatur tampilan tanda list UL dan OL menggunakan gambar.

Contoh penggunaan CSS list-style-image :

 ul {  
   list-style-type: none;  
   padding: 0px;  
   margin: 0px;  
 }  
   
 ul li {  
   background-image: url(dot.gif);  
   background-repeat: no-repeat;  
   background-position: 0px center;   
   padding-left: 15px;   
 }

Kita bisa berlatih CSS list-style-image disini >>

3. list-style-position

Adalah properti CSS yang digunakan untuk mengatur penempatan tanda list pada UL dan OL. Posisi tanda bisa ditaruh didalam list atau diluar list. Untuk didalam list diberi nilai inside dan diluar list diberi nilai outside.

Contoh penggunaan CSS list-style-position :

 ul {  
   list-style-position: inside;  
 }

Kita bisa berlatih CSS list-style-position disini >>

2. list-style

Adalah properti CSS yang digunakan untuk mengatur tampilan tanda list UL dan OL dengan penulisan secara singkat yang mencakup keseluruhan properti diatas.

Contoh penggunaan CSS list-style :

ul {
    list-style: circle inside url("dot.gif");
}

Kita bisa berlatih CSS list-style disini >>

Lihat indeks artikel Tutorial CSS Dasar >>

Referensi :


Filed Under: CSS