Thuộc tính list-style
là thuộc tính tốc ký đặt giá trị cho ba thuộc tính liên quan đến danh sách khác nhau trong một khai báo
ul {
list-style: || || ;
}
Đây là một ví dụ về cú pháp
ul {
list-style: square outside none;
}
Cái nào sẽ giống với phiên bản viết tay sau đây
ul {
list-style-type: square;
list-style-position: outside;
list-style-image: none;
}
Nói tóm lại, nếu bất kỳ giá trị nào bị bỏ qua, chúng sẽ trở lại trạng thái ban đầu
Các giá trị cho list-style-type
Thuộc tính list-style-type
xác định loại danh sách bằng cách đặt nội dung của từng điểm đánh dấu hoặc dấu đầu dòng trong danh sách. Các giá trị từ khóa được chấp nhận cho list-style-type
bao gồm
disc
0ul { list-style: square outside none; }
1ul { list-style: square outside none; }
2ul { list-style: square outside none; }
3ul { list-style: square outside none; }
4ul { list-style: square outside none; }
5ul { list-style: square outside none; }
6ul { list-style: square outside none; }
7ul { list-style: square outside none; }
8ul { list-style: square outside none; }
9ul { list-style: square outside none; }
0ul { list-style-type: square; list-style-position: outside; list-style-image: none; }
1ul { list-style-type: square; list-style-position: outside; list-style-image: none; }
2ul { list-style-type: square; list-style-position: outside; list-style-image: none; }
3ul { list-style-type: square; list-style-position: outside; list-style-image: none; }
MDN có một danh sách đầy đủ hơn. Giá trị không phải từ khóa và đang bắt đầu nhận được 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 các danh sách không có thứ tự để minh họa từng giá trị từ khóa
Dự phòng nhúng CodePen
Thuộc tính list-style-type
áp dụng cho tất cả các danh sách và cho bất kỳ phần tử nào được đặt thành
ul {
list-style-type: square;
list-style-position: outside;
list-style-image: none;
}
5Mà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 tính
ul {
list-style-type: square;
list-style-position: outside;
list-style-image: none;
}
6]Các giá trị cho ul {
list-style-type: square;
list-style-position: outside;
list-style-image: none;
}
7
ul {
list-style-type: square;
list-style-position: outside;
list-style-image: none;
}
Thuộc tính
ul {
list-style-type: square;
list-style-position: outside;
list-style-image: none;
}
7 xác định vị trí đặt điểm đánh dấu danh sách và nó chấp nhận một trong hai giá trị. ul {
list-style-type: square;
list-style-position: outside;
list-style-image: none;
}
9 hoặc bên ngoài. Những điều này được thể hiện bên dưới với việc xóa ul {
list-style-type: "→";
}
0 khỏi danh sách và thêm đường viền màu đỏ bên tráiDự phòng nhúng CodePen
Các giá trị cho ul {
list-style-type: "→";
}
1
ul {
list-style-type: "→";
}
Thuộc tính
ul {
list-style-type: "→";
}
1 xác định xem điểm đánh dấu danh sách có được đặt bằng hình ảnh hay không và chấp nhận giá trị “none” hoặc URL trỏ đến hình ảnhul {
list-style-image: url[images/bullet.png];
}
Bản trình diễn khác
Dự phòng nhúng CodePen
hỗ trợ trình duyệt
IEEdgeFirefoxChromeSafariOperaYesYesYesYesWorksWorksAndroid ChromeAndroid FirefoxAndroid BrowseriOS SafariOpera MobileYesYesYesYesWorksSource. chó sănInternet Explorer 6 và 7 không hỗ trợ tất cả các giá trị từ khóa cho list-style-type
và cũng có 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. Vấn đề này được giải quyết bằng cách sử dụng hình nền [thay vì
ul {
list-style-type: "→";
}
1] trên các mục trong danh sáchTiết lộ. Hỗ trợ của bạn giúp giữ cho trang web hoạt động. Chúng tôi kiếm được phí giới thiệu cho một số dịch vụ chúng tôi đề xuất trên trang này. Tìm hiểu thêm
Element ofLists Bring Order To Web Pages: Here’s The HTML Code To Create ThemWhat does HTML Tag
do?The nội dung
Mã ví dụ
- First we do this,
- and then we do this,
- and then we do this.
- Đầu tiên chúng ta làm điều này,
- và sau đó chúng tôi làm điều này,
- và sau đó chúng tôi làm điều này
Hiển thị dựa trên loại danh sách
Phần tử phải là phần tử con của phần tử
[danh sách có thứ tự] hoặc phần tử
[danh sách không có thứ tự].
xác định một danh sách với một số loại hệ thống đánh số, vì vậy các mục danh sách trong đó thường sẽ được thêm vào trước một số, một chữ số La Mã hoặc một chữ cái. Danh sách
hầu như luôn được gạch đầu dòng. Các mục danh sách là các phần tử cấp khối và chứa nội dung luồng — có nghĩa là [trong số những thứ khác] ehy có thể có các danh sách khác làm nội dung của chúng. Đây là cách bạn tạo danh sách lồng nhau hoặc danh sách đa cấp [chẳng hạn như dàn bài]
Li trong CSS nghĩa là gì?
- ], danh sách không có thứ tự [
- ] và trong danh sách menu []. Trong
- và , các mục danh sách thường sẽ được hiển thị với các dấu đầu dòng.
- ], unordered lists [
- ], and in menu lists []. In
- and , the list items will usually be displayed with bullet points.