Cssul>

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ến

Tô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

  ul { color: #0E6FC9; }
  .text-wrapper {    color: black; }
  

  1

Kiểu tích hợp

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ỉnh

Phầ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

  ul { color: #0E6FC9; }
  .text-wrapper {    color: black; }
  

  4 (cỡ chữ, họ phông chữ, v.v. )

• ul { color: #0E6FC9; }
  .text-wrapper {    color: black; }
  

  5
• Thuộc tính

  ul { color: #0E6FC9; }
  .text-wrapper {    color: black; }
  

  6 và

  ul { color: #0E6FC9; }
  .text-wrapper {    color: black; }
  

  7

• ul { color: #0E6FC9; }
  .text-wrapper {    color: black; }
  

  8,

  ul { color: #0E6FC9; }
  .text-wrapper {    color: black; }
  

  9,

  li::marker {
    content: "😁"
  }
  

  0
• và

  li::marker {
    content: "😁"
  }
  

  1

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

<ul>
  <li><span class="text-wrapper">Muffin candy canes<span>li>
  <li><span class="text-wrapper">Fruitcake powder cookie<span>li>    
  <li><span class="text-wrapper">Biscuit muffin liquorice<span>li>
ul>

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 đó sau

Vă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: "😁"
}

1

Bạ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

<ul>
  <li data-emoji="🤪">Oat cake jelly beansli>
  <li data-emoji="😴">Croissant cotton candyli>    
  <li data-emoji="🤠">Jelly beans muffin tiramisuli>
ul>

Và truy xuất chúng trong CSS bằng hàm

li::marker {
  content: "😁"
}

8

li::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: "😁"
}

9

li: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

<ul>
  <li data-emoji="🤪">Oat cake jelly beansli>
  <li data-emoji="😴">Croissant cotton candyli>    
  <li data-emoji="🤠">Jelly beans muffin tiramisuli>
ul>

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('https://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

<ul>
  <li data-emoji="🤪">Oat cake jelly beansli>
  <li data-emoji="😴">Croissant cotton candyli>    
  <li data-emoji="🤠">Jelly beans muffin tiramisuli>
ul>

2 để tạo một bộ đếm mới có tên là

<ul>
  <li data-emoji="🤪">Oat cake jelly beansli>
  <li data-emoji="😴">Croissant cotton candyli>    
  <li data-emoji="🤠">Jelly beans muffin tiramisuli>
ul>

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

<ul>
  <li data-emoji="🤪">Oat cake jelly beansli>
  <li data-emoji="😴">Croissant cotton candyli>    
  <li data-emoji="🤠">Jelly beans muffin tiramisuli>
ul>

4 chứ không phải các mục trong danh sách

Chú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

<ul>
  <li data-emoji="🤪">Oat cake jelly beansli>
  <li data-emoji="😴">Croissant cotton candyli>    
  <li data-emoji="🤠">Jelly beans muffin tiramisuli>
ul>

5 trên

<ul>
  <li data-emoji="🤪">Oat cake jelly beansli>
  <li data-emoji="😴">Croissant cotton candyli>    
  <li data-emoji="🤠">Jelly beans muffin tiramisuli>
ul>

6 của chúng tôi

Bâ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ắng

Mộ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

  <ul>
    <li data-emoji="🤪">Oat cake jelly beansli>
    <li data-emoji="😴">Croissant cotton candyli>    
    <li data-emoji="🤠">Jelly beans muffin tiramisuli>
  ul>
  

  8 để di chuyển điểm đánh dấu bên trong ô của mục danh sách
• 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.

  <ul>
    <li data-emoji="🤪">Oat cake jelly beansli>
    <li data-emoji="😴">Croissant cotton candyli>    
    <li data-emoji="🤠">Jelly beans muffin tiramisuli>
  ul>
  

  9 và ba mục đầu tiên của danh sách đó sẽ có số 6, 7 và 8
• 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);
}

0

Đánh dấu danh sách hoàn toàn tùy chỉnh

Nế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ữa

Xó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

<ol role="list">
  <li>Latviali>
  <li>Chinali>
  <li>Portugalli>
ol>

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; }

0

Tuy 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ì?

Làm cách nào để sử dụng kiểu danh sách trong CSS?