Daftar CSS

Daftar tak berurutan:

  • Kopi
  • Teh
  • Coca Cola
  • Kopi
  • Teh
  • Coca Cola

Daftar berurutan:

  1. Kopi
  2. Teh
  3. Coca Cola
  1. Kopi
  2. Teh
  3. Coca Cola

Daftar HTML dan properti CSS

Pada HTML, ada dua jenis utama daftar:

  • Daftar tak berurutan (ul) - item daftar menggunakan tanda daftar penanda
  • Daftar berurutan (ol) - item daftar menggunakan angka atau huruf penanda

Properti CSS daftar memungkinkan Anda:

  • Menetapkan tanda penanda item yang berbeda untuk daftar berurutan
  • Menetapkan tanda penanda item yang berbeda untuk daftar tak berurutan
  • Mengatur gambar sebagai tanda penanda item
  • Menambahkan warna latar untuk daftar dan item daftar

Tanda penanda item yang berbeda

list-style-type Properti menentukan jenis tanda penanda item:

Contoh di bawah menunjukkan beberapa tanda penanda item 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;
}

Coba sendiri

Keterangan:Beberapa nilai digunakan untuk daftar tak berurutan, sementara beberapa nilai digunakan untuk daftar berurutan.

Gambar sebagai tanda penanda item

list-style-image Properti menentukan gambar yang digunakan sebagai tanda penanda item:

Contoh

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

Coba sendiri

Lokalisasi tanda penanda item

list-style-position Properti menentukan posisi tanda penanda item (tanda daftar).

"list-style-position: outside;" menunjukkan titik tanda daftar akan berada di luar item daftar. Awal setiap baris item daftar akan sejajar vertikal. Ini adalah standar:

  • Kopi - Minuman kopi yang diseduh dari kopi yang telah dirokok
  • Teh
  • Coca-cola

"list-style-position: inside;" Menunjukkan bahwa tanda ikon akan berada di dalam item daftar. Karena itu, ia akan menjadi bagian dari teks dan dijadikan di awal untuk mendorong teks:

  • Kopi - Minuman kopi yang diseduh dari kopi yang telah dirokok
  • Teh
  • Coca-cola

Contoh

ul.a {
  list-style-position: outside;
}
ul.b {
  list-style-position: inside;
}

Coba sendiri

Hapus pengaturan default

list-style-type:none Atribut ini juga dapat digunakan untuk menghapus tanda/ikon. Perhatikan bahwa daftar masih memiliki margin dan padding default. Untuk menghapus konten ini, tambahkan di dalam <ul> atau <ol>: margin:0 dan padding:0 :

Contoh

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

Coba sendiri

Daftar - Atribut Singkat

list-style Atribut ini adalah atribut singkat. Ia digunakan untuk mengatur semua atribut daftar dalam satu deklarasi:

Contoh

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

Coba sendiri

Pada penggunaan atribut singkat, urutan nilai atribut adalah:

  • list-style-type(Jika ditentukan list-style-image, nilai atribut ini akan ditampilkan jika gambar tidak dapat ditampilkan untuk alasan apapun)
  • list-style-position(Tentukan apakah tanda item daftar harus ditampilkan di dalam maupun di luar aliran konten)
  • list-style-image(Tentukan gambar yang digunakan sebagai tanda item daftar)

Jika salah satu nilai atribut di atas hilang, maka akan dimasukkan nilai default yang hilang (jika ada).

Atur gaya warna daftar

Kami juga dapat menggunakan pengaturan warna untuk mengatur gaya daftar, sehingga mereka terlihat lebih menarik.

Stil yang ditambahkan ke <ol> atau <ul> akan mempengaruhi seluruh daftar, sementara atribut yang ditambahkan ke <li> akan mempengaruhi setiap item daftar:

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. Coca Cola
  • Kopi
  • Teh
  • Coca Cola

Coba sendiri

Beberapa contoh lainnya

Daftar kiri merah disesuaikan
Contoh ini menunjukkan bagaimana cara membuat daftar dengan garis kiri merah.
Daftar garis pinggang penuh layar
Contoh ini menunjukkan bagaimana cara membuat daftar dengan garis bawah tanpa tanda daftar.
Semua tanda daftar item yang berbeda di daftar
Contoh ini menunjukkan semua tanda daftar item yang berbeda di CSS.

Semua Atribut Daftar CSS

Atribut Deskripsi
list-style Atribut singkat. Dengan satu deklarasi atur semua atribut daftar.
list-style-image Tentukan gambar sebagai tanda daftar item.
list-style-position Tentukan posisi tanda daftar item (tanda bulat).
list-style-type Tentukan tipe tanda daftar item dalam daftar.