Daftar CSS

Senarai tak berurutan:

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

Senarai berurutan:

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

Senarai HTML dan atribut CSS

Dalam HTML, terdapat dua jenis utama senarai:

  • Senarai tak berurutan (ul) - item daftar digunakan tanda daftar
  • Senarai berurutan (ol) - item daftar digunakan tanda nombor atau huruf

Atribut CSS senarai memungkinkan Anda:

  • Tetapkan tanda daftar item yang berbeza untuk senarai berurutan
  • Tetapkan tanda daftar item yang berbeza untuk senarai tak berurutan
  • Tetapkan imej untuk tanda daftar item
  • Menambahkan warna latar belakang untuk daftar dan item daftar

Tanda daftar item yang berbeza

属性 list-style-type Atribut menentukan jenis tanda daftar item:

Contoh di bawah ini menunjukkan beberapa tanda daftar 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 senarai tak berurutan, sementara beberapa nilai digunakan untuk senarai berurutan.

Imej sebagai tanda daftar item

属性 list-style-image Atribut menentukan imej yang digunakan sebagai tanda daftar item:

Contoh

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

Coba sendiri

Penglokasi tanda daftar

属性 list-style-position Atribut menentukan lokasi tanda daftar (tanda daftar)

"list-style-position: outside;" ialah untuk menunjukkan bahawa titik tanda daftar akan berada di luar item daftar. Mulai setiap baris item daftar akan diatur vertikal. Ini adalah default:

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

"list-style-position: inside;" Mewakili tanda tanda di dalam item daftar. Karena ia adalah bagian dari item daftar, ia akan menjadi bagian dari teks dan diangkat di awal teks:

  • Kopi - Bahan minuman 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 standar

list-style-type:none Properti ini juga dapat digunakan untuk menghapus tanda/penanda. Perhatikan bahwa daftar masih memiliki marjin luar dan marjin dalam standar. 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 - Properti singkat

属性 list-style Properti ini adalah properti singkat. Digunakan untuk menetapkan semua properti daftar dalam satu deklarasi:

Contoh

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

Coba sendiri

Dalam penggunaan properti singkat, urutan nilai properti adalah:

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

Jika salah satu nilai properti di atas hilang, maka akan diisi dengan nilai standar (jika ada).

Atur gaya warna daftar

Kami juga dapat menggunakan pengaturan warna untuk mengesuaikan gaya daftar, membuatnya terlihat lebih menarik.

Stil yang ditambahkan kepada <ol> atau <ul> akan mempengaruhi seluruh daftar, sementara properti yang ditambahkan kepada <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 lain

Daftar disesuaikan dengan batang kiri merah
Contoh ini memperlihatkan bagaimana membuat daftar yang mempunyai batang kiri merah.
Daftar batang lebar layar penuh
本例 演示 如何 创建 项目符号 没有边框 列表 带边框
所有 不同 标记 列表
本例 演示 属性 列表不同 所有 CSS 中

所有 属性 列表 CSS

属性 描述
属性 list-style 属性 简写 列表 所有 设置 声明 一条 中
属性 list-style-image 图像 作为 标记 列表项 指定
属性 list-style-position 位置 标记 项目 列表项 规定
属性 list-style-type 类型 标记 列表项 规定