CSS List

CSS list properti memungkinkan anda untuk:

  • Mengatur penanda daftar item yang berbeda untuk daftar order (<ol>)
  • Mengatur penanda daftar item yang berbeda untuk daftar unordered (<ul>)
  • Mengatur gambar sebagai penanda daftar item.


Dalam HTML, ada dua jenis list: 

  • lis unordered - daftar item ditandai dengan peluru 
  • list order - daftar item ditandai dengan angka atau huruf 


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


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


Jenis item penanda list ditetapkan dengan properti list-style-type.



Nilai Untuk Unorder List

ValueDescription
noneTidak ada penanda
discSecara umum, penanda berbentuk lingkaran circle
circlePenandanya adalah sebuah lingkaran circle
squarePenandanya adalah sebuah square


Nilai Untuk Order List

ValueDescription
armenianPenandanya adalah penomoran tradisional Armenia 
decimalPenandanya adalah nomor
decimal-leading-zeroPenandanya adalah nomor empuk oleh nol awal (01, 02, 03, dll)
georgianPenandanya adalah penomoran Georgia tradisional (an, ban, gan, dll)
lower-alphaPenandanya adalah rendah-alpha (a, b, c, d, e, dll) 
lower-greekPenandanya adalah rendah-Yunani (alpha, beta, gamma, dll)
lower-latinPenandanya adalah rendah-latin (a, b, c, d, e, dll)
lower-romanPenandanya adalah rendah-roman (i, ii, iii, iv, v, dll) 
upper-alphaPenandanya adalah atas-alpha (A, B, C, D, E, dll) 
upper-latinPenandanya adalah atas latin (A, B, C, D, E, dll) 
upper-romanPenandanya penanda adalah atas Romawi (I, II, III, IV, V, dll)
Catatan: Tidak ada versi Internet Explorer (termasuk IE8) yang mendukung nilai properti "desimal nol", "loower-greek", "lower-latin", "upper-latin", "armenian", atau "Georgia".


Menggunakan Image sebagai The List Item Marker 

Untuk menentukan gambar sebagai penanda item daftar, gunakan properti list-style-image:

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

Contoh di atas tidak menampilkan secara 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 sama di semua browser, solusi crossbrowser dijelaskan di bawah ini.


Crossbrowser Solusi 

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

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

Penjelasan Contoh
Untuk ul: 
  • Mengatur list-style-type ke none untuk menghapus penanda item daftar 
  • Atur kedua padding dan margin untuk 0px (untuk kompatibilitas cross-browser) 
Untuk li: 
  • Mengatur URL gambar, dan menunjukkan hanya sekali (no-repeat) 
  • Posisikan gambar di mana Anda inginkan (kiri 0px 5px dan ke bawah) 
  • Posisikan teks dalam daftar dengan padding-left

List - Properti Singkatan

Hal ini juga memungkinkan untuk menentukan semua properti daftar dalam satu properti tunggal. Ini disebut properti steno. 
Properti singkatan yang digunakan untuk daftar, adalah properti list-style:

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

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 yang hilang, asalkan sisanya berada di urutan ditentukan.
 
Bagikan halaman ke sosial media
 
 
 

   Komentar Anda