Daftar

daftar

Dalam HTML, ada dua jenis daftar:

     daftar unordered - daftar item ditandai dengan peluru
     daftar memerintahkan - daftar item ditandai dengan angka atau huruf

Dengan CSS, daftar bisa ditata lebih lanjut, dan gambar dapat digunakan sebagai penanda item daftar.
Daftar Barang Penanda berbeda

Jenis item daftar penanda ditetapkan dengan properti list-style-type:
contoh
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;
}

Cobalah sendiri »

Beberapa nilai-nilai untuk daftar unordered, dan beberapa untuk daftar memerintahkan.
Citra sebagai The Daftar Barang Marker

Untuk menentukan gambar sebagai penanda daftar item, menggunakan properti list-style-image:
contoh
ul {
    list-style-image: url ('sqpurple.gif');
}

Cobalah sendiri »

Contoh di atas tidak menampilkan sama di semua browser. IE dan Opera akan menampilkan gambar-penanda sedikit lebih tinggi dari Firefox, Chrome, dan Safari.

Jika Anda ingin gambar-penanda untuk ditempatkan merata di semua browser, solusi crossbrowser dijelaskan di bawah ini.
Crossbrowser Solusi

Contoh berikut menampilkan gambar-penanda sama di semua browser:
contoh
ul {
     list-style-type: none;
     padding: 0px;
     margin: 0px;
}

ul li {
     background-image: url (sqpurple.gif);
     background-repeat: no-repeat;
     background-position: 0px 5px;
     padding-left: 14px;
}

Cobalah sendiri »

Contoh menjelaskan:

     Untuk ul:
         Mengatur gaya-jenis daftar ke none untuk menghapus penanda item daftar
         Set kedua padding dan margin untuk 0px (untuk kompatibilitas cross-browser)
     Untuk semua li di ul:
         Mengatur URL gambar, dan menunjukkan hanya sekali (no-repeat)
         Posisi gambar di mana Anda inginkan (kiri 0px dan turun 5px)
         Posisikan teks dalam daftar dengan padding-left

Daftar - Properti Singkatan

Hal ini juga memungkinkan untuk menentukan semua properti dalam satu daftar, tunggal properti. Ini disebut properti steno.

Properti singkatan yang digunakan untuk daftar, adalah milik list-style:
contoh
ul {
     list-style: url persegi ("sqpurple.gif");
}

Cobalah sendiri »

Bila menggunakan properti singkatan, urutan nilai-nilai adalah:

     list-style-type
     list-style-position (untuk keterangan, lihat tabel properti CSS di bawah ini)
     list-style-image

Tidak masalah jika salah satu nilai di atas hilang, asalkan sisanya berada di urutan tertentu.