Apakah Jenis Gaya Senarai dan Cara Menggunakannya dalam Tailwind?

Artikel ini akan menggambarkan:

• Apakah Jenis Gaya Senarai dalam CSS Tailwind?
• Bagaimana untuk Menggunakan Jenis Gaya Senarai dalam CSS Tailwind?

Apakah Jenis Gaya Senarai dalam CSS Tailwind?

Jenis gaya senarai ialah sifat CSS yang digunakan untuk menyesuaikan rupa penanda item senarai dalam senarai tersusun

dan senarai tidak tersusun
. Ia menentukan jenis bullet atau gaya penomboran yang akan digunakan untuk item senarai.

---





---






Jenis gaya senarai mengandungi tiga kelas, seperti:





senarai-cakera

Ia menetapkan sifat 'jenis gaya senarai' kepada cakera, yang memaparkan bulatan yang diisi sebagai penanda untuk senarai tidak tersusun '

”




senarai-perpuluhan

Ia menetapkan sifat 'jenis gaya senarai' kepada perpuluhan, yang menunjukkan nilai perpuluhan berangka (1, 2, 3, dsb.) sebagai penanda untuk senarai tersusun '

”.

---





---

senarai-tiada

Ia menetapkan sifat 'jenis gaya senarai' kepada tiada, yang bermaksud tiada penanda dipaparkan untuk item senarai.

Bagaimana untuk Menggunakan Jenis Gaya Senarai dalam CSS Tailwind?

Untuk menggunakan jenis gaya senarai dalam Tailwind CSS, mula-mula buat program HTML dan gunakan elemen senarai di dalamnya dengan menyatakan “ senarai-cakera ” dan “ senarai-perpuluhan ” utiliti. Kemudian, jalankan program HTML dan lihat output untuk pengesahan:





Langkah 1: Cipta Halaman Web HTML Menggunakan Item Senarai

Mula-mula, buat program HTML dan gunakan elemen senarai di dalamnya menggunakan utiliti 'list-disc' dan 'list-decimal'. Sebagai contoh, kami telah menggunakan elemen berikut:

< badan >

< div kelas = 'h-skrin ml-10' >

< ul kelas = 'cakera senarai' >

< itu > Senaraikan item 1 < / itu >

< itu > Senaraikan item 2 < / itu >

< itu > Senaraikan item 3 < / itu >

< / ul >

< br >

< ol kelas = 'senarai-perpuluhan' >

< itu > Senaraikan item 1 < / itu >

< itu > Senaraikan item 2 < / itu >

< itu > Senaraikan item 3 < / itu >

< / ol >

< br >

< ul >

< itu > Senaraikan item 1 < / itu >

< itu > Senaraikan item 2 < / itu >

< itu > Senaraikan item 3 < / itu >

< / ul >

< / div >

< / badan >

di sini,

• Yang pertama, '
  ” mempunyai kelas “cakera senarai” digunakan yang memaparkan penanda bulatan yang diisi untuk setiap item senarai.
  • Yang kedua, '
    ” mempunyai kelas “list-decimal” yang digunakan yang memaparkan nilai perpuluhan berangka sebagai penanda.
    1. yang terakhir '
       ” tidak mempunyai sebarang kelas utiliti yang digunakan, jadi ia akan menggunakan gaya penanda senarai lalai.

       Langkah 2: Lihat Halaman Web HTML

       Kemudian, jalankan program HTML dan lihat halaman web untuk mengesahkan output:

       

       Output di atas telah memaparkan senarai mengikut gayanya.

       Kesimpulan

       Jenis gaya senarai ialah sifat CSS yang digunakan untuk menyesuaikan rupa penanda item senarai dalam senarai tersusun dan tidak tersusun. Ia menentukan jenis bullet atau gaya penomboran yang akan digunakan untuk item senarai. Ia boleh digunakan dalam Tailwind dengan menyatakan “ senarai-cakera ” dan “ senarai-perpuluhan ” utiliti. Artikel ini telah menerangkan tentang jenis gaya senarai dan penggunaannya dalam Tailwind.