Daftar html bersarang. Daftar bernomor. Contoh: Penanda grafis
Daftar secara aktif digunakan untuk penomoran otomatis blok konten. Namun, saat menggunakan daftar bersarang, Anda tidak bisa mendapatkan penomoran sub-item seperti 1.1, 1.2, 1.3, karena setiap daftar akan berdiri sendiri. Tapi apa yang tidak mungkin dalam STML dapat ditetapkan ke gaya.
Pertama, mari kita lihat cara membuat daftar bersarang secara umum. Tag bertindak sebagai penampung utama
- , dan elemen daftar dibentuk oleh tag
- . Daftar bersarang juga dimulai dengan
- , tetapi tag ini harus ditempatkan di dalam penampung
- , begitulah kebenaran sintaks diamati (contoh 1).
Contoh 1. Daftar bersarang normal
daftar bersarang
- Paragraf 1
- Subpasal 1.1
- Subpasal 1.2
- Subpasal 1.3
- Poin 2
- Subpasal 2.1
- Subpasal 2.2
Hasil dari contoh ini ditunjukkan pada Gambar. 1. Harap perhatikan bahwa penomoran daftar bersarang dimulai lagi setiap saat.
Beras. 1. Tampilan daftar bersarang
Sekarang mari kita hapus daftar penomoran bawaan dan buat sesuai dengan yang baru, tetapi dalam bentuk yang kita butuhkan. Ini akan membutuhkan tiga atribut gaya: counter-reset , counter-increment , dan content .
counter-reset - mengatur beberapa variabel yang akan menyimpan nilai counter;
counter-increment - menambah atau mengurangi nilai penghitung dengan angka yang ditentukan;
content - menampilkan nilai penghitung saat menggunakan argumen counter(variable) . Bekerja bersama dengan elemen semu setelah atau sebelum.
Mari kita panggil variabel penghitung list1 untuk daftar level pertama dan list2 untuk level kedua. Kemudian inisiasi penghitung untuk daftar adalah sebagai berikut.
OL ( counter-reset: list1; ) /* Daftar tingkat pertama */
OL OL ( counter-reset: list2; ) /* Daftar tingkat kedua */Dalam hal ini, pemilih konten membantu memisahkan daftar bersarang dari yang terluar. Konstruksi OL OL berarti menerapkan gaya ke tag saja
- , tetapi hanya jika berada di dalam tag lain
- Gugus kalimat
- Subparagraf
- Subparagraf
- Subparagraf
- Gugus kalimat
- Subparagraf
- Subparagraf
- .
Berikut adalah contoh dokumen HTML menggunakan daftar bernomor, tampilan siapa browser ditunjukkan pada Gambar. 2.3.
Contoh daftar bernomor Bintang paling terang yang terlihat dari Bumi adalah:
- Sirius
- K anopus
- Arcturus
- Alfa Centauri
- Vega
- K apella
- Rigel
- Procyon
- Achernar
- Beta Centauri
- Vetelgeuse
- Aldebaran
- Mizar
- Kutub
Beras. 2.Z. daftar bernomor
Di tag
- parameter berikut dapat ditentukan: COMPACT, TYPE dan START.
- .
Contoh rekaman:
- .
Tandai parameter MULAI
- memungkinkan Anda untuk mulai memberi nomor pada daftar bukan dari satu. Nilai parameter START harus selalu berupa bilangan asli, apa pun jenis penomoran daftarnya. Berikut contohnya:
- untuk daftar bernomor, memungkinkan penggunaan parameter TYPE dan VALUE. Parameter TYPE dapat mengambil nilai yang sama dengan tag
- .
- .
Catatan
Browser menginterpretasikan indikasi jenis penomoran untuk item daftar individu dengan cara yang berbeda. Browser Netscape mengubah penomoran untuk elemen ini dan semua elemen berikutnya hingga penggantian berikutnya ditemukan. Internet Explorer hanya mengubah tampilan nomor untuk elemen ini.
Nilai parameter VALUE dari tag
- - memungkinkan Anda untuk mengubah nomor elemen daftar yang diberikan. Ini mengubah penomoran semua elemen berikutnya. Penggunaan umum adalah untuk daftar di mana beberapa elemen dihilangkan. Contoh daftar seperti itu diberikan di atas (Gbr. 2.3). Ini memberikan daftar urutan bintang paling terang, di mana di 58 dan 75 tempat terdapat bintang yang terlihat jelas di garis lintang kita (Mizar adalah bintang paling terang di konstelasi Ursa Major, dan Bintang Utara adalah Ursa Minor).
Berikut adalah contoh asli lain dari penggunaan penomoran berbagai jenis. Kode HTML di bawah ini mendefinisikan tiga daftar dengan penomoran yang berbeda. Agar mudah dilihat, masing-masing daftar ditempatkan di sel tabel yang terpisah. Ketiga daftar itu identik dan hanya berbeda dalam jenis penomoran: di kolom pertama tabel - angka Arab, di kolom kedua - Romawi, dan di kolom ketiga penomoran dalam huruf Latin. Perhatikan bahwa elemen daftar kosong, yaitu setelah tag apa pun
- tidak ada data. Contoh semacam ini dapat digunakan sebagai tabel korespondensi antara angka Arab dan Romawi. Ternyata semua browser yang mendukung daftar dapat digunakan untuk membuat tabel seperti itu (Gambar 2-4) selama Anda mengetikkan kode HTML yang disediakan. Penomoran dalam angka Romawi berfungsi dengan benar hingga nilainya 3999. Dengan memeriksa kolom kanan, Anda dapat memahami bagaimana penomoran dalam huruf Latin dilakukan. Setelah penomoran satu huruf habis (dari A ke Z), nomor dua huruf pertama - AA, dll.
Menggunakan berbagai jenis penomoran dalam daftar
. . .
Beras. 2.4. Berbagai Jenis Penomoran Daftar HTML
HTML mendukung tiga jenis daftar yang berbeda, masing-masing dengan jenisnya sendiri:
Daftar Bernomor
Dalam daftar bernomor, browser secara otomatis memasukkan nomor elemen secara berurutan, dimulai dari beberapa nilai (biasanya 1). Ini memungkinkan Anda untuk memasukkan dan menghapus item daftar tanpa mengganggu penomoran, karena nomor yang tersisa akan dihitung ulang secara otomatis.
Daftar bernomor dibuat menggunakan elemen blok
Menandai- elemen 1
- elemen 2
- elemen 3
Item daftar bernomor harus berisi beberapa item daftar, seperti yang diperlihatkan dalam contoh berikut:
Contoh: Daftar Bernomor
- Cobalah sendiri "
Instruksi langkah demi langkah
- Dapatkan kuncinya
- Masukkan kunci ke dalam kunci
- Putar kunci dua putaran
- Dapatkan kunci dari gembok
- Buka pintunya
Instruksi langkah demi langkah
- Dapatkan kuncinya
- Masukkan kunci ke dalam kunci
- Putar kunci dua putaran
- Dapatkan kunci dari gembok
- Buka pintunya
Terkadang saat melihat kode HTML yang ada, Anda akan menemukan argumennya jenis dalam elemen
- A - huruf latin besar (A, B, C . . .);
- a - huruf latin kecil (a, b, c . . .);
- I - angka Romawi besar (I, II, III . . .);
- i - angka Romawi kecil (i, ii, iii . . .);
- 1 - Angka Arab (1, 2, 3 . . .) (digunakan secara default).
- dengan cara berikut:
-
Dalam hal ini, penomoran berurutan dari daftar akan terputus dan sejak saat itu penomoran akan dimulai lagi, dalam hal ini dari tujuh.
Contoh penggunaan atribut nilai menandai
Dalam contoh ini, "Item Daftar Pertama" akan menjadi nomor 1, "Item Daftar Kedua" akan menjadi nomor 7, dan "Item Daftar Ketiga" akan menjadi nomor 8.
Memformat daftar bernomor dengan CSS
Untuk mengubah nomor daftar, gunakan properti daftar-gaya-jenis lembar gaya css:
- . Indentasi browser setiap item daftar dan secara otomatis menampilkan poin.
- Poin pertama
- Poin kedua
- Paragraf ketiga
- tidak perlu hanya menempatkan teks, diperbolehkan menempatkan elemen konten streaming apa pun (tautan, paragraf, gambar, dll.)
- adalah mungkin untuk membuat daftar bersarang, atau daftar tingkat kedua. Untuk menyarangkan daftar, jelaskan daftar baru di dalam elemen
- daftar yang sudah ada. Saat menyarangkan satu daftar berpoin ke daftar berpoin lainnya, browser secara otomatis mengubah gaya poin untuk daftar tingkat kedua. Daftar apa pun dapat disarangkan di dalam yang lain. Contoh berikut menunjukkan struktur daftar berpoin yang bersarang di item kedua dari daftar bernomor.
- Cobalah sendiri "
- Senin
- Kirim surat
- Kunjungan ke editor
- Pemilihan topik
- Desain dekoratif
- Laporan akhir
- Tampilan pesan malam
- Selasa
- Merevisi jadwal
- Kirim gambar
- Rabu...
- Senin
- Kirim surat
- Kunjungan ke editor
- Pemilihan topik
- Desain dekoratif
- Laporan akhir
- Tampilan pesan malam
- Selasa
- Merevisi jadwal
- Kirim gambar
- Rabu...
- Cobalah sendiri "
- Kopi
- Kopi
- Kopi
- Kopi
- Kopi
- susu
- Kopi
- susu
- Kopi
- susu
- Kopi
- susu
- Cobalah sendiri "
- Taurus
- Gemini
- Aries
- Taurus
- Gemini
- (dari bahasa Inggris. Istilah Definisi - kata yang ditentukan, istilah) dan
- (dari bahasa Inggris. Deskripsi Definisi - deskripsi istilah yang ditentukan).
- Istilah pertama
- Deskripsi istilah pertama
- Istilah kedua
- Deskripsi istilah kedua
- Cobalah sendiri "
- World Wide Web
- - dari bahasa Inggris. World Wide Web (WWW) adalah sistem terdistribusi yang menyediakan akses ke dokumen yang saling berhubungan yang terletak di berbagai komputer yang terhubung ke Internet.
- Internet
- - satu set jaringan yang menggunakan protokol pertukaran tunggal untuk mengirimkan informasi.
- Situs web
- - sekumpulan halaman web terpisah yang saling terhubung oleh tautan dan satu desain.
- Angka Arab (1, 2, 3, ...);
- Angka Arab dengan nol di depan untuk angka kurang dari sepuluh (01, 02, 03, ..., 10);
- huruf latin besar (A, B, C, ...);
- huruf latin kecil (a, b, c, ...);
- Angka Romawi dalam huruf besar (I, II, III, ...);
- Angka Romawi dalam huruf kecil (i, ii, iii, ...);
- penomoran Armenia;
- penomoran Georgia.
- . Nilainya adalah bilangan bulat positif apa pun. Jenis penomoran apa pun yang ditetapkan, meskipun huruf Latin digunakan sebagai daftar. Jika atribut awal dan nilai diterapkan ke daftar, maka yang terakhir diutamakan dan penomoran dimulai dari angka yang ditentukan oleh nilai , seperti yang ditunjukkan pada contoh 1.
Contoh 1 - Ubah penomoran daftar
Daftar - Anda harus merawat tempat kerja Anda dengan baik.
- Sesuaikan pencahayaan di ruangan agar sumber cahaya berada di samping atau di belakang operator.
- Untuk menghindari komplikasi medis, disarankan untuk memilih kursi dengan dudukan yang empuk.
Elemen pertama dari daftar dalam contoh ini akan dimulai dengan angka Romawi IV, karena atribut start="4" ditentukan, maka nomor V, dan elemen terakhir, yang tidak berurutan, diberi nomor X (Gbr. 1).
Beras. 1. Angka Romawi dalam daftar
Menulis angka
Secara default, daftar bernomor memiliki bentuk tertentu: pertama ada angka, lalu titik, dan setelah itu teks ditampilkan dipisahkan oleh spasi. Bentuk penulisan ini visual dan nyaman, tetapi beberapa pengembang lebih suka melihat cara penomoran daftar yang berbeda. Yaitu, untuk mengganti titik dengan braket penutup, seperti yang ditunjukkan pada Gambar. 2 atau yang serupa.
Beras. 2. Jenis daftar bernomor dengan tanda kurung
Gaya memungkinkan Anda untuk mengubah penomoran daftar menggunakan konten dan properti penambahan kontra. Pertama, pemilih ol perlu disetel ke counter-reset : item , ini diperlukan agar penomoran di setiap daftar baru dimulai kembali. Jika tidak, penomoran akan berlanjut dan bukannya 1,2,3 Anda akan melihat 5,6,7. Nilai item adalah pengidentifikasi penghitung unik, kami memilihnya sendiri. Selanjutnya, Anda perlu menyembunyikan penanda asli melalui properti style list-style-type dengan nilai none .
Properti content biasanya bekerja bersama dengan elemen semu ::after dan ::before . Jadi, konstruksi li::before mengatakan bahwa sebelum setiap elemen daftar, beberapa konten harus ditambahkan (contoh 2).
Contoh 2. Membuat penomoran Anda sendiri
Li::sebelum ( konten: counter(item) ") "; /* Menambahkan tanda kurung pada angka */ counter-increment: item; /* Tetapkan nama penghitung */ )
Properti konten dengan penghitung nilai (item) menghasilkan angka; dengan menambahkan tanda kurung, seperti yang ditunjukkan dalam contoh ini, kita mendapatkan jenis penomoran yang diinginkan. counter-increment diperlukan untuk menambah nomor daftar satu per satu. Perhatikan bahwa pengidentifikasi yang sama, bernama item , digunakan di seluruh. Kode terakhir ditunjukkan pada contoh 3.
Contoh 3 - Mengubah tampilan daftar
Daftar - Pertama
- Kedua
- Ketiga
- Keempat
Dengan cara di atas, Anda dapat membuat daftar bernomor apa pun, misalnya, mengambil nomor dalam tanda kurung siku, dalam hal ini hanya satu baris yang akan berubah dalam gaya.
Konten: "[" 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, daftar itu sendiri tetap asli, hanya kelas yang dipilih yang ditambahkan ke dalamnya, sebut saja cyrilic (contoh 4).
Contoh 4. Kode untuk membuat daftar
- Satu
- Dua
- Tiga
Huruf ditambahkan menggunakan ::before pseudo-element dan properti konten. Karena setiap baris harus memiliki hurufnya sendiri, kita akan menggunakan pseudo-class :nth-child(1), nomor hurufnya ditulis dalam tanda kurung. Huruf pertama tentu saja A, huruf kedua B, huruf ketiga C, dan seterusnya Seluruh rangkaian ini ditambahkan ke pemilih li sebagai berikut (contoh 5).
Contoh 5 Menggunakan :nth-child Pseudo-Class
Cyrilic li:nth-child(1)::before ( konten: "a)"; ) .cyrilic li:nth-child(2)::before ( konten: "b)"; ) .cyrilic li:nth-child(3)::before ( konten: "to)"; )
Dalam contoh ini, setiap huruf diikuti dengan tanda kurung, semua huruf adalah huruf kecil. Anda dapat menentukan jenis penomoran daftar Anda sendiri, misalnya, dapat berisi huruf kapital dengan titik, dengan satu atau dua tanda kurung, atau hanya huruf. Tidak seperti penomoran standar, kami bebas melakukan apa pun yang kami 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 untuk 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
Daftar - Borsch
- irisan daging pike
- Kulebyak
- Jamur dalam krim asam
- Panekuk dengan kaviar
- Kvass
Hasil dari contoh ini ditunjukkan pada Gambar. 3.
- 4,5 dari 5 berdasarkan 2 suara
Sangat sering, informasi tertentu di situs harus disajikan dalam bentuk daftar.
Daftar memungkinkan Anda mengatur dan mensistematisasikan berbagai informasi dan menyajikannya kepada pengunjung dalam bentuk yang nyaman.
Daftar dalam HTML terdiri dari tiga jenis: daftar berpoin, daftar bernomor, dan daftar definisi. Mari kita lihat cara membuatnya secara berurutan.
Daftar yang ditandai.
Jenis daftar ini adalah yang paling umum digunakan. Daftar berpoin dalam HTML dibuat menggunakan tag
- . Pada saat yang sama, penanda ditambahkan di depan setiap elemen daftar, secara default penanda dalam bentuk lingkaran. Dengan bantuan tag, sebuah wadah dibuat, di dalamnya terdapat elemen-elemen daftar: .
Kode daftar berpoin akan terlihat seperti ini:
- Opsi seperti ini
- Pilihan ini
- Semacam opsi
Anda dapat mencoba membuat halaman HTML menggunakan kode ini dan Anda akan mendapatkan daftar berikut sebagai hasilnya:
Seperti yang Anda lihat, setiap elemen daftar terletak di baris baru, dengan lekukan tertentu dibuat di kiri, atas, dan bawah. Setiap item dalam daftar dimulai dengan penanda, yang bisa berupa lingkaran terisi (default), lingkaran, atau kotak. Menandai
- ada atribut tipe, dengan bantuan gaya penanda diatur. Atribut ini memiliki nilai berikut:
- cakram - lingkaran;
- lingkaran - lingkaran;
- persegi - persegi.
- Opsi seperti ini
- Pilihan ini
- Semacam opsi
- Opsi seperti ini
- Pilihan ini
- Semacam opsi
- . Dengan cara ini, Anda dapat membuat daftar dengan berbagai penanda.
- Opsi seperti ini
- Pilihan ini
- Semacam opsi
Hasilnya adalah sebagai berikut:
Daftar bernomor.
Daftar bernomor dalam HTML adalah daftar yang setiap item memiliki nomor urut, daftar bernomor dibuat menggunakan tag
- dan bersarang di tag-nya
-
- Garis pertama
- Baris kedua
- baris ketiga
Daftar seperti itu terlihat seperti ini:
Penomoran default adalah angka Arab. Tapi tagnya
- ada atribut tipe, dengan bantuan nilai-nilai yang penomorannya dapat dilakukan dengan huruf besar (type="A") atau huruf kecil (type="a") Latin, angka Romawi di bagian atas (type= "I") dan register yang lebih rendah (type="i" ).
- . Menandai
- membuat wadah untuk daftar, tag
- menetapkan istilah, dan tag
- deskripsi atau definisi dari suatu istilah.
Daftar ini ditulis sebagai berikut:
- Istilah 1
- Definisi istilah 1
- istilah 2
- Definisi istilah 2
- istilah 3
- Definisi istilah 3
Ini akan menghasilkan daftar berikut:
Seperti yang Anda lihat, ini membuat indentasi yang sesuai untuk teks istilah dan definisi.
Daftar bersarang atau bertingkat dalam HTML.
Kadang-kadang daftar lain perlu disarangkan dalam satu elemen dari jenis daftar tertentu. HTML memiliki kemampuan untuk menyarangkan daftar tanpa batas waktu di dalam elemen daftar lainnya.
Misalnya, berikut adalah kode yang menyarangkan daftar bernomor di dalam item daftar berpoin.
- Opsi seperti ini
- Garis pertama
- Baris kedua
- baris ketiga
- Pilihan ini
- Garis pertama
- Baris kedua
- baris ketiga
- Semacam opsi
- Garis pertama
- Baris kedua
- baris ketiga
Mencari
Langganan
Entri populer
Catatan terakhir
Di bawah ini adalah versi kode yang disingkat, dan jenis penomoran yang bisa dalam satu kasus atau lainnya.
Tampilan daftar:
Tampilan daftar:
Penomoran dalam huruf kecil alfabet Latin:
Tampilan daftar:
Tampilan daftar:
Tampilan daftar:
Daftar definisi dalam HTML.
Daftar definisi adalah jenis daftar khusus. Mereka berbeda karena setiap elemen daftar terdiri dari dua elemen, istilah dan teks yang mengungkapkan artinya. Daftar ini dibuat menggunakan tag
Nilai disk digunakan secara default.
Contoh membuat daftar berpoin dengan penanda lingkaran:
Akibatnya, daftar akan mengambil bentuk berikut:
Membuat daftar berpoin dengan penanda persegi:
Daftarnya akan terlihat seperti:
Atribut type dapat diterapkan lebih dari sekedar tag
- , tetapi juga untuk tag
Gaya Daftar Bernomor
Contoh Arti Keterangan a, b, c alfa rendah Huruf kecil A, B, C alfa atas Huruf kapital saya, ii, iii romawi rendah Angka Romawi dalam huruf kecil Saya, II, III romawi atas Angka Romawi dengan huruf kapital Contoh: Menerapkan properti CSS daftar-gaya-jenis
Daftar berpoin
Daftar berpoin pada dasarnya mirip dengan daftar bernomor, hanya saja daftar tersebut tidak berisi penomoran item secara berurutan. Daftar berpoin dibuat menggunakan elemen blok
MenandaiDalam contoh berikut, Anda dapat melihat bahwa, secara default, penanda lingkaran kecil yang diisi ditambahkan di depan setiap item daftar:
Di dalam tag
Daftar Bersarang
Daftar apa pun dapat disarangkan di dalam yang lain. Di dalam sebuah elemenContoh: Daftar Bersarang
Memformat daftar berpoin
Untuk mengubah tampilan penanda daftar, gunakan properti daftar-gaya-jenis lembar gaya css:
Contoh berikut menampilkan gaya yang berbeda untuk daftar berpoin:
Contoh: Gaya Daftar Berpoin
Cakram:
lingkaran:
Persegi:
Tidak ada:
Penanda grafis.
Dalam HTML, dimungkinkan untuk membuat daftar dengan penanda grafis. Ini adalah satu hal ketika penanda daftar adalah lingkaran atau kotak standar, dan hal lain lagi ketika pengembang memilih penanda itu sendiri sesuai dengan desain halaman. Agar item daftar terlihat cantik, gambar kecil sering digunakan.
Untuk mengganti penanda biasa dengan grafik, ganti propertinya daftar-gaya-jenis per properti daftar-gaya-gambar dan tentukan URL gambar:Contoh: Penanda grafis
lambang Zodiak
lambang Zodiak
Daftar definisi (deskripsi)
Daftar definisi sangat berguna untuk membuat, misalnya, glosarium istilah pribadi Anda. Setiap item dalam daftar definisi memiliki dua bagian: istilah dan definisinya.
Anda memasukkan seluruh daftar ke dalam sebuah elemen
Daftar definisi sering digunakan dalam publikasi ilmiah, teknis dan pendidikan, membuat glosarium, kamus, buku referensi, dll.Struktur umum dari daftar deskripsi adalah sebagai berikut:
Contoh berikut menunjukkan satu kemungkinan penggunaan daftar definisi:
Contoh: Daftar definisi
World Wide Web - dari bahasa Inggris. World Wide Web (WWW) adalah sistem terdistribusi yang menyediakan akses ke dokumen yang saling berhubungan yang terletak di berbagai komputer yang terhubung ke Internet. Internet adalah sekumpulan jaringan yang menggunakan protokol pertukaran tunggal untuk mentransfer informasi. Situs adalah sekumpulan halaman web individual yang dihubungkan oleh tautan dan memiliki desain yang sama.
Secara default, teks istilah terletak di tepi kiri jendela browser, dan deskripsi istilah terletak di bawah dan digeser ke kanan.
Daftar bernomor adalah sekumpulan elemen dengan nomor urutnya. Jenis dan jenis penomoran tergantung pada parameter elemen
- , yang digunakan untuk membuat daftar. Nilai-nilai berikut dapat bertindak sebagai elemen penomoran:
Dari sudut pandang praktis, prinsip menampilkan elemen daftar berpoin dapat diterapkan dengan cara yang mirip dengan daftar bernomor. Tetapi mengingat kita berurusan dengan pencacahan, ada beberapa fitur yang akan dibahas lebih lanjut.
Penomoran daftar
Diijinkan untuk memulai daftar dengan nomor apapun; atribut start elemen digunakan untuk tujuan ini
- atau nilai pada elemen
Di sini: ketik - karakter daftar:
Jika Anda ingin daftar dimulai dengan angka selain 1, Anda harus menentukannya menggunakan atribut awal menandai
Contoh berikut menampilkan daftar terurut dengan angka Romawi besar dan nilai awal XLIX:Penomoran juga dapat dimulai dengan menggunakan atribut nilai, yang ditambahkan ke elemen
Contoh rekaman:
- .
- .
Notasi semacam itu menentukan penomoran daftar dari huruf kapital Latin "E". Untuk jenis penomoran lainnya, entri START=5 akan menetapkan penomoran masing-masing dari angka "5", angka romawi "V", dll.
Mengubah jenis penomoran daftar dan nilai angka juga dapat dilakukan untuk setiap elemen daftar. Menandai
- untuk daftar bernomor, memungkinkan penggunaan parameter TYPE dan VALUE. Parameter TYPE dapat mengambil nilai yang sama dengan tag
Parameter COMPACT memiliki arti yang sama dengan daftar bullet. Parameter TYPE digunakan untuk menentukan bagaimana daftar diberi nomor. Itu dapat mengambil nilai-nilai berikut:
JENIS = A - menetapkan penanda dalam bentuk huruf Latin huruf besar;
JENIS = a - menetapkan penanda dalam bentuk huruf latin kecil;
JENIS = I - menetapkan penanda dalam bentuk angka Romawi besar;
JENIS = i - menetapkan penanda dalam bentuk angka Romawi kecil;
JENIS = 1 - menetapkan penanda dalam bentuk angka Arab.
Secara default, nilai JENIS = 1 selalu digunakan, yaitu penomoran menggunakan angka Arab. Ini juga berlaku untuk daftar urutan bersarang. Di sini, tidak seperti daftar berpoin, browser secara default tidak membuat penomoran yang berbeda pada tingkat daftar bersarang yang berbeda. Perhatikan bahwa setelah nomor elemen daftar, tanda "titik" selalu ditampilkan sebagai tambahan.
Parameter TYPE dengan nilai yang sama dapat digunakan untuk menentukan bagaimana elemen individual dari daftar harus diberi nomor. Untuk melakukan ini, parameter TYPE dengan nilai yang sesuai diizinkan untuk ditentukan dalam tag elemen daftar
-
.
Nilai penghitung dinaikkan melalui OL LI:before pemilih, yang ditambahkan atribut counter-increment dan gaya konten. Atribut counter-increment dengan nilai list1 menambahkan counter ini satu per satu, dan content: counter(list1) "." menampilkan nilai counter sebelum item daftar. Atribut ini bekerja berpasangan, sehingga harus diaktifkan pada saat yang bersamaan.
OL LI: sebelum ( /* Daftar tingkat pertama */
kontra-kenaikan: list1;
/* Menampilkan nilai sebagai 1., 2.*/
}
OL OL LI: sebelum ( /* Daftar tingkat kedua */
kontra-kenaikan: list2; /* Penghitung pertambahan */
}Untuk daftar bersarang, kami kembali menggunakan pemilih konten (OL OL ) dan secara bersamaan menggunakan output dari penghitung list1 dan list2 , dalam hal ini kami akan mendapatkan penomoran dari jenis yang kami butuhkan.
Kode terakhir ditunjukkan pada contoh 2.
Contoh 2: Daftar bersarang dengan penomoran otomatis
daftar bersarang
Hasil dari contoh ini ditunjukkan pada Gambar. 2.
Beras. 2. Tampilan daftar penomoran otomatis di browser Opera
Komentar
Contoh di atas tidak berfungsi di Internet Explorer hingga dan termasuk versi 7, karena tidak mendukung salah satu properti gaya di atas.
Karena Internet Explorer tidak mendukung banyak atribut gaya yang menarik, penomoran biasa dalam daftar harus dibiarkan tidak tersentuh khusus untuknya. Untuk melakukannya, hapus list-style-type: none . Tetapi ini juga akan memengaruhi browser lain di mana contoh berfungsi dengan benar, jadi Anda harus menggunakan peretasan - inilah yang dimaksud ketika browser yang berbeda diberi kode gaya yang berbeda. Misalnya, Anda dapat menggunakan tag !important. Menambahkan !important ke nilai atribut gaya akan meningkatkan kepentingannya. Jika Anda mendefinisikan ulang nilai atribut yang sama tanpa !important , itu akan diabaikan oleh browser. Tapi tidak di Internet Explorer versi 6 ke bawah.
LI(
list-style-type: none !important; /* Menghapus penomoran di browser Opera, Safari, Firefox */
daftar-gaya-jenis: desimal; /* Tinggalkan penomoran di IE6 dan di bawahnya */
}Mengganti kode-kode ini dengan string dengan pemilih LI pada contoh 2, kami mendapatkan daftar bersarang yang berfungsi dengan benar di semua browser.
Tipe lain dari daftar yang diimplementasikan dalam HTML adalah daftar bernomor. Kalau tidak, daftar HTML jenis ini disebut dipesan. Nama belakang sering digunakan sebagai terjemahan formal dari nama tag yang sesuai.
- , dengan bantuan daftar jenis ini yang diatur dalam dokumen HTML (OL - Daftar Berurutan, daftar berurut).
Daftar jenis ini biasanya merupakan urutan berurutan dari elemen individu. Perbedaan dari daftar berpoin adalah bahwa dalam daftar bernomor, setiap elemen secara otomatis didahului dengan nomor urut. Jenis penomoran tergantung pada browser dan dapat diatur oleh parameter dari tag daftar. Jika tidak, penerapan daftar bernomor sangat mirip dengan penerapan daftar berpoin.
tag
- Dan
Untuk membuat daftar bernomor, Anda harus menggunakan tag wadah, di mana semua elemen daftar berada. Tag awal dan akhir daftar memberikan jeda baris sebelum dan sesudah daftar, sehingga memisahkan daftar dari konten utama dokumen.
Seperti daftar berpoin, setiap item dalam daftar berpoin harus dimulai dengan tag
- Paragraf 1
- , begitulah kebenaran sintaks diamati (contoh 1).