Cập nhật. Bộ chọn giả
ol,
ul {
margin: 0;
padding: 0;
list-style: none;
display: grid;
gap: 1rem;
}
4 hiện được hỗ trợ tốt trong các trình duyệt hiện đại. Mặc dù hướng dẫn này bao gồm các mẹo CSS hữu ích cho các mục được liệt kê ở trên, nhưng bạn có thể muốn chuyển sang giải pháp ol,
ul {
margin: 0;
padding: 0;
list-style: none;
display: grid;
gap: 1rem;
}
4Liệt kê HTML
#Trước tiên, chúng tôi sẽ thiết lập HTML của bạn, với một ________ 06 và một _____ 07. Tôi đã thêm một dấu đầu dòng dài hơn để hỗ trợ kiểm tra căn chỉnh, giãn cách và chiều cao dòng
Unordered list item
Cake ice cream sweet sesame snaps dragée cupcake wafer cookie
Unordered list item
Ordered list item
Cake ice cream sweet sesame snaps dragée cupcake wafer cookie
Ordered list item
Lưu ý việc sử dụng
ol,
ul {
margin: 0;
padding: 0;
list-style: none;
display: grid;
gap: 1rem;
}
8. Lúc đầu, nó có vẻ thừa, nhưng chúng tôi sẽ xóa kiểu danh sách vốn có bằng CSS. Mặc dù CSS thường không ảnh hưởng đến giá trị ngữ nghĩa của các phần tử, nhưng ol,
ul {
margin: 0;
padding: 0;
list-style: none;
display: grid;
gap: 1rem;
}
9 có thể xóa ngữ nghĩa danh sách đối với một số trình đọc màn hình. Cách khắc phục đơn giản nhất là xác định thuộc tính li {
display: grid;
grid-template-columns: 0 1fr;
gap: 1.75em;
align-items: start;
font-size: 1.5rem;
line-height: 1.25;
}
0 để khôi phục các ngữ nghĩa đó. Bạn có thể tìm hiểu thêm từ bài viết này từ Scott O'HaraCSS danh sách cơ sở
#Trước tiên, chúng tôi thêm thiết lập lại các kiểu danh sách ngoài việc xác định chúng dưới dạng lưới có khoảng cách
ol,
ul {
margin: 0;
padding: 0;
list-style: none;
display: grid;
gap: 1rem;
}
Lợi ích của
li {
display: grid;
grid-template-columns: 0 1fr;
gap: 1.75em;
align-items: start;
font-size: 1.5rem;
line-height: 1.25;
}
1 là thêm khoảng trống giữa ol,
ul {
margin: 0;
padding: 0;
list-style: none;
display: grid;
gap: 1rem;
}
7, thay thế cho một phương pháp cũ hơn, chẳng hạn như li {
display: grid;
grid-template-columns: 0 1fr;
gap: 1.75em;
align-items: start;
font-size: 1.5rem;
line-height: 1.25;
}
3Tiếp theo, chúng tôi sẽ chuẩn bị các mục danh sách
li {
display: grid;
grid-template-columns: 0 1fr;
gap: 1.75em;
align-items: start;
font-size: 1.5rem;
line-height: 1.25;
}
Chúng tôi cũng đã thiết lập các mục danh sách để sử dụng lưới. Và chúng tôi đã nâng cấp một "hack" cũ hơn bằng cách sử dụng
li {
display: grid;
grid-template-columns: 0 1fr;
gap: 1.75em;
align-items: start;
font-size: 1.5rem;
line-height: 1.25;
}
4 để chừa khoảng trống cho phần tử pseduo được định vị tuyệt đối với sự kết hợp của cột đầu tiên có chiều rộng li {
display: grid;
grid-template-columns: 0 1fr;
gap: 1.75em;
align-items: start;
font-size: 1.5rem;
line-height: 1.25;
}
5 và li {
display: grid;
grid-template-columns: 0 1fr;
gap: 1.75em;
align-items: start;
font-size: 1.5rem;
line-height: 1.25;
}
1. Chúng ta sẽ xem nó hoạt động như thế nào trong giây lát. Sau đó, chúng tôi sử dụng li {
display: grid;
grid-template-columns: 0 1fr;
gap: 1.75em;
align-items: start;
font-size: 1.5rem;
line-height: 1.25;
}
7 thay vì mặc định của li {
display: grid;
grid-template-columns: 0 1fr;
gap: 1.75em;
align-items: start;
font-size: 1.5rem;
line-height: 1.25;
}
8 và áp dụng một số kiểu dángUL. Thuộc tính dữ liệu cho dấu đầu dòng biểu tượng cảm xúc
#Bây giờ, đây có thể không chính xác là một giải pháp có thể mở rộng, nhưng để giải trí, chúng tôi sẽ thêm một thuộc tính dữ liệu tùy chỉnh sẽ xác định biểu tượng cảm xúc để sử dụng làm dấu đầu dòng cho từng mục danh sách
Đầu tiên, hãy cập nhật
ol,
ul {
margin: 0;
padding: 0;
list-style: none;
display: grid;
gap: 1rem;
}
6 HTMLol,
ul {
margin: 0;
padding: 0;
list-style: none;
display: grid;
gap: 1rem;
}
9Và để áp dụng biểu tượng cảm xúc dưới dạng gạch đầu dòng, chúng tôi sử dụng một kỹ thuật khá kỳ diệu trong đó các thuộc tính dữ liệu có thể được sử dụng làm giá trị của thuộc tính
ol,
ul {
margin: 0;
padding: 0;
list-style: none;
display: grid;
gap: 1rem;
}
90 cho các phần tử giảol,
ul {
margin: 0;
padding: 0;
list-style: none;
display: grid;
gap: 1rem;
}
1Đây là kết quả, với phần tử
ol,
ul {
margin: 0;
padding: 0;
list-style: none;
display: grid;
gap: 1rem;
}
91 được kiểm tra để giúp minh họa cách hoạt động của lướiBiểu tượng cảm xúc vẫn được phép chiếm chiều rộng để hiển thị, nhưng thực sự nằm trong khoảng trống. Bạn có thể thử nghiệm đặt cột lưới
ol,
ul {
margin: 0;
padding: 0;
list-style: none;
display: grid;
gap: 1rem;
}
7 đầu tiên thành ol,
ul {
margin: 0;
padding: 0;
list-style: none;
display: grid;
gap: 1rem;
}
93, điều này sẽ khiến khoảng cách được áp dụng đầy đủ giữa cột biểu tượng cảm xúc và cột văn bản danh sáchCV. Bộ đếm CSS và biến tùy chỉnh CSS
#Bộ đếm CSS đã là một giải pháp khả thi kể từ IE8, nhưng chúng tôi sẽ bổ sung thêm tính năng sử dụng các biến tùy chỉnh CSS để thay đổi màu nền của từng số.
Trước tiên, chúng tôi sẽ áp dụng các kiểu bộ đếm CSS, đặt tên cho bộ đếm của chúng tôi là
ol,
ul {
margin: 0;
padding: 0;
list-style: none;
display: grid;
gap: 1rem;
}
94ol,
ul {
margin: 0;
padding: 0;
list-style: none;
display: grid;
gap: 1rem;
}
6Điều này đạt được những điều sau đây, trông không khác nhiều so với kiểu dáng mặc định của
ol,
ul {
margin: 0;
padding: 0;
list-style: none;
display: grid;
gap: 1rem;
}
95Tiếp theo, chúng ta có thể áp dụng một số kiểu dáng cơ bản cho các số đếm
ol,
ul {
margin: 0;
padding: 0;
list-style: none;
display: grid;
gap: 1rem;
}
8Đầu tiên, chúng tôi áp dụng một phông chữ Google và mở rộng
ol,
ul {
margin: 0;
padding: 0;
list-style: none;
display: grid;
gap: 1rem;
}
96. ________ 197 là một nửa của _______ 197 được áp dụng của ol,
ul {
margin: 0;
padding: 0;
list-style: none;
display: grid;
gap: 1rem;
}
7 [ít nhất đó là những gì hiệu quả với phông chữ này, nó có thể là một con số kỳ diệu]. Nó căn chỉnh số mà chúng tôi muốn liên quan đến nội dung văn bản chính của ol,
ul {
margin: 0;
padding: 0;
list-style: none;
display: grid;
gap: 1rem;
}
7Tham gia bản tin của tôi để cập nhật bài viết, mẹo CSS và tài nguyên giao diện người dùng
Đừng điền vào đây nếu bạn là con người.
Sau đó, chúng ta cần chỉ định chiều rộng rõ ràng. Nếu không, nền sẽ không xuất hiện mặc dù văn bản sẽ
Phần đệm được thêm vào để sửa căn chỉnh của văn bản so với nền
Bây giờ chúng ta có cái này
Điều đó chắc chắn mang lại cảm giác tùy chỉnh hơn, nhưng chúng tôi sẽ thúc đẩy nó nhiều hơn một chút bằng cách hoán đổi biến
ol,
ul {
margin: 0;
padding: 0;
list-style: none;
display: grid;
gap: 1rem;
}
11 thành một biến tùy chỉnh CSS, như vậyol,
ul {
margin: 0;
padding: 0;
list-style: none;
display: grid;
gap: 1rem;
}
5Nó sẽ xuất hiện giống như vậy cho đến khi chúng ta thêm các kiểu nội tuyến vào
ol,
ul {
margin: 0;
padding: 0;
list-style: none;
display: grid;
gap: 1rem;
}
7 thứ hai và thứ ba để cập nhật giá trị biếnol,
ul {
margin: 0;
padding: 0;
list-style: none;
display: grid;
gap: 1rem;
}
7Và đây là kết quả cuối cùng của
ol,
ul {
margin: 0;
padding: 0;
list-style: none;
display: grid;
gap: 1rem;
}
6 và ol,
ul {
margin: 0;
padding: 0;
list-style: none;
display: grid;
gap: 1rem;
}
95Bởi Stephanie Eckles [@5t3ph]
Nâng cấp thuật toán của bạn. Danh sách nhiều cột
#Ví dụ của chúng tôi chỉ có 3 mục danh sách ngắn, nhưng đừng quên chúng tôi đã áp dụng lưới cho cơ sở
ol,
ul {
margin: 0;
padding: 0;
list-style: none;
display: grid;
gap: 1rem;
}
95 và ol,
ul {
margin: 0;
padding: 0;
list-style: none;
display: grid;
gap: 1rem;
}
6Trong khi ở kiếp trước, tôi đã làm những điều thú vị với mô đun trong PHP để chia nhỏ danh sách và áp dụng các lớp bổ sung để đạt được danh sách nhiều cột được chia đều
Với lưới CSS, giờ đây bạn có thể áp dụng nó trong ba dòng với khả năng phản hồi vốn có, các cột bằng nhau và phù hợp với độ dài dòng nội dung
Unordered list item
Cake ice cream sweet sesame snaps dragée cupcake wafer cookie
Unordered list item
Ordered list item
Cake ice cream sweet sesame snaps dragée cupcake wafer cookie
Ordered list item
2Áp dụng cho ví dụ hiện tại của chúng tôi [hãy chắc chắn loại bỏ
ol,
ul {
margin: 0;
padding: 0;
list-style: none;
display: grid;
gap: 1rem;
}
17 trên ol,
ul {
margin: 0;
padding: 0;
list-style: none;
display: grid;
gap: 1rem;
}
7 trước] mang lạiBạn có thể chuyển chế độ xem này bằng cách cập nhật biến
ol,
ul {
margin: 0;
padding: 0;
list-style: none;
display: grid;
gap: 1rem;
}
19 trong Codepen thành ol,
ul {
margin: 0;
padding: 0;
list-style: none;
display: grid;
gap: 1rem;
}
60Gotcha. Hơn cả văn bản thuần túy như nội dung ol,
ul {
margin: 0;
padding: 0;
list-style: none;
display: grid;
gap: 1rem;
}
7
#ol,
ul {
margin: 0;
padding: 0;
list-style: none;
display: grid;
gap: 1rem;
}
Nếu bạn có nhiều hơn văn bản thuần túy bên trong
ol,
ul {
margin: 0;
padding: 0;
list-style: none;
display: grid;
gap: 1rem;
}
7 - bao gồm cả nội dung nào đó chẳng hạn như ol,
ul {
margin: 0;
padding: 0;
list-style: none;
display: grid;
gap: 1rem;
}
63 vô tội - mẫu lưới của chúng tôi sẽ bị hỏngTuy nhiên, đó là một giải pháp rất dễ dàng - bọc nội dung
ol,
ul {
margin: 0;
padding: 0;
list-style: none;
display: grid;
gap: 1rem;
}
7 trong một ol,
ul {
margin: 0;
padding: 0;
list-style: none;
display: grid;
gap: 1rem;
}
65. Mẫu lưới của chúng tôi không quan tâm các phần tử là gì, nhưng nó chỉ mong đợi hai phần tử, trong đó phần tử giả được tính là phần tử đầu tiênNâng cấp lên CSS Marker
#Trong những tháng sau khi bài viết này được đăng lần đầu, hỗ trợ cho
ol,
ul {
margin: 0;
padding: 0;
list-style: none;
display: grid;
gap: 1rem;
}
4 đã trở nên tốt hơn nhiều trên tất cả các trình duyệt hiện đạiBộ chọn giả
ol,
ul {
margin: 0;
padding: 0;
list-style: none;
display: grid;
gap: 1rem;
}
4 cho phép thay đổi trực tiếp và tạo kiểu cho dấu đầu dòng/số danh sách ol,
ul {
margin: 0;
padding: 0;
list-style: none;
display: grid;
gap: 1rem;
}
95 hoặc ol,
ul {
margin: 0;
padding: 0;
list-style: none;
display: grid;
gap: 1rem;
}
6Chúng tôi hoàn toàn có thể thay thế giải pháp cho dấu đầu dòng
ol,
ul {
margin: 0;
padding: 0;
list-style: none;
display: grid;
gap: 1rem;
}
6 bằng cách sử dụng ol,
ul {
margin: 0;
padding: 0;
list-style: none;
display: grid;
gap: 1rem;
}
4 nhưng chúng tôi phải hạ cấp giải pháp ol,
ul {
margin: 0;
padding: 0;
list-style: none;
display: grid;
gap: 1rem;
}
95 của mình vì chỉ có một số thuộc tính được phép cho ol,
ul {
margin: 0;
padding: 0;
list-style: none;
display: grid;
gap: 1rem;
}
4
84ol,
ul {
margin: 0;
padding: 0;
list-style: none;
display: grid;
gap: 1rem;
}
85ol,
ul {
margin: 0;
padding: 0;
list-style: none;
display: grid;
gap: 1rem;
}
90ol,
ul {
margin: 0;
padding: 0;
list-style: none;
display: grid;
gap: 1rem;
}
87ol,
ul {
margin: 0;
padding: 0;
list-style: none;
display: grid;
gap: 1rem;
}
88ol,
ul {
margin: 0;
padding: 0;
list-style: none;
display: grid;
gap: 1rem;
}
89ol,
ul {
margin: 0;
padding: 0;
list-style: none;
display: grid;
gap: 1rem;
}
50ol,
ul {
margin: 0;
padding: 0;
list-style: none;
display: grid;
gap: 1rem;
}
51ol,
ul {
margin: 0;
padding: 0;
list-style: none;
display: grid;
gap: 1rem;
}
Kiểu danh sách không có thứ tự với ol,
ul {
margin: 0;
padding: 0;
list-style: none;
display: grid;
gap: 1rem;
}
4
#ol,
ul {
margin: 0;
padding: 0;
list-style: none;
display: grid;
gap: 1rem;
}
Vì
ol,
ul {
margin: 0;
padding: 0;
list-style: none;
display: grid;
gap: 1rem;
}
90 vẫn là thuộc tính được phép, nên chúng tôi có thể giữ giải pháp ol,
ul {
margin: 0;
padding: 0;
list-style: none;
display: grid;
gap: 1rem;
}
54 của mình để cho phép đánh dấu biểu tượng cảm xúc tùy chỉnh 🎉Chúng ta chỉ cần tráo đổi
ol,
ul {
margin: 0;
padding: 0;
list-style: none;
display: grid;
gap: 1rem;
}
91 thành ol,
ul {
margin: 0;
padding: 0;
list-style: none;
display: grid;
gap: 1rem;
}
4ol,
ul {
margin: 0;
padding: 0;
list-style: none;
display: grid;
gap: 1rem;
}
0Sau đó, xóa các thuộc tính lưới không còn cần thiết khỏi
ol,
ul {
margin: 0;
padding: 0;
list-style: none;
display: grid;
gap: 1rem;
}
7 và thêm lại một số ol,
ul {
margin: 0;
padding: 0;
list-style: none;
display: grid;
gap: 1rem;
}
58 để thay thế li {
display: grid;
grid-template-columns: 0 1fr;
gap: 1.75em;
align-items: start;
font-size: 1.5rem;
line-height: 1.25;
}
1 đã xóaol,
ul {
margin: 0;
padding: 0;
list-style: none;
display: grid;
gap: 1rem;
}
1Cuối cùng, trước đây chúng tôi đã xóa
ol,
ul {
margin: 0;
padding: 0;
list-style: none;
display: grid;
gap: 1rem;
}
70 nhưng chúng tôi cần thêm lại vào một số lề trái để đảm bảo không gian cho ol,
ul {
margin: 0;
padding: 0;
list-style: none;
display: grid;
gap: 1rem;
}
4 để tránh bị cắt do trànol,
ul {
margin: 0;
padding: 0;
list-style: none;
display: grid;
gap: 1rem;
}
2Và kết quả trực quan giống hệt với giải pháp trước đây của chúng tôi, như bạn có thể thấy trong bản demo
Kiểu danh sách đã đặt hàng với ol,
ul {
margin: 0;
padding: 0;
list-style: none;
display: grid;
gap: 1rem;
}
4
#ol,
ul {
margin: 0;
padding: 0;
list-style: none;
display: grid;
gap: 1rem;
}
Đối với danh sách theo thứ tự của chúng tôi, giờ đây chúng tôi có thể chuyển đổi và tận dụng bộ đếm tích hợp
Chúng tôi cũng phải loại bỏ
ol,
ul {
margin: 0;
padding: 0;
list-style: none;
display: grid;
gap: 1rem;
}
11 và ol,
ul {
margin: 0;
padding: 0;
list-style: none;
display: grid;
gap: 1rem;
}
74 vì vậy chúng tôi sẽ chuyển sang sử dụng thuộc tính tùy chỉnh của mình cho giá trị ol,
ul {
margin: 0;
padding: 0;
list-style: none;
display: grid;
gap: 1rem;
}
85. Và chúng tôi sẽ thay đổi tên thuộc tính tùy chỉnh của mình thành ol,
ul {
margin: 0;
padding: 0;
list-style: none;
display: grid;
gap: 1rem;
}
76 cho rõ ràngVì vậy, phong cách giảm của chúng tôi như sau
ol,
ul {
margin: 0;
padding: 0;
list-style: none;
display: grid;
gap: 1rem;
}
3Đừng quên cập nhật tên thuộc tính tùy chỉnh CSS trong HTML nữa
Xem ra cho gotcha này. Thay đổi thuộc tính
77 chool,
ul {
margin: 0;
padding: 0;
list-style: none;
display: grid;
gap: 1rem;
}7 sẽ xóa phần tử giảol,
ul {
margin: 0;
padding: 0;
list-style: none;
display: grid;
gap: 1rem;
}4. Vì vậy, nếu bạn cần một kiểu hiển thị khác cho nội dung danh sách, bạn sẽ cần áp dụng nó bằng cách lồng một phần tử bao bọc bổ sungol,
ul {
margin: 0;
padding: 0;
list-style: none;
display: grid;
gap: 1rem;
}
ol,
ul {
margin: 0;
padding: 0;
list-style: none;
display: grid;
gap: 1rem;
}
4 Trình diễn
#ol,
ul {
margin: 0;
padding: 0;
list-style: none;
display: grid;
gap: 1rem;
}
Đây là kiểu danh sách tùy chỉnh được cập nhật của chúng tôi hiện sử dụng
ol,
ul {
margin: 0;
padding: 0;
list-style: none;
display: grid;
gap: 1rem;
}
4Đảm bảo kiểm tra hỗ trợ trình duyệt hiện tại để quyết định sử dụng giải pháp kiểu danh sách tùy chỉnh nào dựa trên đối tượng duy nhất của bạn. Bạn có thể muốn chọn sử dụng
ol,
ul {
margin: 0;
padding: 0;
list-style: none;
display: grid;
gap: 1rem;
}
4 như một cải tiến lũy tiến từ một trong những giải pháp đã được chứng minh trước đó