Tạo danh sách đa cấp trong HTML khó hơn tạo danh sách đa cấp trong trình xử lý văn bản, nhưng vẫn có thể đạt được bằng cách sử dụng HTML và CSS. Dưới đây là các bước về cách tạo danh sách đa cấp trong HTML với sự hỗ trợ của CSS.

Trước khi thử các bước sau, hãy lưu ý rằng để tạo danh sách đa cấp trong HTML, bạn phải lồng danh sách vào một mục danh sách khác. Ngoài ra, vì HTML chỉ có danh sách dấu đầu dòng hoặc danh sách số, nếu bạn muốn thay đổi kiểu danh sách, bạn phải sử dụng CSS để tạo một kiểu kiểu mới.

Ví dụ HTML

Dưới đây là một ví dụ về cách một danh sách đa cấp có thể được thực hiện trong HTML bằng cách sử dụng HTML và kiểu CSS được xác định trong các thẻ HTML. Trong ví dụ này, chúng ta có hai mục danh sách và trong mục danh sách thứ hai, một danh sách có thứ tự khác có kiểu danh sách alpha thấp hơn để tạo kiểu danh sách a, b, v.v.

<ol>
<li>First</li>
<li>Second
<ol style="list-style-type: lower-alpha; padding-bottom: 0;">
  <li style="margin-left:2em">Sub of Second</li>
  <li style="margin-left:2em; padding-bottom: 0;">Another Sub</li>
 </ol>
</li>
<li>Third</li>
<li>Fourth </li>
</ol>

Trong ví dụ của chúng tôi ở trên, chúng tôi đang sử dụng đệm và lề bổ sung để giúp thích ứng với các giá trị CSS toàn cầu của chúng tôi để đưa ra ví dụ về cách bạn có thể thêm hoặc lại thụt lề.

Ví dụ về đầu ra

  1. Ngày thứ nhất
  2. Thứ hai
    1. Sub of Second
    2. Sub khác
  3. Ngày thứ ba
  4. Thứ tư

Ví dụ về CSS và HTML

Giải pháp trên hoạt động hiệu quả nếu bạn chỉ cần tạo một danh sách đa cấp một vài lần. Tuy nhiên, nếu bạn có ý định có một số danh sách đa cấp trên toàn bộ trang web của mình, tốt hơn hết bạn nên bao gồm mã CSS tương tự như ví dụ bên dưới. Trong ví dụ của chúng tôi, chúng tôi đã tạo hai lớp được gọi là “ Roman” và “ Quảng trường”Và gọi chúng bằng mã HTML.

Mã CSS

<style type="text/css">
.roman {
list-style-type: lower-roman;
}
.square {
list-style-type: square;
margin-left: -2em;
}
</style>

Mã HTML

<ul >
<li>First</li>
<li>Second
<ul >
<li>Sub of Second</li>
<li>Another Sub</li>
</ul>
</li>
<li>Third</li>
<li>Fourth</li>
</ul>

Ví dụ về đầu ra

  • Ngày thứ nhất
  • Thứ hai
    • Sub of Second
    • Sub khác
  • Ngày thứ ba
  • Thứ tư

Giá trị kiểu danh sách CSS có sẵn

Dưới đây là danh sách các giá trị kiểu danh sách CSS khác có thể được sử dụng thay cho các ví dụ mà chúng tôi đã trình bày trước đó. Chúng tôi cũng đã bao gồm một mô tả ngắn gọn về từng giá trị.

Không phải tất cả các giá trị này đều hoạt động hoặc xuất hiện giống nhau trong tất cả các trình duyệt.

đĩa – Hình tròn nhỏ đặc (hình trên).
hình tròn – Hình tròn nhỏ trống (hình trên).
vuông – Hình vuông đặc.
thập phân – Số thập phân bắt đầu bằng “1.” (hình trên).
thập phân-đứng đầu-số 0 – Số thập phân bắt đầu bằng 0 (ví dụ: 01, 02, 03, v.v.).
low-roman – Chữ số la mã viết thường bắt đầu bằng “i.”.
chữ hoa – Chữ số la mã viết hoa bắt đầu bằng “I.”.
Lower-Hy Lạp – Tiếng Hy Lạp viết thường.
chữ Latinh viết thường – Chữ Latinh viết thường
upper-latin – Chữ hoa Latinh
armenian – Đánh số Armenia truyền thống
georgian – Đánh số Georgia truyền thống.
chữ thường – ký tự chữ cái viết thường bắt đầu bằng “a”. (hình trên).
chữ hoa – Chữ cái viết hoa bắt đầu bằng “A.”.
không – Không hiển thị gì.

Trên đây là thông tin về Cách tạo danh sách đa cấp trong HTML. Nếu bạn có bất kì câu hỏi nào, xin vui lòng hỏi helpsly.net trong một bình luận bên dưới. Tôi rất vui khi được giúp đỡ bạn.