Các thuộc tính dùng để định dạng cho danh sách

– Dưới đây là bốn thuộc tính thường được sử dụng trong việc định dạng cho danh sách:

1) Thuộc tính list-style-type trong CSS

– Thuộc tính list-style-type được dùng để thiết lập “kiểu chỉ mục” cho các danh mục trong danh sách.

– Cú pháp:

list-style-type: kiểu chỉ mục;

– Dưới đây là các kiểu chỉ mục được áp dụng cho danh sách có thứ tự:

– Dưới đây là các kiểu chỉ mục được áp dụng cho danh sách không có thứ tự:

– Lưu ý: Nếu không muốn thiết lập “chỉ mục” cho các danh mục trong danh sách thì các bạn có thể thực hiện bằng cách gán giá trị none cho thuộc tính list-style-type (Xem ví dụ)

2) Thuộc tính list-style-image trong CSS

– Thuộc tính list-style-image được sử dụng để thiết lập “chỉ mục bằng hình ảnh” cho các danh mục nằm ở bên trong danh sách.

– Cú pháp:

list-style-image: value;

– Trong đó, value có thể được xác định dựa theo một trong bốn loại giá trị:

– Lưu ý: Khi chúng ta sử dụng hình ảnh để làm chỉ mục cho các danh mục thì mặc định các chỉ mục sẽ có kích thước bằng với kích thước của tấm hình được dùng làm chỉ mục (Xem ví dụ). Vì vậy, nếu muốn sử dụng hình ảnh để làm chỉ mục thì trước tiên chúng ta cần phải điều chỉnh kích thước của tấm hình sao cho nó phù hợp với kích thước của cái chỉ mục mà mình cần (để điều chỉnh kích thước của tấm hình thì chúng ta có thể sử dụng các phần mềm chỉnh sửa hình ảnh như: photoshop, paint, . . . .)

3) Thuộc tính list-style-position trong CSS

– Khi chúng ta tạo một cái danh sách thì mặc định cái danh sách đó sẽ có một vùng đệm nằm ở bên trái, chỉ mục của các danh mục sẽ nằm bên trong vùng đệm này.

– Từ đây, thuộc tính list-style-position được dùng để thiết lập lại vị trí của các chỉ mục.

list-style-position: value;

– Trong đó, value có thể được xác định dựa theo một trong bốn loại giá trị:

4) Thuộc tính list-style trong CSS

– Thuộc tính list-style là cú pháp tổng quát dùng để định dạng cho danh sách (thay vì phải sử dụng kết các thuộc tính list-style-type, list-style-image, list-style-position thì bây giờ chúng ta chỉ cần sử dụng duy nhất mỗi thuộc tính này là đủ)

– Cú pháp:

list-style: type position image;

– Trong đó:

• Giá trị type dùng để thiết lập kiểu chỉ mục (giống thuộc tính list-style-type)
• Giá trị position dùng để thiết lập vị trí của chỉ mục (giống thuộc tính list-style-position)
• Giá trị image dùng để thiết lập chỉ mục bằng hình ảnh (giống thuộc tính list-style-image)

– Tuy nhiên, thuộc tính list-style không bắt buộc chúng ta phải gán cho nó đủ ba giá trị, những giá trị nào còn thiếu thì trình duyệt sẽ tự động sử dụng giá trị mặc định của các thuộc tính tương ứng.

ul{
    list-style:square inside;
}