Loại kiểu danh sách là gì và cách sử dụng nó trong Tailwind?

Bài viết này sẽ minh họa:

• Loại kiểu danh sách trong Tailwind CSS là gì?
• Cách sử dụng Loại kiểu danh sách trong Tailwind CSS?

Loại kiểu danh sách trong Tailwind CSS là gì?

Loại kiểu danh sách là một thuộc tính CSS được sử dụng để tùy chỉnh giao diện của các điểm đánh dấu mục danh sách trong danh sách có thứ tự

và danh sách không có thứ tự
. Nó chỉ định loại dấu đầu dòng hoặc kiểu đánh số sẽ được sử dụng cho các mục danh sách.

---





---






Kiểu kiểu danh sách chứa ba lớp, chẳng hạn như:





danh sách đĩa

Nó đặt thuộc tính “list-style-type” thành đĩa, hiển thị một vòng tròn đầy làm điểm đánh dấu cho các danh sách không có thứ tự “

”




danh sách thập phân

Nó đặt thuộc tính “kiểu danh sách” thành số thập phân, thuộc tính này hiển thị các giá trị số thập phân (1, 2, 3, v.v.) làm điểm đánh dấu cho danh sách có thứ tự “

”.

---





---

danh sách không có

Nó đặt thuộc tính “list-style-type” thành none, nghĩa là không có điểm đánh dấu nào được hiển thị cho các mục trong danh sách.

Cách sử dụng Loại kiểu danh sách trong Tailwind CSS?

Để sử dụng kiểu kiểu danh sách trong Tailwind CSS, trước tiên, hãy tạo một chương trình HTML và sử dụng các phần tử danh sách trong đó bằng cách chỉ định “ danh sách đĩa ' Và ' danh sách thập phân ” tiện ích. Sau đó, chạy chương trình HTML và xem đầu ra để xác minh:





Bước 1: Tạo trang web HTML bằng các mục danh sách

Trước tiên, hãy tạo một chương trình HTML và sử dụng các thành phần danh sách trong đó bằng các tiện ích “list-disc” và “list-decimal”. Chẳng hạn, chúng tôi đã sử dụng các yếu tố sau:

< thân hình >

< div lớp học = 'h-màn hình ml-10' >

< u lớp học = 'danh sách-đĩa' >

< cái đó > Liệt kê mục 1 < / cái đó >

< cái đó > Liệt kê mục 2 < / cái đó >

< cái đó > Liệt kê mục 3 < / cái đó >

< / u >

< anh >

< ol lớp học = 'danh sách-thập phân' >

< cái đó > Liệt kê mục 1 < / cái đó >

< cái đó > Liệt kê mục 2 < / cái đó >

< cái đó > Liệt kê mục 3 < / cái đó >

< / ol >

< anh >

< u >

< cái đó > Liệt kê mục 1 < / cái đó >

< cái đó > Liệt kê mục 2 < / cái đó >

< cái đó > Liệt kê mục 3 < / cái đó >

< / u >

< / div >

< / thân hình >

Đây,

• Đầu tiên, “
  ” có lớp “list-disc” được áp dụng để hiển thị các điểm đánh dấu vòng tròn đã điền cho từng mục danh sách.
  • Thư hai, '
    ” có lớp “list-decimal” được áp dụng để hiển thị các giá trị số thập phân dưới dạng điểm đánh dấu.
    1. Cuối cùng '
       ” không có bất kỳ lớp tiện ích nào được áp dụng, vì vậy nó sẽ sử dụng kiểu đánh dấu danh sách mặc định.

       Bước 2: Xem trang web HTML

       Sau đó, chạy chương trình HTML và xem trang web để xác minh đầu ra:

       

       Đầu ra ở trên đã hiển thị các danh sách theo đó chúng được tạo kiểu.

       Phần kết luận

       Loại kiểu danh sách là một thuộc tính CSS được sử dụng để tùy chỉnh giao diện của các điểm đánh dấu mục danh sách trong danh sách có thứ tự và không có thứ tự. Nó chỉ định loại dấu đầu dòng hoặc kiểu đánh số sẽ được sử dụng cho các mục danh sách. Nó có thể được sử dụng trong Tailwind bằng cách chỉ định “ danh sách đĩa ' Và ' danh sách thập phân ” tiện ích. Bài viết này đã giải thích về loại kiểu danh sách và cách sử dụng nó trong Tailwind.