Định nghĩa và sử dụng
Thuộc tính list-style thiết lập kiểu cho một danh sách.
Chú ý: thuộc tính list-style chỉ sử dụng được cho danh sách (những thành phần chứa <li>): <ol>, <ul>, <menu>
Cấu trúc
tag {
list-style: giá trị;
}
Với giá trị như sau:
| Thuộc tính | giá trị | Ví dụ | Mô tả |
|---|---|---|---|
| list-style | Một hoặc nhiều giá trị của các thuộc tính image, position, style bên dưới. | list-style: square; | Đây là dạng viết ngắn gọn, tổng hợp các kiểu bên dưới (image, position, type). |
| list-style-image | URL | list-style: url(images/list.gif); | Thay thế các mục của danh sách bằng hình ảnh. |
| none | list-style: none; | Không hiển thị image list, đây là dạng mặc định. | |
| inherit | list-style: inherit; | Xác định thừa hưởng thuộc tính từ thành phần cha (thành phần bao ngoài). | |
| list-style-position | inside | list-style: inside; | Xác định các mục nằm bên trong nội dung. |
| outside | list-style: outside; | Xác định các mục nằm bên ngoài nội dung, đây là dạng mặc định. | |
| inherit | list-style:inherit; | Xác định thừa hưởng thuộc tính từ thành phần cha (thành phần bao ngoài). | |
| list-style-type | armenian | list-style-type: armenian; |
|
| circle | list-style-type: circle; |
|
|
| cjk-ideographic | list-style-type: cjk-ideographic; |
|
|
| decimal | list-style-type: decimal; |
|
|
| decimal-leading-zero | list-style-type: decimal-leading-zero; |
|
|
| disc | list-style-type: disc; |
|
|
| georgian | list-style-type: georgian; |
|
|
| hebrew | list-style-type: hebrew; |
|
|
| hiragana | list-style-type: hiragana; |
|
|
| hiragana-iroha | list-style-type: hiragana-iroha; |
|
|
| katakana | list-style-type: katakana; |
|
|
| katakana-iroha | list-style-type: katakana-iroha; |
|
|
| lower-alpha | list-style-type: lower-alpha; |
|
|
| lower-greek | list-style-type: lower-greek; |
|
|
| lower-latin | list-style-type: lower-latin; |
|
|
| lower-roman | list-style-type: lower-roman; |
|
|
| none | list-style-type: none; |
|
|
| square | list-style-type: square; |
|
|
| upper-alpha | list-style-type: upper-alpha; |
|
|
| upper-latin | list-style-type: upper-latin; |
|
|
| upper-roman | list-style-type: upper-roman; |
|
|
| inherit | list-style-type: inherit; | Xác định thừa hưởng thuộc tính từ thành phần cha (thành phần bao ngoài). |
Ví dụ
HTML viết:
<html> <head></head> <body> <ul> <li>Danh sách list-style-type 01.</li> <li>Danh sách list-style-type 02.</li> </ul> </body> </html>
Hiển thị trình duyệt khi chưa có CSS:
- Danh sách list-style-type 01.
- Danh sách list-style-type 02.
CSS viết:
ul {
list-style: square;
}
Hiển thị trình duyệt khi có CSS:
- Danh sách list-style-type 01.
- Danh sách list-style-type 02.
Trình duyệt hỗ trợ
Thuộc tính list-style được hỗ trợ trong đa số các trình duyệt.
Trình duyệt IE9 và Opera không hỗ trợ các giá trị: cjk-ideographic, hebrew, hiragana, hiragana-iroha, katakana, and katakana-iroha.
Giá trị inherit, decimal-leading-zero, lower-greek, lower-latin, upper-latin, armenian, georgian : IE8 trở xuống đòi hỏi phải có !Doctype