Nếu bạn nào mới bắt đầu, vui lòng xem bài HTML List trước khi bắt đầu bài viết này. Mình sẽ không nói về HTML List nữa mã sẽ hướng dẫn cách sử dụng CSS để định dạng các phần tử HTML List.
Trong bài viết này mình sẽ hướng dẫn cách sử dụng CSS để:
Quy định kiểu dánh dấu (ký tự, số, chữ số…) các phần tử trong danh sách
Loại bỏ kiểu đánh dấu (không hiển thị) của các phần tử
Sử dụng ảnh nền thay cho các ký tự, số… mặc định của các phần tử
1. Thuộc tính list-style-type
Như chúng ta đã biết HTML List bao gồm 2 loại:
- UnOrdered List (Không có thứ tụ): Danh sách các phần tử được dánh dấu bằng các ký tự (bullets)
- Ordered List (có thứ tự): Danh sách các phần tử được dánh dấu bằng Số, alphabet, số La Mã.
Các kiểu đánh dấu này được quy định bằng thuộc tính type của thẻ <ul> và <ol>. Nhưng với CSS chúng ta có thể quy định kiểu đánh dấu của các phần tử mà không cần quan tâm đó là danh sách có thứ tự hay không có thứ tự, cũng như cho phép hiển thị hay không hiển thị kiểu đánh dấu với thuộc tính list-style-type.
Một số giá trị của thuộc tính list-style-type thường gặp nhất
| Giá trị | Mô tả |
|---|---|
| none | Không hiển thị đánh dấu |
| disc | Chấm vuông |
| circle | Chấm tròn trắng |
| square | Chấm tròn đen |
| decimal | Kiểu số |
| lower-alpha | Kiểu Alphabet ở dạng in thường (a, b, c, d, e, …) |
| upper-alpha | Kiểu Alphabet ở dạng in hoa (A, B, C, D, E, …) |
| lower-roman | Kiểu La Mã ở dạng thường (i, ii, iii, iv, v, …) |
| upper-roman | Kiểu La Mã ở dạng in hoa (I, II, III, IV, V, …) |
Ví dụ sau ta sử dụng CSS để quy định kiểu đánh dấu dạng alphabet ở dạng in thường cho cả danh sách có thứ tự và không có thứ tự:
Code HTML
01 |
Danh sách không có thứ tự |
02 |
<ul> |
03 |
<li>Phần tử 1</li> |
04 |
<li>Phần tử 2</li> |
05 |
<li>Phần tử 3</li> |
06 |
</ul> |
07 |
Danh sách có thứ tự |
08 |
<ol> |
09 |
<li>Phần tử 1</li> |
10 |
<li>Phần tử 2</li> |
11 |
<li>Phần tử 3</li> |
12 |
</ol> |
Code CSS:
1 |
ul,ol{list-style-type: lower-alpha} |
Và đây là kết quả:
Đào tạo lập trình chúc các bạn học tốt.
Tham khảo thêm thông tin tài liệu html tại mục chia sẻ
Tin tức khác:
