Định dạng danh sách (list) trong CSS

Các thuộc tính định dạng danh sách (list) trong CSS bao gồm:

- Sử dụng thuộc tính list-style-type để kiểm soát hình dạng của biểu tượng giới thiệu mục trong danh sách.

Thuộc tính list-style-position định vị biểu tượng xuất hiện ở đâu trong danh sách.

Sử dụng thuộc tính list-style-image để chọn hình ảnh làm nhãn đánh dấu thay vì số thứ tự hoặc biểu tượng bullet point (•).

Thuộc tính list-style là rút gọn của các thuộc tính danh sách, giúp bạn dễ dàng áp dụng.

Sử dụng thuộc tính marker-offset để xác định khoảng cách giữa biểu tượng đánh dấu và văn bản trong danh sách.

Để tìm hiểu chi tiết về các thuộc tính định dạng danh sách trong CSS, hãy tham khảo bài học CSS của Mytour dưới đây.

1. Thuộc tính định dạng danh sách trong HTML và CSS

Trong HTML, có hai loại danh sách chính:

- Danh sách không thứ tự (thẻ ul): Các mục danh sách được đánh dấu bằng các biểu tượng chấm tròn.

- Danh sách có thứ tự (thẻ ol): Các mục danh sách được đánh dấu bằng chữ số hoặc chữ cái.

Các thuộc tính định dạng danh sách trong CSS cho phép:

- Tạo đánh dấu khác nhau cho các mục trong danh sách theo thứ tự (ordered lists).

- Tùy chỉnh đánh dấu cho các mục trong danh sách không theo thứ tự (unordered lists).

- Sử dụng hình ảnh làm nhãn cho các mục trong danh sách.

- Thêm màu nền cho cả danh sách và các mục trong danh sách.

2. Thuộc tính định dạng danh sách (list) trong CSS

2.1. Loại đánh dấu (list-style-type)

Thuộc tính list-style-type trong CSS quy định kiểu biểu tượng sẽ được sử dụng để đánh dấu các mục trong danh sách, ví dụ như dấu chấm tròn, ô vuông, chữ số, ... .

Ví dụ:

Kết quả sẽ xuất hiện như sau:

2.2. Hình ảnh đánh dấu (list-style-image)

Thuộc tính list-style-image chỉ định hình ảnh để làm nhãn đánh dấu thay vì sử dụng số thứ tự hay biểu tượng dấu chấm, chữ số, ... để giới thiệu các mục trong danh sách.

Ví dụ:

Kết quả sẽ hiển thị như sau:

2.3. Vị trí của Biểu tượng Đánh dấu (list-style-position)

Thuộc tính list-style-position xác định vị trí mà các biểu tượng đánh dấu sẽ xuất hiện trong danh sách.

Trong đó:

'list-style-position: outside;' có nghĩa là biểu tượng đánh dấu nằm bên ngoài luồng danh sách các mục.

'list-style-position: inside;' có nghĩa là biểu tượng đánh dấu nằm bên trong danh sách các mục.

Ví dụ:

Kết quả hiển thị như sau:

2.4. Loại bỏ biểu tượng với thuộc tính list-style-type:none

Sử dụng thuộc tính list-style-type:none để loại bỏ biểu tượng và nhãn đánh dấu các mục trong danh sách. Chú ý rằng danh sách cần được căn lề và có padding mặc định.

Để loại bỏ biểu tượng và nhãn đánh dấu các mục trong danh sách, thêm margin:0 và padding:0 vào ul hoặc ol.

Ví dụ:

Kết quả sẽ xuất hiện như bên dưới:

2.5. Thuộc tính list-style rút gọn

Sử dụng thuộc tính list-style để thiết lập tất cả các định dạng danh sách trong một khai báo.

Ví dụ:

Kết quả sẽ hiển thị như sau:

Khi sử dụng thuộc tính rút gọn, thứ tự các giá trị thuộc tính là như sau:

- Thuộc tính list-style-type (nếu thuộc tính list-style-image được chỉ định, giá trị của thuộc tính này sẽ được hiển thị nếu hình ảnh gặp lỗi hoặc không thể hiển thị).

- Thuộc tính list-style-position (xác định vị trí của biểu tượng, nhãn đánh dấu các mục danh sách xuất hiện bên trong hay ngoài luồng nội dung).

- Thuộc tính list-style-image (xác định hình ảnh làm nhãn đánh dấu các mục trong danh sách).

Nếu thiếu một trong các giá trị thuộc tính trên, giá trị mặc định sẽ được áp dụng (nếu có).

2.6. Thêm màu nền cho danh mục trong danh sách CSS

Áp dụng màu nền để làm nổi bật các danh mục trong danh sách.

Mọi thuộc tính bổ sung vào các thẻ ol hoặc ul đều tác động toàn bộ vào danh sách. Các thuộc tính thêm vào thẻ li chỉ ảnh hưởng đến từng mục danh sách cụ thể.

Ví dụ:

Dưới đây là kết quả:

2.7. Các thuộc tính định dạng danh sách (list) trong CSS

Dưới đây là bảng liệt kê các thuộc tính định dạng danh sách (list) trong CSS:

Mytour đã hướng dẫn chi tiết về các thuộc tính định dạng danh sách (list) trong CSS. Nếu có câu hỏi hoặc thắc mắc, độc giả có thể để lại ý kiến trong phần bình luận dưới bài viết. Bài học tiếp theo của Mytour sẽ chia sẻ về thuộc tính Padding trong CSS.