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:

list-style-type	- Thuộc tính này được dùng để thiết lập "kiểu chỉ mục" cho các danh mục bên trong danh sách.
list-style-image	- Thuộc tính này được dùng để thiết lập "chỉ mục bằng hình ảnh" cho các danh mục bên trong danh sách.
list-style-position	- Thuộc tính này dùng để thiết lập vị trí của các chỉ mục.
list-style	- Thuộc tính này là cú pháp tổng quát dùng để định dạng cho danh sách (thay vì phải kết hợp 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à đủ)

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ự:

decimal	. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .	Xem ví dụ
decimal-leading-zero	. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
lower-alpha	. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
upper-alpha	. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
lower-roman	. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
upper-roman	. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
lower-greek	. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
armenian	. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
cjk-ideographic	. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
georgian	. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
hebrew	. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
hiragana	. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
hiragana-iroha	. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
katakana	. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
katakana-iroha	. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

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

disc	. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .	Xem ví dụ
circle	. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
square	. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

- 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ị:

none	- Không thiết lập chỉ mục bằng hình ảnh cho các danh mục.	Xem ví dụ
url()	- Chỉ định một tập tin hình ảnh cụ thể dùng làm chỉ mục cho danh mục.
initial	- Sử dụng giá trị mặc định của nó. (mặc định thì thuộc tính list-style-image có giá trị là none)
inherit	- Kế thừa giá trị thuộc tính list-style-image từ phần tử cha của nó.

- 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.

Ví dụ:

- Tôi có một cái danh sách như bên dưới:

Tài liệu học HTML
Tài liệu học CSS
Tài liệu học JavaScript

- Tôi tạo một cái đường viền màu xanh cho danh sách, đường viền màu đỏ cho các danh mục, thì các bạn sẽ thấy: "chỉ mục không nằm bên trong danh mục mà chúng sẽ nằm bên ngoài danh mục"

Tài liệu học HTML
Tài liệu học CSS
Tài liệu học JavaScript

- 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ị:

outside	- Chỉ mục nằm bên ngoài danh mục.	Xem ví dụ
inside	- Chỉ mục nằm bên trong danh mục.
initial	- Sử dụng giá trị mặc định của nó. (mặc định thì thuộc tính list-style-position có giá trị là outside)
inherit	- Kế thừa giá trị thuộc tính list-style-position từ phần tử cha của nó.

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.

Ví dụ:

- Khi chúng ta thiết lập list-style: square inside; thì sẽ tương đương với:

list-style-type: square;
list-style-position: inside;
list-style-image: none;

ul{
    list-style:square inside;
}

Xem ví dụ