Wednesday, December 17, 2014

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

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)

ValueDeskripsi
disctanda default, bertanda lingkaran berisi warna hitam penuh.
armeniantanda penomoran tradisional armenian.
circletanda lingkaran tanpa isi.
cjk-ideographictanda nomor ideographic.
decimaltanda nomor biasa.
decimal-leading-zerotanda desimal dengan leading angka seperti 01,02,03 dan seterusnya.
georgiantanda penomoran tradisional georgian.
hebrewtanda penomoran tradisional yahudi.
hiraganatanda penomoran tradisional hiragana.
hiragana-irohatanda penomoran tradisional hiragana-iroha.
katakanatanda penomoran tradisional katakana.
katakana-irohatanda penomoran tradisional katakana-iroha.
lower-alphatanda huruf kecil biasa.
lower-greektanda huruf kecil yunani.
lower-latintanda huruf kecil latin.
lower-romantanda angka romawi kecil.
nonetanpa tanda atau tanpa tanda list.
squaretanda kotak.
upper-alphatanda huruf besar biasa.
upper-latintanda huruf besar latin.
upper-romantanda 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 :

0 komentar

Post a Comment