daftar HTML digunakan untuk mengelompokkan informasi terkait. Ada tiga jenis daftar:

daftar berpoin —

- setiap elemen daftar
• ditandai dengan spidol,
  daftar bernomor —
  - setiap elemen daftar
  1. ditandai dengan nomor
     daftar definisi- - terdiri dari pasangan suku
     —
     definisi.

     Setiap daftar adalah wadah di mana elemen daftar atau pasangan definisi istilah berada. Elemen daftar berperilaku seperti elemen blok, ditumpuk di bawah satu sama lain dan menempati seluruh lebar blok kontainer. Setiap item daftar memiliki blok tambahan yang terletak di samping, yang tidak berpartisipasi dalam tata letak.

     Membuat Daftar HTML

     1. Daftar berpoin

     Daftar berpoin adalah daftar yang tidak berurutan (dari Daftar Tidak Berurutan Bahasa Inggris). Dibuat menggunakan tag berpasangan

     . Penanda elemen daftar adalah label, misalnya lingkaran terisi.

     Browser secara default menambahkan format berikut ke blok daftar:

     Setiap elemen daftar dibuat menggunakan tag berpasangan

  2. (dari Item Daftar Bahasa Inggris).
  tersedia .
  • Microsoft
  • Google
  • Apel
  Beras. 1. Daftar berpoin

  2. Daftar bernomor

  Daftar bernomor dibuat menggunakan tag berpasangan. Setiap item daftar juga dibuat menggunakan elemen

• . Browser memberi nomor pada elemen secara otomatis, dan jika Anda menghapus satu atau lebih elemen dari daftar tersebut, nomor yang tersisa akan dihitung ulang secara otomatis.

  Blok daftar juga memiliki gaya browser default:

• Atribut nilai tersedia, yang memungkinkan Anda mengubah nomor default untuk item daftar yang dipilih. Misalnya, jika untuk item pertama dalam daftar yang Anda tetapkan
• , maka sisa penomoran akan dihitung ulang relatif terhadap nilai baru.

  Untuk tanda

  Atribut berikut tersedia:
  Tabel 1. Atribut tag

  Atribut	Deskripsi, nilai yang diterima
  terbalik	Atribut reversed menyebabkan daftar ditampilkan dalam urutan terbalik (misalnya, 9, 8, 7...).
  awal	Atribut start menentukan nilai awal dari mana penomoran akan dimulai, misalnya konstruksi item pertama akan diberi nomor seri “10”. Anda juga dapat menentukan jenis penomoran secara bersamaan, misalnya, .
  jenis	Atribut type menentukan tipe penanda yang akan digunakan dalam daftar (huruf atau angka). Nilai yang diterima: 1 — nilai default, penomoran desimal. A — penomoran daftar sesuai abjad, huruf kapital (A, B, C, D). a — daftar penomoran menurut abjad, huruf kecil (a, b, c, d). I - penomoran dengan angka kapital Romawi (I, II, III, IV). i — penomoran dengan angka Romawi kecil (i, ii, iii, iv).

  1. Microsoft
  2. Google
  3. Apel
  Beras. 2. Daftar bernomor

  3. Daftar definisi

  Daftar definisi dibuat menggunakan tag

  . Untuk menambahkan istilah, gunakan tag
  , dan untuk memasukkan definisi - tag
  .

  Blok daftar definisi memiliki gaya browser default berikut:

  Untuk tag

  ,

  Dan

  tersedia .

  Direktur:

  Peter Tochilin

  Pemeran:

  Andrey Gaidulyan

  Alexei Gavrilov

  Vitaly Gogunsky

  Maria Kozhevnikova

  
  Beras. 3. Daftar definisi

  4. Daftar bersarang

  Seringkali, kemampuan daftar sederhana saja tidak cukup; misalnya, saat membuat daftar isi, Anda tidak dapat melakukannya tanpanya item bersarang. Markup untuk daftar bersarang adalah sebagai berikut:

  • Poin 1.
  • Poin 2.
    • Subayat 2.1.
    • Subayat 2.2.
      • Subayat 2.2.1.
      • Subayat 2.2.2.
    • Subayat 2.3.
  • Poin 3.

  
  Beras. 4. Daftar bersarang

  5. Daftar bernomor bertingkat

  Daftar bertingkat digunakan untuk menampilkan item daftar pada tingkat berbeda dengan lekukan berbeda. Markup untuk daftar bernomor bertingkat adalah sebagai berikut:

  1. ayat
  2. ayat
     1. ayat
     2. ayat
     3. ayat
        1. ayat
        2. ayat
        3. ayat
     4. ayat
  3. ayat
  4. ayat

  Markup default ini akan membuat penomoran baru untuk setiap daftar bertumpuk, dimulai dengan satu. Untuk membuat penomoran bertingkat, Anda perlu menggunakan properti berikut:
  counter-reset me-reset satu atau lebih counter dengan menentukan nilai reset;
  kenaikan tandingan menentukan nilai kenaikan penghitung, mis. berapa kenaikan setiap item berikutnya akan diberi nomor;
  konten - konten yang dihasilkan, dalam hal ini bertanggung jawab untuk menampilkan nomor sebelum setiap item daftar.

  Ol ( /* hapus penomoran standar */ gaya daftar: tidak ada; /* Identifikasi penghitung dan beri nama li. Nilai penghitung tidak ditentukan - secara default adalah 0 */ counter-reset: li; ) li :before ( /* Kami mendefinisikan elemen yang akan diberi nomor - li. Elemen semu sebelum menunjukkan bahwa konten yang disisipkan menggunakan properti konten akan ditempatkan sebelum item daftar. Nilai kenaikan penghitung diatur di sini (defaultnya adalah 1 */ kenaikan tandingan: li /). * Properti konten menampilkan nomor item daftar. counters() berarti teks yang dihasilkan mewakili nilai semua counter dengan nama tersebut titik di antara angka, dan titik dengan spasi ditambahkan sebelum konten setiap item daftar */ content: counters(li,".") "."
  Beras. 5. Daftar bernomor bertingkat

