Danh sách

Hãy tưởng tượng bạn có một loạt mặt hàng mà bạn dự định mua trong chuyến đi mua sắm thực phẩm tiếp theo. Một cách phổ biến để thể hiện điều này một cách trực quan là danh sách – nhưng làm cách nào để bạn có thể thêm kiểu vào danh sách thực phẩm?

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

li {
  display: list-item;
}

Ngoài ra, còn có hai loại danh sách khác.

Bạn có thể tạo danh sách đã sắp xếp bằng <ol>, trong trường hợp này, 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

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

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à những thuộc tính được áp dụng cho toàn bộ danh sách.

Có ba 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-imagelist-style-type.

list-style-position

list-style-position cho phép bạn di chuyển dấu đầu dòng sang 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ó trong nội dung của mục danh sách, trong khi inside di chuyển phần tử đầu tiên trong nội dung của mục danh sách.

Một danh sách có cả ::marker bên ngoài và bên trong cho biết 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 của danh sách bằng hình ảnh. Điều này cho phép bạn đặt một hình ảnh như url hoặc none để làm cho các dấu đầu dòng trở 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 chúng ta có thể 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

Tuỳ chọn cuối cùng là tạo kiểu cho list-style-type để 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à nhiều nội dung khác. Bạn có thể xem tất cả các kiểu danh sách có thể có tại đây.

list-style viết tắt

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 ký hiệu viết tắt list-style để thiết lập tất cả kiểu danh sách của chúng ta 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 của một, hai hoặc ba thuộc tính list-style theo thứ tự bất kỳ. Nếu bạn đặt cả list-style-typelist-style-image, thì list-style-type sẽ được dùng làm hình ảnh 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. Các kiểu mặc định đến từ trình duyệt và bạn thường thấy các tệp kiểu đặt lại xoá các kiểu danh sách như khoảng đệm và lề. Bạn cũng có thể sử dụng ký hiệu 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 cách tiếp cận 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ỉ báo từng mục trong danh sách.

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

Nếu kiểm tra danh sách trong DevTools, bạn có thể thấy một phần tử ::marker cho mỗi mục trong danh sách, mặc dù không khai báo bất kỳ phần tử nào trong HTML. Nếu kiểm tra kỹ hơn ::marker, bạn sẽ thấy kiểu mặc định của trình duyệt cho nút 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 một danh sách, mỗi mục sẽ được gắn 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à một phần tử giả vì trình duyệt tạo phần tử này cho bạn và cung cấp một API định kiểu có giới hạn để nhắm mục tiêu đến phần tử này. Tìm hiểu thêm về cấu trúc của dấu đầu dòng CSS. ::markerhỗ 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 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 điểm đá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 bằng CSS ::marker trên web.dev.

Có khá nhiều Thuộc tính ::marker CSS đượ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::marker đều biết cách tạo kiểu cho các phần tử <li> vì các phần tử này có giá trị hiển thị mặc định là mục danh sách. Bạn cũng có thể tạo các mục không phải là <li> thành một mục 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 có dấu đầu dòng treo trên tiêu đề, để bạn có thể thay đổi dấu đầu dòng đó thành một dấu đầu dòng 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 tạo kiểu, với một danh sách sử dụng đúng mã đánh dấu danh sách.

Mặc dù bạn có thể biến bất kỳ nội dung nào 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 thành phần 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 của một mục thành mục 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ục danh sách cho trình đọc màn hình hoặc thiết bị chuyển đổi. 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 mức độ hiểu biết

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

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

::bullet
::pencil
::counter
::marker

Có 3 loại danh sách HTML là

<lo>
<dl>
<ul>
<li>
<list>
<ol>

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

color
transition
display
background-color

Tài nguyên