Tạo danh sách có thứ tự trong HTML

Thẻ ul, ol và li là một trong những thẻ HTML cơ bản, thường xuyên được dùng. Hôm nay Freehost Page sẽ hướng dẫn bạn cách sử dụng chúng.

Danh sách dùng để làm gì?

Danh sách là những thứ mà có liên quan mật thiết với nhau do có đặc điểm chung nào đó, chẳng hạn danh sách học sinh trong một lớp, danh sách các công ty giàu nhất thế giới, danh sách các loại thực phẩm tốt cho trí não

Khi bạn sử dụng thẻ danh sách, nghĩa là bạn thông báo cho người đọc cũng như các công cụ tìm kiếm biết sự liên quan của các phần tử nằm trong danh sách.

Sự khác nhau giữa ul và ol

Các danh sách không có thứ tự kiểu như thế này:

Được tạo thành từ các thẻ ul và li

Còn danh sách được đánh thứ tự kiểu như thế này:

Được tạo thành từ các thẻ ol và li.

Code mẫu

Code mẫu cho danh sách không có thứ tự ul li ở trên:

• Táo
• Mận
• Đào

Còn dưới đây là của danh sách có thứ tự ol li:

1. Toán
2. Lý
3. Hóa

Nhìn cả 2 danh sách chúng ta có thể thấy, danh sách có thứ tự và không có thứ tự đều cần đến thẻ

Giải thích từ viết tắt: ul là viết tắt của từ tiếng Anhunordered list[nghĩa là không có thứ tự], li là viết tắt củalist, còn ol là viết tắt củaordered list[nghĩa là có thứ tự].

Để điều chỉnh style cho danh sách bạn dùng CSS. Một bộ phận có thể bạn không để ý, đó làmenuthường được viết bằng thẻ các thẻ ul và li để thể hiện sự liên quan với nhau.

Thay đổi Style của thẻ li

Thẻ li theo mặc định nếu ở trong thẻ ul sẽ có style kiểu chấm tròn đậm, còn nếu trong thẻ ol sẽ có style kiểu số như 1, 2, 3,CSS cho phép chúng ta tùy biến style này qua thuộc tínhlist-style-type. Sau đây là một số ví dụ:

1. Style chấm tròn nhạt

Code mẫu bạn chú ý cáilist-style-type:

• Táo
• Mận
• Đào

2. Style hình vuông đậm

• Táo
• Mận
• Đào

Dĩ nhiên là bạn phải để style cho ul trongfile CSS riêngchứ không viết trực tiếp vào trong thẻ HTML như trên, tôi viết ra thế cho dễ quan sát và minh họa thôi.

Nếu muốn hủy bỏ style tức là không chấm tròn, chấm vuông hay số má gì hết thì bạn đểlist-style-type: none;thường thì chúng ta chỉ sử dụng giá trị none khi làm menu bằng ul và li.

Có bạn hỏi thế các list-style mặc định có tên là gì, tôi xin nói luôn:

• Style kiểu chấm tròn của ul là list-style-type: disc
• Còn style kiểu số của ol là list-style-type: decimal

Vì nó là style mặc định rồi nên bạn không cần viết CSS thì nó vẫn hiện chấm tròn và số tương ứng.

3. Style là ảnh

Cái này phải nói là rất hay, bạn có thể không thích mấy cái chấm tròn, chấm vuông, số, ký tựmà lại thích danh sách được đánh dấu bằng ảnh của riêng bạn, nó làm cho trang web trở nên cá tính hơn, chúng ta điều chỉnh điều này thông qua thuộc tínhlist-style-image, tôi thí dụ luôn:

Code mẫu:

• Táo
• Mận
• Đào

Trong URL chính là đường dẫn của ảnh mà bạn muốn nó làm bullet. Nếu muốn bạn có thể tự vẽ ra bullet bằng công cụ đồ họa nào đó, hoặc cách nhanh hơn là lên trangIconFindertìm với từ khóa bullet rồi chọn cho mình một chú mang về rất tiện mà cũng đẹp nữa.

4. Điều chỉnh vị trí của thẻ danh sách

Để điều chỉnh vị trí của danh sách chúng ta dùng thuộc tínhlist-style-position, thuộc tính này có 2 giá trị inside và outside, trong đó outside là giá trị mặc định. Dưới đây là các ví dụ để bạn thấy sự khác nhau giữa chúng:

A. inside

B. outside

Bonus

Cuối cùng tôi tặng bạn danh sách 10 quốc gia đông dân nhất thế giới xếp theo thứ tự giảm dần và được tạo bằng thẻ ol và li:

1. CHND Trung Hoa
2. Ấn Độ
3. Hoa Kỳ
4. Indonesia
5. Brazil
6. Pakistan
7. Nigeria
8. Bangladesh
9. Liên Bang Nga
10. Nhật Bản

Thông tin 10 quốc gia này được tham khảo từ Wikipedia Việt Nam cũng theo đó Việt Nam đứng vị trí số 14 về dân số, mà khổ nỗi diện tích nước mình bé đâm ra giá bất động sản lên cao quá [chẳng liên quan gì tới ul và li nhỉ :]]