Thuộc tính list-style
Đị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 thuộc tính và giá trị như sau: Thuộc tính giá trị Mô tả list-style Một […]
Đị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 thuộc tính và giá trị như sau:
| Thuộc tính | giá trị | 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. | Đâ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 | Thay thế các mục của danh sách bằng hình ảnh. |
| none | Không hiển thị image list, đây là dạng mặc định. | |
| 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 | Xác định các mục nằm bên trong nội dung. |
| 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 | 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 |
|
| circle |
|
|
| cjk-ideographic |
|
|
| decimal |
|
|
| decimal-leading-zero |
|
|
| disc |
|
|
| georgian |
|
|
| hebrew |
|
|
| hiragana |
|
|
| hiragana-iroha |
|
|
| katakana |
|
|
| katakana-iroha |
|
|
| lower-alpha |
|
|
| lower-greek |
|
|
| lower-latin |
|
|
| lower-roman |
|
|
| none |
|
|
| square |
|
|
| upper-alpha |
|
|
| upper-latin |
|
|
| upper-roman |
|
|
| 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:
- Danh sách list-style-type 01.
- Danh sách list-style-type 02.
Trình duyệt hỗ trợ
- Internet Explorer
- Firefox
- Opera
- Google Chrome
- Safari
