Danh sách

Podcast CSS – 030: Danh sách

Hãy tưởng tượng rằng bạn dự định mua một loạt mặt hàng trong lần đi tạp hoá tiếp theo. Một cách phổ biến để trình bày thông tin này bằng hình ảnh là danh sách, nhưng làm thế nào để thêm phong cách cho danh sách hàng tạp hoá của bạn?

<ul>
  <li>oat milk</li>
  <li>rhubarb</li>
  <li>cereal</li>
  <li>pie crust</li>
</ul>

Tạo Danh sách

Danh sách trên bắt đầu bằng phần tử ngữ nghĩa hoặc <ul>, trong đó các mặt hàng trong danh sách mua sắm hàng tạp hoá (phần tử <li>) là phần tử con. Nếu kiểm tra từng phần tử <li>, bạn có thể thấy tất cả các phần tử đó đều có display: list-item. Đây là lý do trình duyệt hiển thị ::marker theo mặc định.

li {
  display: list-item;
}

Có hai loại danh sách khác.

Bạn có thể tạo các danh sách theo thứ tự bằng <ol>, trong trường hợp đó, mục danh sách sẽ hiển thị một số dưới dạng ::marker.

<ol>
  <li>oat milk</li>
  <li>rhubarb</li>
  <li>cereal</li>
  <li>pie crust</li>
</ol>

Ngoài ra, danh sách nội dung mô tả được tạo bằng <dl>. Tuy nhiên, loại danh sách này không sử dụng phần tử mục danh sách <li>.

<dl>
  <dt>oat milk</dt>
  <dd>- non dairy trendy drink</dd>
  <dt>cereal</dt>
  <dd>- breakfast food</dd>
</dl>

Kiểu danh sách

Giờ đây, khi đã biết cách tạo danh sách, bạn có thể tạo kiểu cho danh sách. Các thuộc tính CSS đầu tiên cần khám phá là các thuộc tính áp dụng cho toàn bộ danh sách.

Có 3 thuộc tính kiểu danh sách mà bạn có thể sử dụng để tạo kiểu cho ví dụ: list-style-position, list-style-image và list-style-type.

list-style-position

list-style-position cho phép bạn di chuyển dấu đầu dòng đến inside hoặc outside nội dung của mục danh sách. outside mặc định có nghĩa là dấu đầu dòng không được đưa vào nội dung của mục danh sách trong khi inside di chuyển phần tử đầu tiên trong số các nội dung của mục danh sách.

list-style-image

list-style-image cho phép bạn thay thế dấu đầu dòng của danh sách bằng hình ảnh. Thao tác này cho phép bạn đặt một hình ảnh như url hoặc none để tạo dấu đầu dòng thành hình ảnh, svg hoặc gif. Bạn cũng có thể sử dụng bất kỳ loại nội dung nghe nhìn nào hoặc thậm chí là URI dữ liệu.

Hãy xem cách thêm hình ảnh của từng mặt hàng tạp hoá dưới dạng list-style-image:

list-style-type

Lựa chọn cuối cùng là tạo kiểu cho list-style-type. Thao tác này thay đổi các dấu đầu dòng thành từ khoá kiểu đã biết, chuỗi tuỳ chỉnh, biểu tượng cảm xúc và các thành phần khác. Bạn có thể xem tất cả các loại kiểu danh sách có thể áp dụng tại đây.

Viết tắt của list-style

Giờ đây, khi đã có tất cả các thuộc tính riêng lẻ này, bạn có thể sử dụng viết tắt list-style để đặt tất cả các kiểu danh sách trong một dòng:

list-style: <'list-style-type'> || <'list-style-position'> || <'list-style-image'>

list-style cho phép bạn khai báo các tổ hợp 1, 2 hoặc 3 thuộc tính list-style theo thứ tự bất kỳ. Nếu bạn đặt cả list-style-type và list-style-image, thì list-style-type sẽ được dùng làm phương án dự phòng nếu không có hình ảnh.

/* type */
list-style: square;

/* image */
list-style: url('../img/shape.png');

/* position */
list-style: inside;

/* type | position */
list-style: georgian inside;

/* type | image | position */
list-style: lower-roman url('../img/shape.png') outside;

/* Keyword value */
list-style: none;

/* Global values */
list-style: inherit;
list-style: initial;
list-style: revert;
list-style: unset;

Đây là thuộc tính thường dùng nhất của các kiểu danh sách được đề cập trong phần này. Một ứng dụng phổ biến là list-style: none để ẩn các kiểu mặc định. Kiểu mặc định đến từ trình duyệt và bạn thường thấy việc đặt lại biểu định kiểu sẽ xoá các kiểu danh sách như khoảng đệm và lề. Bạn cũng có thể dùng cách viết tắt này để đặt kiểu, chẳng hạn như list-style: square inside;

Cho đến nay, các ví dụ tập trung vào việc tạo kiểu cho toàn bộ danh sách và các mục trong danh sách, nhưng còn một phương pháp chi tiết hơn thì sao?

Phần tử giả ::marker

Phần tử đánh dấu list-item là dấu đầu dòng, dấu gạch nối hoặc chữ số La Mã giúp chỉ ra từng mục trong danh sách.

Nếu kiểm tra danh sách trong Công cụ cho nhà phát triển, bạn có thể thấy phần tử ::marker cho từng mục trong danh sách, mặc dù bạn không khai báo bất kỳ mục nào trong HTML. Nếu kiểm tra ::marker thêm, bạn sẽ thấy kiểu định kiểu mặc định của trình duyệt cho đối tượng này.

::marker {
    unicode-bidi: isolate;
    font-variant-numeric: tabular-nums;
    text-transform: none;
    text-indent: 0px !important;
    text-align: start !important;
    text-align-last: start !important;
}

Khi bạn khai báo danh sách, mỗi mục được cung cấp một điểm đánh dấu, mặc dù HTML không có dấu đầu dòng hay chữ số La Mã. Đây là phần tử giả vì trình duyệt tạo phần tử đó cho bạn và cung cấp một API định kiểu giới hạn để nhắm mục tiêu phần tử đó. Tìm hiểu thêm về cấu trúc của dấu đầu dòng CSS. ::marker có hỗ trợ hạn chế trong Safari.

Hộp đánh dấu

Trong mô hình bố cục CSS, điểm đánh dấu mục danh sách được biểu thị bằng một hộp đánh dấu liên kết với từng mục danh sách. Hộp đánh dấu là vùng chứa thường chứa dấu đầu dòng hoặc số.

Để tạo kiểu cho hộp đánh dấu, bạn có thể sử dụng bộ chọn ::marker. Điều này cho phép bạn chỉ chọn điểm đánh dấu thay vì tạo kiểu dựa trên toàn bộ danh sách.

Kiểu điểm đánh dấu

Bây giờ, bạn đã chọn điểm đánh dấu, hãy xem các thuộc tính định kiểu có sẵn cho bộ chọn này. Bạn có thể tìm hiểu thêm về Dấu đầu dòng tuỳ chỉnh sử dụng CSS ::marker trên web.dev.

Có khá nhiều thuộc tính CSS ::marker được phép:

• animation-*
• transition-*
• color
• direction
• font-*
• content
• unicode-bidi
• white-space

Loại hiển thị

Tất cả thuộc tính list-style và ::marker của chúng ta đều biết cách tạo kiểu cho các phần tử <li> vì chúng có giá trị hiển thị mặc định là mục danh sách. Bạn cũng có thể chuyển các mục không phải là <li> thành một mục trong danh sách.

Bạn thực hiện việc này bằng cách thêm thuộc tính display: list-item. Một ví dụ về cách sử dụng display: list-item là khi bạn muốn một dấu đầu dòng treo trên một tiêu đề để có thể thay đổi thành nội dung khác bằng ::marker. Ví dụ sau đây cho thấy một tiêu đề sử dụng display: list-item để định kiểu, trong đó có một danh sách sử dụng mã đánh dấu danh sách chính xác.

Mặc dù có thể chuyển mọi nội dung thành thành phần hiển thị mục danh sách bằng display, nhưng bạn không nên sử dụng thuộc tính này thay vì sử dụng đúng mã đánh dấu danh sách, nếu nội dung bạn đang định kiểu thực sự là một danh sách. Việc thay đổi giao diện trực quan của một mục thành một mục trong danh sách sẽ không làm thay đổi cách các dịch vụ hỗ trợ tiếp cận đọc và nhận dạng mục. Vì vậy, mục đó sẽ không được đọc dưới dạng một mục trong danh sách cho trình đọc màn hình hoặc chuyển đổi thiết bị. Bạn phải luôn sử dụng mã đánh dấu ngữ nghĩa và tạo danh sách bằng <li> bất cứ khi nào có thể.

Kiểm tra kiến thức

Kiểm tra kiến thức của bạn về danh sách

Tài nguyên

• Hướng dẫn về MDN về kiểu danh sách
• Dấu đầu dòng tuỳ chỉnh sử dụng CSS ::marker
• Tạp chí đập phá: Danh sách CSS, điểm đánh dấu và bộ đếm
• MDN sử dụng bộ đếm CSS
• Mô-đun Danh sách CSS và bộ đếm cấp 3
• Thủ thuật CSS: Đếm bằng bộ đếm CSS và lưới CSS