Kursus Membuat Web

iklan

List CSS

Property list CSS mengijinkan kamu untuk :

  • Mengatur tanda yang berbeda pada list item dalam ordered list
  • Mengatur tanda yang berbeda pada list item dalam unordered list
  • Mengatur tanda list item dengan image

List

Pada HTML, ada 2 type list :

  • unordered list (<ul>) - list item dengan tanda bullet
  • ordered list (<ol>) - list item dengan tanda angkat atau huruf

Dengan CSS, list dapat diberi style lebih lanjut, dan image bisa digunakan untuk tanda list item.

Tanda List Item Yang Berbeda

Type dari tanda list item ditentukan dengan property list-style-type :

ul.a {
    list-style-type: circle;
}
ul.b {
    list-style-type: square;
}
ol.c {
    list-style-type: upper-roman;
}
ol.d {
    list-style-type: lower-alpha;
}
Lihat ...

Beberapa nilai untuk unordered list, dan beberapa untuk ordered list.

Tanda List Item Image

Menentukan tanda list item dengan image, menggunakan property list-style-image :

ul {
    list-style-image: url('sqpurple.gif');
}
Lihat ...

Contoh diatas tidak tampil sama di semua browser. IE and Opera akan menampilkan tanda image sedikit lebih tinggi dari pada Firefox, Chrome, dan Safari.

Jika Anda ingin tanda image ditampilkan sama disemua browser, solusi untuk crossbrowser dijelaskan dibawah.

Solusi Crossbrowser

Contoh berikut ini menampilkan tanda image sama di semua browser:

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

Penjelasan Contoh :

  • Untuk <ul>
    • Mengatur property list-style-type dengan nilai none untuk menghilangkan tanda list item
    • Mengatur padding dan margin dengan nilai 0px (agar sesuai dengan semua browser)
  • Untuk semua <li> di dalam <ul>
    • Mengatur URL dari image, dan menampilkannya hanya sekali atau tidak diulang (no-repeat)
    • Letak posisi image dimana yang diinginkan (kiri 0px dan nilai vertical : center)
    • Letakkan posisi teks dalam list dengan padding-left

Menyingkat Property List

Property list-style adalah menyingkat property. Ini digunakan untuk mengatur semua property list dalam satu deklarasi :

ul {
    list-style: square inside url("sqpurple.gif");
}
Lihat ...

Bila menyingkat property, urutan nilai untuk property adalah :

  • list-style-type (jika list-style-image ditentukan, nilai dari property ini akan di tampilkan jika image untuk beberapa alasan tidak bisa di tampilkan)
  • list-style-position (menentukan apakah tanda list-item akan muncul didalam atau diluar dari aliran isi)
  • list-style-image (menentukan image sebuah tanda list item)

Jika salah satu dari nilai property di atas tidak digunakan, maka nilai default untuk property yang tidak digunakan akan dimasukkan, jika ada.

Beberapa Contoh Untuk di Praktekkan Sendiri

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;}

Semua tanda list-item yang berbeda untuk list

Contoh ini menunjukkan tanda list-item yang berbeda di CSS.

Semua

Property Keterangan
list-style Mengatur semua property list dalam satu deklarasi
list-style-image Mengatur tanda list-item
list-style-position Menentukan jika tanda list-item akan muncul didalam atau diluar dari aliran isi
list-style-type Mengatur type dari tanda list-item

Sebelumnya ...   Berikutnya ...

muhammad falah

Saya Muhammad Falah, jika Anda ingin langsung belajar dengan Saya, silakan ikuti kursus membuat web yang Saya bimbing atau ikuti Saya di :

Muhammad Falah Youtube Channel Muhammad Falah LinkedIn Muhammad Falah Google Plus Muhammad Falah Twitter Muhammad Falah Facebook

copy right © 2015