Hướng dẫn ul li html - ul li 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 Kiến càng sẽ hướng dẫn bạn cách sử dụng chúng.

• #1. Danh sách dùng để làm gì?
• #2. Sự khác nhau giữa ul và ol
• #3. Code mẫu
• #4. Thay đổi Style của thẻ li
• #5. Bonus

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

#2. Sự khác nhau giữa ul và olcó 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…

#3. Code mẫu

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

#3. Code mẫu

#4. Thay đổi Style của thẻ li

#5. Bonus

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…

1. 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.
2. Các danh sách không có thứ tự kiểu như thế này:
3. Được tạo thành từ các thẻ ul và li

—

#3. Code mẫu

#4. Thay đổi Style của thẻ li

Táo
Mận
Đào

#5. Bonus

Toán
Lý
Hóa

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.

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

#4. Thay đổi Style của thẻ li

#5. Bonuslist-style-type. Sau đây là một số ví dụ:

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.

Táo
Mận
Đào

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

Táo
Mận
Đào

Đượ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:

• Toándisc
• Lý decimal

Hóa

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

Code mẫu cho danh sách không có thứ tự ul li ở trên:list-style-image, tôi thí dụ luôn:

• Còn dưới đây là của danh sách có thứ tự ol li:
• 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ẻ
nằm giữa.
• Giải thích từ viết tắt: ul là viết tắt của từ tiếng Anh unordered list (nghĩa là không có thứ tự), li là viết tắt của list, còn ol là viết tắt của ordered 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à menu thường được viết bằng thẻ các thẻ ul và li để thể hiện sự liên quan với nhau.

Táo
Mận
Đào

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ính list-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ái list-style-type:list-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:

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

ul {
list-style-position:inside;
}

• Dĩ nhiên là bạn phải để style cho ul trong file CSS riêng chứ 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

ul {
list-style-position:outside;
}

• Dĩ nhiên là bạn phải để style cho ul trong file CSS riêng chứ 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:

#5. Bonus

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

1. 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.
2. 3. Style là ảnh
3. 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ính list-style-image, tôi thí dụ luôn:
4. Táo
5. Mận
6. Đào
7. Code mẫu: 
8. 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 trang IconFinder tì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.
9. 4. Điều chỉnh vị trí của thẻ danh sách
10. Để điều chỉnh vị trí của danh sách chúng ta dùng thuộc tính list-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