Jika Anda pernah mencoba mengubah gaya CSS nomor baris (digit) dalam daftar yang diurutkan

, maka Anda mungkin mengalami masalah. Tidak mungkin mencapai gaya elemen ini menggunakan pemilih CSS. Namun seringkali desain antarmuka melibatkan perubahan warna, latar belakang, ukuran, dll.

Berikut adalah contoh paling sederhana dari daftar tanpa gaya:

html

1. Tanam pohon
2. Membangun rumah
3. Besarkan seorang putra

Mari kita lihat beberapa cara untuk mengatasi masalah di atas.

Secara tradisional cara yang kikuk.

Cara tradisional untuk mengatasi masalah ini adalah dengan menyembunyikan nomor baris yang ditetapkan secara otomatis oleh browser. Dalam hal ini, properti list-style: none; .

css

li( gaya daftar: tidak ada; ) .num( warna: putih; latar belakang: #2980B9; tampilan: blok sebaris; perataan teks: tengah; margin: 5px 10px; tinggi garis: 40px; lebar: 40px; tinggi: 40 piksel)

html

1. 1 Tanam pohon
2. 2 Membangun rumah
3. 3 Besarkan seorang putra

Setuju, ini terlihat berlebihan dan tidak fleksibel. Kami menyembunyikan nomor urut yang ditempatkan secara otomatis dan menggantinya dengan nilai yang ditentukan secara manual, mengacaukan tata letak, dll.

Mari kita lihat bagaimana kita dapat mencapai hasil yang sama tanpa menyumbat tata letak dan menggunakan pseudo-element::before dan properti CSS content , counter-inrice , counter-reset .

Cara yang indah dan benar.

Pertama kami akan memberikan kode dan demonya, lalu kami akan mencari tahu apa itu.

css

ol( counter-reset: myCounter; ) li( gaya daftar: tidak ada; ) li:before ( counter-inrice: myCounter; content:counter(myCounter); warna: putih; latar belakang: #2980B9; display: inline-block; perataan teks: margin: 5px 10px; tinggi garis: 40px;

html

1. Tanam pohon
2. Membangun rumah
3. Besarkan seorang putra

Seperti yang Anda lihat, kode htmlnya tetap bersih dan indah. Dalam hal ini, semua gaya elemen daftar ditransfer ke css.

Mari kita lihat poin demi poin:

• li::sebelumnya– membuat elemen semu di dalam daftar, yang menggantikan anak pertama.
• counter-reset: penghitung saya;– me-reset penghitung css myCounter di dalam masing-masing
  .
  1. kenaikan tandingan: myCounter;– menambah penghitung css myCounter untuk setiap pseudo-element::before .
  2. konten:penghitung(penghitung saya);– mencetak nilai penghitung myCounter saat ini di dalam::before elemen semu.

Detail lebih lanjut tentang penghitung css dapat ditemukan di

Daftar bernomor adalah kumpulan elemen dengan nomor serinya. Jenis dan tipe penomoran tergantung pada parameter elemen

, yang digunakan untuk membuat daftar. Nilai-nilai berikut dapat berfungsi sebagai elemen penomoran:
• Angka Arab (1, 2, 3, ...);
• Angka arab dengan awalan nol untuk bilangan kurang dari sepuluh (01, 02, 03, ...,10);
• huruf latin kapital (A, B, C, ...);
• huruf latin kecil (a, b, c,…);
• angka romawi huruf besar (I, II, III, ...);
• angka romawi huruf kecil (i, ii, iii, ...);
• penomoran Armenia;
• Penomoran Georgia.

Dari sudut pandang praktis, prinsip menampilkan item dalam daftar berpoin dapat diterapkan dengan cara yang mirip dengan daftar bernomor. Namun mengingat kita berurusan dengan enumerasi, ada beberapa fitur yang akan dibahas lebih lanjut.

Penomoran daftar

Diperbolehkan untuk memulai daftar dari nomor berapa pun; atribut awal elemen digunakan untuk tujuan ini

atau nilai elemen tersebut
1. . Nilainya adalah bilangan bulat positif apa pun. Tidak masalah jenis penomoran apa yang ditetapkan, meskipun huruf Latin digunakan sebagai daftar. Jika atribut awal dan nilai diterapkan ke daftar pada saat yang sama, maka atribut nilai akan diutamakan dan penomoran ditampilkan dari angka yang ditentukan oleh nilai, seperti yang ditunjukkan pada Contoh 1.

   Contoh 1: Mengubah penomoran daftar

   4. Anda harus menjaga tempat kerja Anda dengan baik.
   5. Sesuaikan pencahayaan ruangan sehingga sumber cahaya berada di samping atau di belakang operator.
   10. Untuk menghindari komplikasi medis, disarankan memilih kursi dengan dudukan empuk.

   Elemen pertama dari daftar dalam contoh ini akan dimulai dengan angka Romawi IV, karena atribut start="4" ditentukan, kemudian muncul nomor V, dan elemen terakhir keluar dari urutan dan diberi nomor X (Gambar 1).

   Beras. 1. Angka Romawi dalam daftar

   Menulis angka

   Secara default, daftar bernomor memiliki tampilan tertentu: pertama ada angka, lalu titik, dan setelah itu teks ditampilkan dipisahkan dengan spasi. Bentuk penulisan ini bersifat visual dan nyaman, namun beberapa pengembang lebih suka melihat cara berbeda dalam merancang penomoran daftar. Yakni, agar alih-alih titik ada tanda kurung tutup, seperti terlihat pada Gambar. 2 atau sesuatu yang serupa.

   

   Beras. 2. Tampilan daftar bernomor dengan tanda kurung

   Gaya memungkinkan Anda mengubah jenis penomoran daftar menggunakan properti konten dan penghitung kenaikan. Pertama, pemilih ol perlu disetel ke counter-reset : item , ini diperlukan agar penomoran di setiap daftar baru dimulai dari awal. Jika tidak, penomoran akan berlanjut dan bukannya 1,2,3 Anda akan melihat 5,6,7. Nilai item adalah pengidentifikasi unik untuk penghitung; kami memilihnya sendiri. Selanjutnya, Anda perlu menyembunyikan penanda asli melalui properti gaya list-style-type dengan nilai none .

   Properti content biasanya bekerja bersama dengan elemen semu ::after dan ::before. Jadi, konstruksi li::before mengatakan bahwa beberapa konten harus ditambahkan sebelum setiap elemen daftar (contoh 2).

   Contoh 2. Membuat penomoran Anda sendiri

   Li::sebelum ( isi: counter(item) ") "; /* Menambahkan tanda kurung pada angka */ counter-inrice: item; /* Menetapkan nama penghitung */ )

   Properti konten dengan nilai counter(item) menampilkan angka; Dengan menambahkan tanda kurung, seperti yang ditunjukkan dalam contoh ini, kita mendapatkan jenis penomoran yang diperlukan. counter-increment diperlukan untuk menambah nomor daftar sebanyak satu. Perhatikan bahwa pengenal yang sama, bernama item , digunakan di seluruh bagian. Kode terakhir ditunjukkan pada Contoh 3.

   Contoh 3: Mengubah tampilan daftar

   1. Pertama
   2. Kedua
   3. Ketiga
   4. Keempat

   Dengan menggunakan metode di atas, Anda dapat membuat semua jenis daftar bernomor, misalnya, memasukkan angka dalam tanda kurung siku, dalam hal ini hanya satu baris yang akan berubah gayanya.

   Isi: "[" counter(item) "] ";

   Daftar dengan huruf Rusia

   Ada daftar bernomor dengan huruf Latin, tetapi tidak ada huruf Rusia untuk daftar tersebut. Mereka dapat ditambahkan secara artifisial menggunakan teknik di atas. Karena penomoran dilakukan melalui gaya, daftarnya sendiri tetap asli, hanya kelas yang dipilih yang ditambahkan ke dalamnya, sebut saja cyrilic (contoh 4).

   Contoh 4: Kode untuk membuat daftar

   1. Satu
   2. Dua
   3. Tiga

   Menambahkan huruf dilakukan menggunakan elemen semu ::before dan properti konten. Karena setiap baris harus memiliki hurufnya sendiri, kita akan menggunakan kelas semu :nth-child(1) , dengan nomor huruf ditulis dalam tanda kurung. Huruf pertama tentu saja adalah A, huruf kedua adalah B, huruf ketiga adalah C, dan seterusnya. Seluruh himpunan ini ditambahkan ke pemilih li sebagai berikut (contoh 5).

   Contoh 5: Menggunakan kelas semu: anak ke-n

   Sirilik li:nth-child(1)::before ( isi: "a)"; ) .cyrilic li:nth-child(2)::before ( konten: "b)"; ) .cyrilic li:nth-child(3)::before ( konten: "at)"; )

   Dalam contoh ini, setiap huruf diikuti tanda kurung, semua huruf menggunakan huruf kecil. Anda dapat menentukan sendiri jenis penomoran daftar, misalnya dapat berisi huruf kapital dengan titik, dengan satu atau dua tanda kurung, atau huruf saja. Berbeda dengan penomoran standar, kita bebas melakukan apapun yang kita inginkan di sini. Daftar sepuluh huruf seharusnya cukup untuk hampir semua situasi, tetapi jika ini tiba-tiba ternyata tidak cukup, tidak ada yang menghalangi kami untuk memperluas daftar kami dengan memasukkan setidaknya semua huruf alfabet Rusia.

   Kami akhirnya menyesuaikan perataan dan posisi huruf, secara opsional menentukan ukuran font, warna dan parameter lainnya (contoh 6).

   Contoh 6. Daftar dengan huruf Rusia

   1. Borscht
   2. Potongan daging tombak
   3. Kulebyaka
   4. Jamur dalam krim asam
   5. Pancake dengan kaviar
   6. kvass

   Hasil dari contoh ini ditunjukkan pada Gambar. 3.

   Untuk daftar, pembuatannya menggunakan HTML dijelaskan di sini, aturan CSS berikut disediakan.

   tipe gaya daftar

   Menentukan penomoran poin atau daftar, bukan atribut type dalam kode HTML. Nilai properti untuk daftar berpoin dapat berupa:

   • disk- lingkaran, diatur secara default.
   • lingkaran- lingkaran.
   • persegi- persegi.

   Untuk daftar bernomor, properti biasanya diberi nilai berikut:

   • desimal- Angka Arab, nilai default.
   • Romawi rendah- angka romawi kecil.
   • Romawi Atas- angka romawi kapital.
   • alfa rendah- huruf latin kecil.
   • alfa atas- huruf latin kapital.

   Selain itu, untuk tipe daftar apa pun, properti tipe gaya daftar dapat disetel ke none, yang akan menghapus penanda sama sekali.

   Nilai lain tersedia untuk daftar bernomor, seperti cjk-ideografis menetapkan penomoran ideografik, orang Armenia- bahasa Armenia tradisional, dan desimal-depan-nol akan mengatur penomoran dalam angka Romawi, tetapi dengan nol di depannya: 01, 02, 03... 09, namun dalam praktiknya nilai ini dan nilai serupa sangat jarang digunakan.

   Contoh di bawah menampilkan tiga daftar: daftar bernomor dengan penomoran tradisional Armenia, daftar berpoin dengan lingkaran, dan daftar bernomor dengan item yang diberi nomor secara ideografis.

   1. Poin pertama
   2. Poin kedua
   3. Poin ketiga
   • Poin pertama
   • Poin kedua
   • Poin ketiga
   1. Poin pertama
   2. Poin kedua
   3. Poin ketiga

   Hasil.

   Warna penanda cocok dengan warna teks dalam daftar yang ditentukan oleh properti warna.

   gambar gaya daftar

   Memungkinkan Anda mengatur gambar Anda sendiri sebagai penanda daftar. Misalnya, jika folder yang berisi halaman daftar berisi file penanda.png, yang ingin Anda gunakan, maka kode desainnya adalah sebagai berikut:

   Ul ( gambar-gaya-daftar: url("marker.png"); )

   posisi gaya daftar

   Menentukan posisi penanda: apakah ditempatkan di luar batas elemen daftar ( posisi gaya daftar: di luar), atau teks membungkusnya ( posisi-gaya-daftar: di dalam).

   Contoh di bawah ini menunjukkan perbedaan antara nilai-nilai ini. Dalam kasus pertama, penanda berada di dalam daftar; dalam kasus kedua, penanda ditempatkan di luar daftar.

   • Lihat saja perbedaan antara bagian dalam dan luar.
   • Dalam kasus di dalam, penanda langsung masuk ke dalam daftar, tanpa melampaui batasnya dan tanpa mengganggu tata letak. Teks mengalir di sekelilingnya, penandanya sepertinya ada di dalam.
   • Nilai luar memindahkan penanda ke luar daftar.

   Hasilnya, halaman berikut dibuat:

   

   gaya daftar

   Memungkinkan Anda mempersingkat kode dengan menulis ketiga properti yang terdaftar dalam satu baris. Aturan ditulis dipisahkan dengan spasi:

   Ul ( gaya daftar: persegi di dalam; )

   Mari kita lihat contoh halaman dengan tiga daftar. Yang pertama diberi nomor dengan angka dalam format 01, 02, yang kedua ditandai dengan gambar khusus (file marker.png di folder dengan halaman), penanda daftar ketiga dinonaktifkan.

   Kode HTML diberikan di bawah ini.

   1. Poin pertama
   2. Poin kedua
   3. Poin ketiga
   • Poin pertama
   • Poin kedua
   • Poin ketiga
   1. Poin pertama
   2. Poin kedua
   3. Poin ketiga

   Browser akan menampilkan halaman berikut.