List (Daftar)

Dalam HTML, ada dua jenis List (daftar)

• Daftar unordered – daftar item ditandai dengan.
• Memerintahkan daftar – daftar item ditandai dengan angka atau huruf

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

Daftar Item Penanda yang Berbeda

Jenis penanda daftar item dispesifikasikan dengan daftar properti-gaya-tipe :

ul.a {daftar-style-type: lingkaran;}
ul.b {daftar-style-type: persegi;}

ol.c {daftar-style-type: atas-Romawi;}
ol.d {daftar-style-type: rendah-alpha;}

Beberapa nilai adalah untuk daftar unordered, dan beberapa memerintahkan untuk daftar.

Sebuah Gambar sebagai Daftar Item

Untuk menentukan gambar sebagai penanda item daftar, gunakan daftar properti-gaya-gambar :

ul
{
daftar-gaya-image: url (‘sqpurple.gif’);
}

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

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

Solusi Crossbrowser

Contoh berikut menampilkan gambar-penanda yang sama di semua browser:

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

Contoh Penjelasan :

•  Untuk ul:
  Mengatur daftar-gaya-tipe tidak ada untuk menghapus item daftar penanda
  Mengatur padding dan margin baik untuk 0px (untuk cross-browser kompatibilitas)
• Untuk li:
  Mengatur URL gambar, dan menunjukkan hanya sekali (no-repeat)
  Posisi gambar di mana Anda inginkan (kiri 0px 5px dan ke bawah)
  Posisi teks dalam daftar dengan padding-left

Daftar – Properti Singkatan

Hal ini juga dimungkinkan untuk menentukan semua properti daftar dalam satu, properti tunggal. Hal ini disebut properti steno.
Properti yang digunakan untuk daftar singkatan, adalah daftar properti gaya:

ul
{
daftar-gaya: url persegi (“sqpurple.gif”);
}

Bila menggunakan properti singkatan, urutan nilai-nilai adalah:

• Daftar-gaya-tipe
• Daftar-gaya-posisi (untuk deskripsi, lihat tabel CSS properti di bawah ini)
• Daftar-gaya-gamba

Tidak masalah jika salah satu nilai di atas yang hilang, selama sisanya berada di urutan yang ditentukan.r