Danh sách

Podcast CSS – 030: Danh sách

Hãy tưởng tượng bạn có một loạt mặt hàng mà bạn định mua trong chuyến đi tạp hoá tiếp theo. Một cách phổ biến để thể hiện thông tin này bằng hình ảnh là danh sách. Tuy nhiên, bạn có thể tạo kiểu cho danh sách hàng tạp hoá như thế nào?

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

Tạo List

Danh sách trước đó bắt đầu bằng một phần tử ngữ nghĩa hoặc <ul>, với các mục trong danh sách 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 rằng tất cả phần tử đó đều có display: list-item. Đó là lý do trình duyệt sẽ hiển thị ::marker theo mặc định.

li {
  display: list-item;
}

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

Bạn có thể tạo 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>

Và danh sách 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

Hỗ trợ trình duyệt

  • 1
  • 12
  • 1
  • 1

Nguồn

Giờ bạn đã 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 được á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ể 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. Giá trị outside mặc định có nghĩa là dấu đầu dòng không được đưa vào nội dung của các mục trong danh sách trong khi inside di chuyển phần tử đầu tiên trong số nội dung của mục danh sách.

Danh sách có cả bên ngoài và bên trong ::đánh dấu cho thấy bên ngoài (giá trị mặc định) không nằm trong mục danh sách và nằm bên trong hộp nội dung mục danh sách.

list-style-image

list-style-image cho phép bạn thay thế các dấu đầu dòng trong 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 để biến dấu đầu dòng thành hình ảnh, svg hoặc gif. Bạn cũng có thể dùng mọi loại nội dung đa phương tiện 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. Lựa chọn này sẽ thay đổi 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.v. Bạn có thể xem tất cả các loại kiểu danh sách có thể có tại đây.

Viết tắt 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 cú pháp viết tắt list-style để đặt tất cả các kiểu danh sách của chúng tôi 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 trong số các 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 trong trường hợp 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 các biểu định kiểu đặt lại loại bỏ các kiểu danh sách như khoảng đệm và lề. Bạn cũng có thể sử dụng cú pháp viết tắt này để thiết lập các 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 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 biểu thị từng mục trong danh sách.

Một danh sách có 3 mục cho thấy mỗi dấu đầu dòng là ::points-phần tử giả.

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ù không khai báo phần tử nào trong HTML. Nếu kiểm tra thêm ::marker, bạn sẽ thấy kiểu mặc định của trình duyệt.

::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 cấp một điểm đánh dấu, mặc dù không có dấu đầu dòng hoặc chữ số La Mã trong HTML. Đây là phần tử giả vì trình duyệt tạo phần tử này cho bạn, đồng thời cung cấp một API định kiểu có giới hạn để nhắm đến phần tử đó. Tìm hiểu thêm về cấu trúc của dấu đầu dòng CSS. ::marker hỗ trợ có giới hạn 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 đánh dấu

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 với CSS ::marker trên web.dev.

Có một số thuộc tính ::marker được cho phép của CSS:

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

Loại hiển thị

Tất cả các thuộc tính list-style và ::marker của chúng tôi đề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à list-item. Bạn cũng có thể chuyển những nội dung không phải là <li> thành 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à nếu bạn muốn hiện dấu đầu dòng trên một tiêu đề, do đó bạn có thể thay đổi dấu đầu dòng này thành tiêu đề khác bằng ::marker. Ví dụ sau đây cho thấy một tiêu đề sử dụng display: list-item cho mục đích định kiểu, với danh sách sử dụng mã đánh dấu danh sách chính xác.

Mặc dù bạn có thể chuyển mọi thứ thành khung hiển thị mục danh sách bằng display, nhưng bạn không nên dùng phương thức này thay vì sử dụng mã đánh dấu danh sách chính xác, nếu nội dung bạn đang tạo 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 thay đổi cách các dịch vụ hỗ trợ tiếp cận đọc và nhận dạng mục đó. Do đó, đối với trình đọc màn hình hoặc chuyển đổi thiết bị, mục đó sẽ không được đọc dưới dạng mục danh sách. Bạn nê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 mức độ hiểu biết của bạn

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

Phần tử đứng trước mục danh sách được gọi là

::dấu đầu dòng
Hãy thử lại.
::bút chì
Hãy thử lại.
::điểm đánh dấu
Chính xác!
::bộ đếm
Hãy thử lại.

Ba loại danh sách HTML là

<dl>
Chính xác!
<lo>
Hãy thử lại.
<ol>
Chính xác!
<li>
Hãy thử lại.
<ul>
Chính xác!
<list>
Hãy thử lại.

Hai kiểu nào trong danh sách này sẽ áp dụng kiểu cho ::points đánh dấu?

transition
Chính xác!
background-color
Hãy thử lại.
color
Chính xác!
display
Hãy thử lại.

Tài nguyên