Latest web development tutorials

daftar gaya CSS (ul)

Peran CSS Daftar Properti adalah sebagai berikut:

  • Mengatur item daftar yang berbeda ditandai sebagai daftar memerintahkan
  • Mengatur item daftar yang berbeda ditandai sebagai daftar unordered
  • Mengatur daftar gambar barang penanda

daftar

Dalam HTML, ada dua jenis daftar:

  • Unordered daftar - daftar item ditandai dengan grafis khusus (seperti bintik hitam, kotak-kotak kecil, dll)
  • daftar memerintahkan - daftar item ditandai dengan angka atau huruf

Dengan CSS, Anda bisa daftar gaya lebih lanjut, dan dapat membuat penanda daftar gambar barang.

Berbeda item daftar penanda

list-style-type atribut menentukan jenis item daftar penanda adalah ::

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

Coba »

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

Sebagai daftar gambar barang penanda

Untuk menentukan daftar gambar barang penanda, menggunakan properti list-style-image:

contoh

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

Coba »

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

Jika Anda ingin menempatkan gambar yang sama dari logo di semua browser, Anda harus menggunakan solusi kompatibilitas browser, sebagai berikut

Browser Compatibility Solusi

Juga di semua browser, contoh berikut akan menampilkan tag gambar:

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

Coba »

Contoh menjelaskan:

  • ul:
    • Mengatur list-style-type tidak menghapus item daftar penanda
    • Pengaturan padding dan margin 0px (kompatibilitas browser)
  • Semua ul li:
    • Mengatur URL gambar, dan mengatur hanya muncul sekali (tidak ada pengulangan)
    • Anda perlu mencari posisi gambar (0px meninggalkan dan 5px vertikal)
    • Dengan atribut padding-kiri untuk teks dalam daftar

Daftar - properti singkat

Anda dapat menentukan daftar semua properti di satu properti. Ini disebut properti steno.

Menggunakan properti singkatan untuk daftar, daftar atribut gaya ditetapkan sebagai berikut:

contoh

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

Coba »

Jika Anda menggunakan nilai properti singkatan dari order:

  • list-style-type
  • list-style-posisi (untuk petunjuk, lihat tabel atribut CSS berikut)
  • list-style-image

Jika nilai-nilai ini kehilangan satu dari urutan yang tersisa masih ditentukan, tidak masalah.

contoh

contoh yang lebih

Semua berbeda item daftar penanda
Contoh ini menunjukkan semua daftar CSS item yang berbeda penanda.

Semua Daftar CSS Properti

milik deskripsi
list-style properti singkat. Untuk daftar semua properti disediakan dalam sebuah pernyataan
list-style-image gambar diatur untuk menandatangani daftar item.
list-style-posisi Mengatur posisi dalam daftar item daftar penanda.
list-style-type Mengatur jenis item daftar bendera.