tutorial pengembangan web terbaru
 

CSS daftar

❮ Sebelumnya Bab selanjutnya ❯
  1. kopi
  2. teh
  3. Coca Cola
  • kopi
  • teh
  • Coca Cola

Daftar HTML dan Daftar CSS Properti

Dalam HTML, ada dua jenis utama dari daftar:

  • daftar unordered (<ul>) - daftar item ditandai dengan peluru
  • daftar memerintahkan (<ol>) - daftar item ditandai dengan angka atau huruf

Sifat daftar CSS memungkinkan Anda untuk:

  • Set yang berbeda spidol item daftar untuk daftar memerintahkan
  • Set yang berbeda spidol item daftar untuk daftar unordered
  • Mengatur foto sebagai item daftar penanda
  • Menambahkan warna latar belakang untuk daftar dan daftar item

Daftar Barang Penanda yang berbeda

The list-style-type properti menentukan jenis item daftar penanda.

Contoh berikut menunjukkan beberapa tanda item daftar yang tersedia:

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 "

Catatan: Beberapa nilai-nilai untuk daftar unordered, dan beberapa untuk daftar memerintahkan.

Image sebagai The List Item Marker

The list-style-image properti menentukan gambar sebagai item daftar penanda:

Contoh

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

Posisi The Daftar Barang Penanda

The list-style-position properti menentukan apakah penanda daftar-item akan muncul di dalam atau di luar aliran konten:

Contoh

ul {
    list-style-position: inside;
}
Cobalah sendiri "

Daftar - properti Steno

The list-style properti adalah properti steno. Hal ini digunakan untuk mengatur semua properti daftar dalam satu deklarasi:

Contoh

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

Bila menggunakan properti singkat, urutan nilai properti adalah:

  • list-style-type (jika list-style-image yang ditentukan, nilai properti ini akan ditampilkan jika gambar untuk beberapa alasan tidak dapat ditampilkan)
  • list-style-position (menentukan apakah penanda daftar-item akan muncul di dalam atau di luar aliran konten)
  • list-style-image (menentukan gambar sebagai item daftar penanda)

Jika salah satu dari nilai properti di atas yang hilang, nilai default untuk properti yang hilang akan dimasukkan, jika ada.

Daftar Styling Dengan Warna

Kami juga bisa daftar gaya dengan warna, untuk membuat mereka terlihat sedikit lebih menarik.

Apa pun yang ditambahkan ke <ol> atau <ul> tag, mempengaruhi seluruh daftar, sementara sifat ditambahkan ke <li> tag akan mempengaruhi item daftar individu:

Contoh

ol {
    background: #ff9999;
    padding: 20px;
}

ul {
    background: #3399ff;
    padding: 20px;
}

ol li {
    background: #ffe5e5;
    padding: 5px;
    margin-left: 35px;
}

ul li {
    background: #cce5ff;
    margin: 5px;
}

Hasil:

  1. Coffee
  2. Tea
  3. Coca Cola
  • Coffee
  • Tea
  • Coca Cola
Cobalah sendiri "
contoh

Contoh lebih

-Lebar penuh berbatasan daftar
Contoh ini menunjukkan bagaimana untuk membuat daftar berbatasan tanpa peluru.

Semua berbeda penanda daftar-item untuk daftar
Contoh ini menunjukkan semua tanda daftar-item yang berbeda di CSS.

Uji Diri dengan Latihan!

Latihan 1 » Latihan 2» Latihan 3 »

Semua Daftar CSS Properti

Milik Deskripsi
list-style Set semua properti untuk daftar di salah satu deklarasi
list-style-image Menentukan gambar sebagai daftar-item penanda
list-style-position Menentukan jika penanda daftar-item akan muncul di dalam atau di luar aliran konten
list-style-type Menentukan jenis daftar-item penanda

❮ Sebelumnya Bab selanjutnya ❯