Tùy biến hiển thị danh sách

1. Tùy biến hiển thị danh sách
(List)

2. • Mặc định các thẻ list (danh sách) trong HTML sẽ được hiển thị
dựa trên quy tắt hiển thị ở các trình duyệt cho các thẻ đó. Ví dụ
khi bạn sử dụng <ol> thì sẽ hiển thị danh sách có đánh số, thẻ
<ul> sẽ hiển thị dấu chấm tròn cho mỗi mục con bên trong.
Nhưng với CSS, bạn có thể tùy biến lại được cách hiển thị của
nó, chẳng hạn như bạn muốn dùng hình ảnh thay cho dấu
chấm tròn ở thẻ <ul> chẳng hạn.
• Và để tùy biến danh sách trong CSS, chúng ta sẽ sử dụng
thuộc tính list-style để làm.

3. Quy tắt viết thuộc tính list-style
• Ở thuộc tính này, bạn có thể viết giá trị theo thứ tự như sau:
• list-style: <list-style-type> <list-style-position> <list-style-image>;
• Trong đó, 3 giá trị mình ghi bên trong kia là 3 thuộc tính con của list-
style nhưng bạn có thể viết vào thẻ này cùng lúc mà không cần viết
từng thuộc tính. Cụ thể:
• list-style-type: Thay đổi loại hiển thị của danh sách.
• list-style-position: Tùy chỉnh vị trí hiển thị các dấu đầu dòng của mục
con nằm bên trong danh sách hoặc bên ngoài danh sách.
• list-style-image: Sử dụng hình ảnh làm các dấu đầu dòng cho danh
sách.

4. Sử dụng thuộc tính này cho phần tử nào?
• Các thuộc tính mà mình đề cập trong bài này đều sẽ sử dụng để tùy
biến hiển thị cho các phần tử <li> trên website. Tuy nhiên bạn có thể
sử dụng cho bất kỳ phần tử nào khác nếu phần tử đó có thêm thuộc
tính display: list-item.

5. list-style-type
• Ở giá trị này bạn sẽ thiết lập kiểu hiển thị cho các dấu đầu dòng trên
mỗi thẻ <li>, bạn có thể thiết lập nó hiển thị thành số hay chữ cái
hoặc ký tự tùy thích. Nó có một số thuộc tính thông dụng như sau:
• disc: Kiểu nút tròn có nền bên trong,
• circle: Kiểu nút tròn nhưng có viền nhưng không có nền.
• squre: Kiểu ô vuông có nền.
• decimal: Kiểu số thứ tự.
• lower-roman: Kiểu số La Mã in thường.
• upper-roman: Kiểu số La Mã in hoa.
• none: Xóa các dấu đầu dòng.

6. list-style-position
• Với thuộc tính này chúng ta chỉ có duy nhất hai giá trị là:
• inside: Hiển thị dấu đầu dòng bên trong block.
• outside: Hiển thị dấu đầu dòng bên ngoài block.

7. list-style-image
• Nếu bạn chán với kiểu hiển thị các dấu đầu dòng là ký tự thì có
thể chuyển sang sử dụng hình ảnh (tốt nhất là một icon nhỏ)
với thuộc tính list-style-image này. Cách dùng rất đơn giản như
sau:
• list-style-image: url('link ảnh');

8. Ví dụ sử dụng list-style cho các phần tử khác
• Ở đầu bài mình có nói là các thuộc tính list-style này chỉ có thể
áp dụng cho các phần tử <li> vì mặc định các phần tử này sẽ
hiển thị theo kiểu list item (tức là mục danh sách). Nếu bạn
muốn sử dụng cho các phần tử khác thì bắt buộc phải cần
chuyển nó về kiểu hiển thị list item này. Bạn có thể chuyển kiểu
hiển thị của nó với thuộc tính display: list-item. Dưới đây là một
ví dụ về hiển thị danh sách với thẻ <p>.