Danh sách là cách quan trọng hiển thị dữ liệu HTML. Khi có số mục với chủ đề chung, như cỡ giày hoặc công cụ điều hướng, cách hiệu quả trình bày dữ liệu có thể dùng danh sách.
Mặc định, danh sách HTML khá đơn giản. Đó là lúc thuộc tính CSS list-style xuất hiện. Thuộc tính list-style và các thuộc tính con dùng tùy chỉnh danh sách bổ sung thiết kế website độc đáo.
Hướng dẫn này bao quát, với ví dụ, cách định kiểu danh sách CSS dùng thuộc tính list-style và thuộc tính con. Nó cũng bao quát cách đặt màu nền danh sách và mục. Sau đọc, bạn chuyên gia định kiểu danh sách CSS.
Danh sách HTML và CSS
Danh sách hiển thị số mục liên quan. HTML có ba loại danh sách trình bày dữ liệu:
- Danh sách không thứ tự (<ul>) – Danh sách mục giá trị đánh dấu bằng dấu chấm.
- Danh sách có thứ tự (<ol>) – Danh sách mục giá trị đánh dấu hệ thống thứ tự (ví dụ: số hoặc chữ cái tuần tự).
- Danh sách định nghĩa (<dl>) – Danh sách mục với mô tả đi kèm.
Nếu quan tâm học thêm danh sách HTML, đọc bài danh sách trong HTML.
Mỗi loại danh sách có kiểu mặc định HTML riêng. Bên cạnh đó, CSS cung cấp thuộc tính làm danh sách thẩm mỹ hơn và phù hợp hướng dẫn phong cách.
Thuộc tính danh sách CSS cho phép bạn:
- Thay đổi dấu mục danh sách có thứ tự.
- Thay đổi dấu mục danh sách không thứ tự.
- Đặt hình ảnh làm dấu mục danh sách.
- Thêm màu nền cho danh sách và mục.
Hướng dẫn thảo luận hai cách tổng quát định kiểu danh sách CSS: thuộc tính list-style qua thuộc tính con riêng, và thuộc tính viết tắt list-style. Thuộc tính con của list-style:
81% người tham gia cho biết họ cảm thấy tự tin hơn về cơ hội việc làm công nghệ sau khi tham gia bootcamp. Được ghép nối với bootcamp ngay hôm nay.
Sinh viên trung bình của bootcamp dành ít hơn sáu tháng để chuyển đổi nghề nghiệp, từ khi bắt đầu bootcamp đến khi tìm được việc đầu tiên.
- list-style-type
- list-style-position
- list-style-image
Thuộc tính viết tắt list-style viết:
list-style: [list-style-type] [list-style-position] [list-style-image];
Chúng ta cũng thảo luận cách thêm màu nền cho danh sách và mục danh sách.
Ví dụ Danh sách HTML Cơ bản
Trước, xem ví dụ danh sách HTML. Giả sử tiệm bánh địa phương nhờ tạo trang web bao gồm danh sách công thức cho khách dùng tại nhà.
Đây mã HTML cơ bản định nghĩa danh sách:
<ul> <li>Bánh bông lan</li> <li>Bánh chocolate khay</li> <li>Bánh chanh pound</li> <li>Bánh flapjack bơ đậu phộng</li> <li>Bánh muffin chocolate</li> </ul>
Danh sách xuất hiện:
Danh sách năm mục. Ta bao mỗi mục trong thẻ <li> ("li" = "list item"). Ta bao thẻ <li> trong thẻ <ul>. Thẻ <ul> xác định danh sách không thứ tự.
Vì danh sách không thứ tự, trình duyệt đặt dấu chấm trước mỗi mục. (Nếu danh sách có thứ tự, trình duyệt đặt giá trị có thứ tự—thường số hoặc chữ—trước mỗi mục.)
Bây giờ, khám phá cách định kiểu danh sách dùng thuộc tính list-style.
Dấu mục mục danh sách (List Item Markers)
Thuộc tính list-style-type chỉ định loại dấu dùng cho mục trong danh sách.
Dấu mục Danh sách không thứ tự
Giả sử tiệm bánh muốn xem danh sách trông như nào với dấu chấm tròn so với dấu vuông trước mỗi mục. Ta dùng mã sau tạo thiết kế cho tiệm:
styles.css
li.circlebulletPoint { list-style-type: circle; }
li.squarebulletPoint { list-style-type: square; }
index.html
<ul>
<li class="circlebulletPoint">Bánh bông lan</li>
<li class="squarebulletPoint">Bánh chocolate khay</li>
<li>Bánh chanh pound</li>
<li>Bánh flapjack bơ đậu phộng</li>
<li>Bánh muffin chocolate</li>
</ul>
Mã trả về:
Như thấy, mục đầu dùng dấu chấm tròn. Ta gán class "circlebulletPoint"—và do đó kiểu tương ứng—cho mục đầu. Gán class "squarebulletPoint" cho mục hai, trình duyệt hiển thị dấu vuông trước mục đó.
Các list-style-type khác áp dụng cho danh sách:
- disc
- circle
- decimal
- decimal-leading-zero
- lower-roman
- upper-roman
- lower-greek
- lower-latin
- upper-latin
- armenian
- georgian
- lower-alpha
- none
Chúng ta thảo luận vài loại áp dụng danh sách có thứ tự ở phần sau.
Dấu mục Danh sách có thứ tự
Danh sách có thứ tự có kiểu dấu mục riêng.
Giả sử muốn công thức tiệm bánh hiển thị danh sách có thứ tự. Muốn xem danh sách trông như nào với thứ tự đánh dấu chữ cái thường trước mỗi mục, và chữ số La Mã hoa trước mỗi mục. Dùng mã:
styles.css
li.alpha { list-style-type: lower-alpha; }
li.roman { list-style-type: upper-roman; }
index.html
<ol>
<li class="alpha">Bánh bông lan</li>
<li class="roman">Bánh chocolate khay</li>
<li>Bánh chanh pound</li>
<li>Bánh flapjack bơ đậu phộng</li>
<li>Bánh muffin chocolate</li>
</ol>
Mã trả về:
Trong ví dụ, dùng danh sách có thứ tự (<ol>) thay không thứ tự. Cho phép sắp xếp danh sách với số (hoặc chữ, v.v.). Sau đó, đánh dấu mục đầu chữ cái thường, mục hai chữ số La Mã hoa.
Loại bỏ Kiểu dáng Dấu mục Mặc định
Có ba thuộc tính CSS dùng xóa khía cạnh mặc định từ danh sách: list-style-type, margin, padding.
Đặt list-style-type thành None
Nếu không muốn bất kỳ dấu chấm hoặc chỉ số thứ tự (như số/chữ) trước mục, đặt list-style-type thành none. Ví dụ dùng thuộc tính xóa dấu chấm/chỉ số:
styles.css
ul { list-style-type: none; }
index.html
<ul>
<li>Bánh bông lan</li>
<li>Bánh chocolate khay</li>
<li>Bánh chanh pound</li>
<li>Bánh flapjack bơ đậu phộng</li>
<li>Bánh muffin chocolate</li>
</ul>
Mã trả về:
Danh sách vẫn cấu trúc danh sách, nhưng hiển thị trang web, mục danh sách thiếu dấu.
Vị trí Dấu mục (Marker Position)
Thuộc tính list-style-position chỉ định vị trí dấu mục trong danh sách.
Có hai vị trí dấu mục xuất hiện: inside (bên trong) và outside (bên ngoài). Nếu dấu mục xuất hiện bên trong danh sách, văn bản xuất hiện trực tiếp bên cạnh dấu mục; nếu bên ngoài, có khoảng trống giữa dấu mục và mục văn bản.
Hai quy tắc CSS ví dụ minh họa list-style-position áp dụng cả hai trạng thái:
ul.a { list-style-position: outside; }
ul.b { list-style-position: inside; }
Danh sách đầu, dùng list-style-position: outside. Đây kiểu mặc định áp dụng danh sách. Nếu không chỉ định vị trí này hoặc bất kỳ list-style-position nào, trình duyệt mặc định vị trí này cho dấu mục. Mã cho danh sách tiệm bánh dùng kiểu này:
<ul class="a"> <li>Bánh bông lan</li> <li>Bánh chocolate khay</li> <li>Bánh chanh pound</li> <li>Bánh flapjack bơ đậu phộng</li> <li>Bánh muffin chocolate</li> </ul>
Mã trả về:
Trong kiểu này, dấu mục (dấu chấm) xuất hiện bên ngoài mục danh sách.
Danh sách hai, chỉ định vị trí dấu mục "inside". Mã danh sách tiệm bánh kiểu này:
<ul class="b"> <li>Bánh bông lan</li> <li>Bánh chocolate khay</li> <li>Bánh chanh pound</li> <li>Bánh flapjack bơ đậu phộng</li> <li>Bánh muffin chocolate</li> </ul>
Mã trả về:
Khó nhận thấy nhưng vị trí dấu mục giờ bên ngoài mục danh sách.
Dấu mục Hình ảnh (Image Marker)
Danh sách thường dùng dấu tùy chỉnh hình ảnh. Nếu muốn đặt dấu mục thành hình ảnh, dùng thuộc tính CSS list-style-image.
Giả sử tiệm bánh nhờ đổi dấu mục danh sách thành hình ảnh bánh (thay vì dấu chấm, số, v.v.). Dùng mã:
styles.css
ul { list-style-image: url("https://img.icons8.com/small/16/000000/cake.png"); }
index.html
<ul>
<li>Bánh bông lan</li>
<li>Bánh chocolate khay</li>
<li>Bánh chanh pound</li>
<li>Bánh flapjack bơ đậu phộng</li>
<li>Bánh muffin chocolate</li>
</ul>
Mã trả về:
Như thấy, thay vì dùng dấu mặc định, ta dùng dấu riêng. Trường hợp này, dấu mục là hình ảnh bánh.
Thuộc tính Viết tắt List Style
Chúng ta thảo luận thuộc tính con list-style. Chúng cho phép áp dụng kiểu riêng cho danh sách.
Tuy nhiên, có cách hiệu quả hơn định kiểu danh sách. Thay vì dùng từng thuộc tính con, ta dùng thuộc tính viết tắt list-style. Cú pháp:
ul { list-style: [list-style-type] [list-style-position] [list-style-image];
Thứ tự giá trị chỉ định là thứ tự dùng với thuộc tính viết tắt. Nếu không chỉ định giá trị cho một trong ba thuộc tính con, trình duyệt dùng giá trị mặc định thuộc tính đó.
Giả sử muốn định kiểu danh sách công thức với hình ảnh bánh và di chuyển dấu mục ra ngoài danh sách. Làm với mã:
styles.css
ul { list-style: outside url('https://img.icons8.com/small/16/000000/cake.png'); }
index.html
<ul>
<li>Bánh bông lan</li>
<li>Bánh chocolate khay</li>
<li>Bánh chanh pound</li>
<li>Bánh flapjack bơ đậu phộng</li>
<li>Bánh muffin chocolate</li>
</ul>
Mã trả về:
Danh sách giờ dùng hình ảnh bánh cho mỗi dấu mục. Thêm, mỗi dấu mục định kiểu outside danh sách.
Màu Danh sách CSS (CSS List Colors)
Khi thiết kế danh sách, bạn quyết định muốn danh sách hiển thị màu nền.
Giả sử tiệm bánh nhờ đặt màu nền toàn danh sách xanh nhạt và màu hồng cho mỗi mục. Dùng thuộc tính CSS background:
ul { background: lightblue; padding: 10px; }
ul li { background: pink; margin: 10px; }
Mã trả về:
<ul> <li>Bánh bông lan</li> <li>Bánh chocolate khay</li> <li>Bánh chanh pound</li> <li>Bánh flapjack bơ đậu phộng</li> <li>Bánh muffin chocolate</li> </ul>
Trong mã, áp dụng màu nền xanh nhạt dùng background cho <ul>, tạo danh sách không thứ tự. Cũng cho <ul> padding 10px.
Cũng áp dụng nền hồng và tạo margin 10px quanh mỗi mục. Ta làm bằng cách bao kiểu trong bộ chọn "ul li". Bộ chọn nói nền hồng và margin 10px áp dụng cho tất cả <li> trong <ul>.
Kết luận
Khi làm việc danh sách HTML, bạn dùng CSS áp dụng kiểu tùy chỉnh cho danh sách làm thẩm mỹ hơn. Thuộc tính list-style dùng áp dụng kiểu (hoặc xóa kiểu) từ danh sách CSS.
Hướng dẫn thảo luận, với ví dụ, cách dùng thuộc tính CSS list-style và ba thuộc tính con. Chúng ta cũng thảo luận cách đặt màu nền danh sách và mục bên trong.
Bây giờ bạn có kiến thức bắt đầu định kiểu danh sách CSS như chuyên gia!