List CSS

---

1. kopi
2. teh
3. susu

• kopi
• teh
• susu

---

Daftar HTML dan Daftar CSS Properties
Dalam HTML, ada dua jenis daftar utama:

    Daftar tidak berurutan (<ul>) - item daftar ditandai dengan peluru
    Daftar pesanan (<ol>) - daftar item ditandai dengan angka atau huruf

Properti daftar CSS memungkinkan Anda untuk:

    Tetapkan penanda item daftar yang berbeda untuk daftar pesanan
    Tetapkan penanda item daftar yang berbeda untuk daftar tak berurutan
    Tetapkan gambar sebagai penanda item daftar
    Tambahkan warna latar belakang ke daftar dan daftar item

Penanda Item Daftar Berbeda

Properti tipe daftar properti menentukan jenis penanda item daftar.

Contoh berikut menunjukkan beberapa penanda 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;
}

Catatan: Beberapa nilai adalah untuk daftar tidak berurutan, dan beberapa untuk daftar pesanan.

Gambar sebagai Item List Marker

Properti bergaya daftar gambar menentukan gambar sebagai penanda item daftar:
Contoh

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

 Posisi List Item Marker

Properti daftar-gaya-posisi menentukan apakah daftar-item penanda harus muncul di dalam atau di luar aliran konten:
Contoh

ul {
    list-style-position: inside;
}

 List/Daftar- Properti disingkatkan

Properti bergaya daftar adalah properti singkat. Ini digunakan untuk mengatur semua properti daftar dalam satu deklarasi:
Contoh

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

Bila menggunakan properti singkat, urutan nilai properti adalah:

    List-style-type (jika daftar-style-image ditentukan, nilai properti ini akan ditampilkan jika gambar karena beberapa alasan tidak dapat ditampilkan)
    Daftar gaya-posisi (menentukan apakah penanda daftar item akan muncul di dalam atau di luar arus isi)
    Daftar-gaya-gambar (menentukan gambar sebagai penanda item daftar)

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

Daftar Styling Dengan Warna

Kita juga bisa membuat daftar gaya dengan warna, agar terlihat lebih menarik.

Apa pun yang ditambahkan ke tag <ol> atau <ul>, mempengaruhi keseluruhan daftar, sedangkan properti yang ditambahkan ke tag <li> akan mempengaruhi item daftar individual:
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. kopi
2. teh
3. susu

• kopi
• teh
• susu

  
Semua Daftar CSS Properties
list gaya Sets semua properti untuk daftar dalam satu deklarasi 
list-style-image Menentukan sebuah gambar sebagai penanda item daftar
list-style-position Menentukan apakah penanda daftar item akan muncul di dalam atau di luar aliran konten
List-style-type Menentukan jenis penanda item daftar

Share :

Tweet

✚

Related Post