Kiểu danh sách - Thủ thuật CSS

Anonim

Các list-stylebất động sản là một tài sản viết tắt là bộ giá trị cho ba thuộc tính list-liên quan khác nhau trong một tuyên bố:

ul ( list-style: || || ; )

Đây là một ví dụ về cú pháp:

ul ( list-style: square outside none; )

Phiên bản này sẽ giống với phiên bản tốc ký sau:

ul ( list-style-type: square; list-style-position: outside; list-style-image: none; )

Trong cách viết tắt, nếu bất kỳ giá trị nào bị bỏ qua, chúng sẽ trở lại trạng thái ban đầu.

Giá trị cho list-style-type

Các list-style-typebất động sản xác định loại danh sách bằng cách thiết lập các nội dung của mỗi điểm đánh dấu, hoặc viên đạn, trong danh sách. Các giá trị từ khóa được chấp nhận cho list-style-typebao gồm:

  • disc
  • circle
  • square
  • decimal
  • decimal-leading-zero
  • lower-roman
  • upper-roman
  • lower-greek
  • lower-latin
  • upper-latin
  • armenian
  • georgian
  • lower-alpha
  • upper-alpha
  • none

MDN có một danh sách đầy đủ hơn. Các giá trị không phải từ khóa đã được giới thiệu trong CSS3 và đang bắt đầu thấy một số hỗ trợ, như:

ul ( list-style-type: "→"; )

Bản trình diễn sau đây bao gồm một nhóm danh sách không có thứ tự để chứng minh từng giá trị từ khóa:

Các list-style-typebất động sản áp dụng cho tất cả các danh sách, và bất kỳ yếu tố đó được thiết lập để display: list-item.

Màu của điểm đánh dấu danh sách sẽ là bất kỳ màu nào được tính toán của phần tử (được đặt thông qua thuộc colortính).

Giá trị cho list-style-position

Các list-style-positionđịnh nghĩa tài sản nơi để vị điểm đánh dấu danh sách, và nó chấp nhận một trong hai giá trị: insidehoặc bên ngoài. Những điều này được minh họa bên dưới với phần paddingbị xóa khỏi danh sách và đường viền màu đỏ bên trái được thêm vào:

Giá trị cho list-style-image

Các list-style-imagebất động sản sẽ xác định xem điểm đánh dấu danh sách được thiết lập với một hình ảnh, và chấp nhận một giá trị của “none” hoặc một URL trỏ đến hình ảnh:

ul ( list-style-image: url(images/bullet.png.webp); )

Các bản trình diễn khác

Hỗ trợ trình duyệt

Trình duyệt Chrome Safari Firefox Opera I E Android iOS
Làm Làm Làm Làm Làm Làm Làm

IE6 / 7 không hỗ trợ tất cả các giá trị từ khóa cho list-style-typevà cũng có một lỗi trong đó các mục danh sách nổi không hiển thị điểm đánh dấu danh sách của chúng. Điều này được giải quyết bằng cách sử dụng hình nền (thay vì list-style-image) trên các mục danh sách.