Và với yếu tố giả
ul { color: #0E6FC9; }
.text-wrapper { color: black; }
0 mới, việc làm cho chúng trở nên thú vị cũng không quá khó khăn. Sự hỗ trợ của trình duyệt cho phần tử giả này từng rất ít, nhưng với sự bổ sung của nó trong Chrome 86, nó sẽ sớm trở nên phổ biếnTôi sẽ chỉ cho bạn cách làm cho danh sách của bạn nổi bật
Chúng tôi sẽ trang trải
- Kiểu danh sách tích hợp
- Thay đổi màu của các điểm đánh dấu danh sách
- Danh sách biểu tượng cảm xúc dấu đầu dòng
- bộ đếm CSS
- Dấu đầu dòng hình ảnh tùy chỉnh
- Đánh dấu danh sách hoàn toàn tùy chỉnh bằng cách sử dụng
1ul { color: #0E6FC9; } .text-wrapper { color: black; }
Hãy bắt đầu bằng cách thay đổi giao diện của các điểm đánh dấu danh sách bằng cách sử dụng các kiểu dựng sẵn. Chúng tôi làm như vậy, bằng cách sử dụng tài sản
ul { color: #0E6FC9; }
.text-wrapper { color: black; }
2. Có một vài tùy chọn kiểu cho cả danh sách có thứ tự và không có thứ tự để chọnĐây chỉ là những lựa chọn phổ biến nhất. Có thể tìm thấy trên MDN
Kiểu tùy chỉnhPhần tử giả
ul { color: #0E6FC9; }
.text-wrapper { color: black; }
0 cho phép chúng ta thay đổi kiểu đánh dấu danh sách [dấu đầu dòng/số]. sử dụng một tập hợp con các thuộc tính CSS. Các thuộc tính được phép là- Tất cả thuộc tính
4 [cỡ chữ, họ phông chữ, v.v. ]ul { color: #0E6FC9; } .text-wrapper { color: black; }
5ul { color: #0E6FC9; } .text-wrapper { color: black; }
- Thuộc tính
6 vàul { color: #0E6FC9; } .text-wrapper { color: black; }
7ul { color: #0E6FC9; } .text-wrapper { color: black; }
8,ul { color: #0E6FC9; } .text-wrapper { color: black; }
9,ul { color: #0E6FC9; } .text-wrapper { color: black; }
0li::marker { content: "😁" }
- và
1li::marker { content: "😁" }
Hãy xem những gì nó có thể làm
🌈 Thay đổi màu sắc
Cách cơ bản nhất để làm cho danh sách của bạn trông đẹp hơn là thay đổi màu của các điểm đánh dấu danh sách. Chúng ta có thể làm điều đó giống như chúng ta thay đổi màu của văn bản bình thường
Nếu bạn cần hỗ trợ các trình duyệt cũ hơn thì sao? . Như thế này
Muffin candy canes
Fruitcake powder cookie
Biscuit muffin liquorice
ul { color: #0E6FC9; }
.text-wrapper { color: black; }
Hoặc tạo một điểm đánh dấu hoàn toàn tùy chỉnh với
ul { color: #0E6FC9; }
.text-wrapper { color: black; }
1. Thêm về điều đó sauVăn bản tùy chỉnh
bạn có thể đang nghĩ. Được rồi, nhưng đổi màu có phải là tất cả những gì mà
li::marker {
content: "😁"
}
4 có thể làm không?Không. Cách xa nó. Nó cho phép chúng ta thay đổi nội dung của điểm đánh dấu danh sách, bằng cách sử dụng thuộc tính có tên thích hợp là
li::marker {
content: "😁"
}
1Bạn có thể sử dụng bất kỳ văn bản nào dưới dạng
li::marker {
content: "😁"
}
1, bao gồm các ký hiệu Unicode như ký hiệu ở trên hoặc thậm chí là biểu tượng cảm xúc🔫 Dấu đầu dòng biểu tượng cảm xúc
Như tôi đã nói ở trên, bạn có thể sử dụng biểu tượng cảm xúc làm điểm đánh dấu danh sách
li::marker {
content: "😁"
}
Nhưng bạn có thể không muốn sử dụng cùng một biểu tượng cảm xúc cho mọi mục trong danh sách. Để khắc phục điều đó, chúng ta có thể đặt biểu tượng cảm xúc của mình trong thuộc tính
li::marker {
content: "😁"
}
7 trong HTML
Oat cake jelly beans
Croissant cotton candy
Jelly beans muffin tiramisu
Và truy xuất chúng trong CSS bằng hàm
li::marker {
content: "😁"
}
8li::marker {
content: attr[data-emoji];
}
Chúng tôi thậm chí có thể thay đổi nội dung của điểm đánh dấu khi di chuột bằng cách sử dụng
li::marker {
content: "😁"
}
9li:hover::marker {
content: "🤯";
}
Và đây là kết quả
Được rồi, nhưng còn danh sách có thứ tự thì sao?
Danh sách theo thứ tự tùy chỉnh
Để thay đổi nội dung của một đánh dấu danh sách có thứ tự, chúng ta cần biết mục đó thuộc về mục nào. Chúng ta cần biết vị trí của nó trong danh sách. Đó là nơi bộ đếm CSS xuất hiện
Chúng ta cần tạo một bộ đếm trong danh sách và tăng nó trên mỗi mục danh sách. Sau đó truy xuất giá trị hiện tại của bộ đếm bằng hàm CSS
Oat cake jelly beans
Croissant cotton candy
Jelly beans muffin tiramisu
0. Chúng tôi sử dụng kết quả của hàm này làm giá trị của thuộc tính li::marker {
content: "😁"
}
1/* Import fonts from Google Fonts */
@import url['//fonts.googleapis.com/css2?family=Raleway&family=Sigmar+One&display=swap'];
ol {
list-style-position: inside;
/* Start counter */
counter-reset: list;
}
li {
font-family: 'Raleway', sans-serif;
/* Increment counter on each list item */
counter-increment: list;
}
li::marker {
font-family: "Sigmar One", cursive;
/* Use counter to display the current number */
content: "Step " counter[list] ". ";
}
Hãy xem qua mã để hiểu điều gì đang xảy ra
Chúng tôi sử dụng
Oat cake jelly beans
Croissant cotton candy
Jelly beans muffin tiramisu
2 để tạo một bộ đếm mới có tên là
Oat cake jelly beans
Croissant cotton candy
Jelly beans muffin tiramisu
3. Tên là tùy ý và hoàn toàn tùy thuộc vào bạn. Nhưng tại sao tài sản được gọi là thiết lập lại bộ đếm? . Đó là lý do tại sao chúng ta phải đặt nó trên
Oat cake jelly beans
Croissant cotton candy
Jelly beans muffin tiramisu
4 chứ không phải các mục trong danh sáchChúng tôi đã tạo bộ đếm của mình, nhưng sẽ vô ích nếu giá trị của nó không bao giờ thay đổi. Chúng ta cần tăng nó trên mọi mục danh sách. Để làm điều đó, chúng tôi đặt
Oat cake jelly beans
Croissant cotton candy
Jelly beans muffin tiramisu
5 trên
Oat cake jelly beans
Croissant cotton candy
Jelly beans muffin tiramisu
6 của chúng tôiBây giờ chúng tôi có một giá trị tăng tự động, chúng tôi sử dụng nó trong thuộc tính
li::marker {
content: "😁"
}
1 của điểm đánh dấu của chúng tôi. Và đây là nơi phép màu xảy ra. Chúng ta có thể kết hợp giá trị của bộ đếm với các chuỗi khác, tùy ý phân tách bằng khoảng trắngMột vài lưu ý
- Trong ví dụ, tôi đã nhập một số phông chữ từ Google Fonts. Không cần thiết nhưng tôi đang sử dụng nó để phân biệt giữa nội dung của mục danh sách và điểm đánh dấu
- Vì nội dung của điểm đánh dấu trong ví dụ khá dài nên có thể khiến nó tắt màn hình trong một số trường hợp. Đó là lý do tại sao tôi đã sử dụng
8 để di chuyển điểm đánh dấu bên trong ô của mục danh sáchOat cake jelly beans Croissant cotton candy Jelly beans muffin tiramisu
- Bạn có thể đặt một số sau tên bộ đếm để bắt đầu từ một giá trị khác. Nó sẽ trông giống như thế này.
9 và ba mục đầu tiên của danh sách đó sẽ có số 6, 7 và 8Oat cake jelly beans Croissant cotton candy Jelly beans muffin tiramisu
- Bộ đếm có thể được sử dụng trên bất kỳ phần tử html nào, không chỉ danh sách
Dấu đầu dòng hình ảnh tùy chỉnh
Được rồi, chúng ta có thể thay đổi màu, kiểu và nội dung văn bản của các điểm đánh dấu danh sách, nhưng nếu chúng ta muốn một cái gì đó hoàn toàn tùy chỉnh thì sao?
Để làm điều đó, chúng tôi đặt một hình ảnh làm nội dung của điểm đánh dấu bằng cách sử dụng chức năng CSS
li::marker {
content: attr[data-emoji];
}
0Nếu tất cả các tùy chọn trên vẫn chưa đủ với bạn, thì vẫn còn một tùy chọn nữa. Một cái cho phép chúng tôi làm bất cứ điều gì chúng tôi muốn với các điểm đánh dấu danh sách của chúng tôi. Nó hoạt động nhiều hơn và có một chút hack, nhưng nó rất hữu ích nếu vẫn thất bại
Chúng ta có thể sử dụng phần tử giả
ul { color: #0E6FC9; }
.text-wrapper { color: black; }
1 để tạo các điểm đánh dấu của riêng mình. Phương pháp này cho phép chúng tôi tạo nền tùy chỉnh cho điểm đánh dấu của mình, dễ dàng chia tỷ lệ dấu đầu dòng hình ảnh và hơn thế nữaXóa mặc định
Trước khi chúng tôi có thể tạo các điểm đánh dấu của riêng mình, chúng tôi phải loại bỏ các điểm đánh dấu mặc định
ol {
margin: 0;
padding: 0;
list-style: none;
}
Điều này cung cấp cho chúng tôi một khung vẽ trống để làm việc với
Ghi chú. Điều này có thể tạo ra các vấn đề về khả năng truy cập, vì vậy bạn nên thêm role=”list” vào danh sách trong HTML của mình
Latvia
China
Portugal
Tạo điểm đánh dấu
Khi sử dụng
ul { color: #0E6FC9; }
.text-wrapper { color: black; }
1, bạn có quyền truy cập vào tất cả các thuộc tính CSS chứ không chỉ một tập hợp con như với ul { color: #0E6FC9; }
.text-wrapper { color: black; }
0Tuy nhiên, bạn chịu trách nhiệm thiết lập nội dung của điểm đánh dấu, khoảng cách giữa điểm đánh dấu và văn bản của mục danh sách và căn chỉnh phù hợp
Ví dụ: đây là cách tạo danh sách đẹp nhất mọi thời đại một cách khách quan. Giải thích được bao gồm trong các ý kiến
UL và Li trong CSS là gì?
UL trong CSS là gì?
Việc sử dụng Li trong CSS là gì?
- and , the list items will usually be displayed with bullet points. In
- , the list items will usually be displayed with numbers or letters. Tip: Use CSS to style lists.