- Thuộc tính background
- Thuộc tính border
- Thuộc tính border-collapse
- Thuộc tính border-spacing
- Thuộc tính bottom
- Thuộc tính caption-side
- Thuộc tính clear
- Thuộc tính clip
- Thuộc tính color
- Thuộc tính content
- Thuộc tính counter-increment
- Thuộc tính counter-reset
- Thuộc tính cursor
- Thuộc tính direction
- Thuộc tính display
- Thuộc tính empty-cells
- Thuộc tính float
- Thuộc tính font
- Thuộc tính height
- Thuộc tính left
- Thuộc tính letter-spacing
- Thuộc tính line-height
- Thuộc tính list-style
- Thuộc tính margin
- Thuộc tính max-height
- Thuộc tính max-width
- Thuộc tính min-height
- Thuộc tính min-width
- Thuộc tính outline
- Thuộc tính overflow
- Thuộc tính padding
- Thuộc tính page-break-after
- Thuộc tính page-break-before
- Thuộc tính page-break-inside
- Thuộc tính position
- Thuộc tính quotes
- Thuộc tính right
- Thuộc tính table-layout
- Thuộc tính text-align
- Thuộc tính text-decoration
- Thuộc tính text-indent
- Thuộc tính text-transform
- Thuộc tính top
- Thuộc tính vertical-align
- Thuộc tính visibility
- Thuộc tính white-space
- Thuộc tính width
- Thuộc tính word-spacing
- Thuộc tính z-index
Thuộc tính list-style
Đăng bởi: Admin
Đị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
Link liên quan
Theo dõi VnCoder trên Facebook, để cập nhật những bài viết, tin tức và khoá học mới nhất!