Ngày hôm nay chúng ta sẽ cùng nhau đi vào tìm hiểu cách chỉnh sửa cũng như thiết lập style CSS dành cho thẻ danh sách trong HTML trong quá trình thiết kế và phát triển web nhé!
Đối với mội người thì danh sách có vẻ quá quen thuộc rồi nhỉ như là mục lục của một quyển sách, danh sách học sinh, danh sách các loại rau quả ... Trong HTML có cung cấp chúng ta 3 loại thẻ mô tả những loại danh sách khác nhau là thẻ danh sách không theo thứ tự(ul), thẻ danh sách theo thứ tự(ol), thẻ danh sách mô tả(dl). Bạn có thể tham khảo thêm về danh sách trong HTML ở đây nhé!
Thiết Lập Bullet Cho Danh Sách HTML
Trong phần này chúng ta sẽ sử dụng thuộc tính ::marker để thiết lập lại bullet cho danh sách trong HTML nhé!
Việc đầu tiên cần làm là ta sẽ tạo một cấu trúc danh sách HTML cho trang web thông qua đoạn mã sau nhé:
HTML
<ul>
<li>Thành Phần 1</li>
<li>Thành Phần 2</li>
<li>QThành Phần 3</li>
<li>Thành Phần 4</li>
<li>Thành Phần 5</li>
</ul>
Và kết quả bạn xem Codepen bên dưới nhé:
See the Pen Thẻ Danh Sách HTML by haycuoilennao19 (@haycuoilennao19) on CodePen.
Bây giờ chúng ta sẽ thay đổi các bullet bằng cách sử dụng thuộc tính ::marker trong CSS thông qua đoạn code dưới đây nhé:
CSS
li::marker {
color: DodgerBlue;
font-size: 2rem;
}
Và kết quả bạn xem bên dưới nhé:
See the Pen the danh sach va marker by haycuoilennao19 (@haycuoilennao19) on CodePen.
Sử dụng hình ảnh cho bullet
Để sử dụng hình ảnh cho bullet trong danh sách thì chúng ta có thể dùng thuộc tính tổng quát như sau:
li::marker{content: url(Đường dẫn hình ảnh)}
Và để hiểu rõ hơn bạn xem ví dụ dưới đây nhé:
See the Pen the danh sach voi bullet hinh anh by haycuoilennao19 (@haycuoilennao19) on CodePen.
Thay đổi dạng number trong thẻ ol
Đối với danh sách theo thứ tự thì chúng ta cũng có thể thay đổi được nội dung số của nó bằng cách sử dụng hàm Counter. Và để giúp bạn hiểu rõ hơn thì mình có làm một ví dụ minh họa ở bên dưới nha:
HTML
<ol>
<li>Thành Phần 1</li>
<li>Thành Phần 2</li>
<li>Thành Phần 3</li>
<li>Thành Phần 4</li>
<li>Thành Phần 5</li>
</ol>
CSS
li::marker {
content:"Đối tượng " counter(list-item) ") " ;
color: DarkOrange;
}
Và kết quả cuối cùng bạn xem dưới đây nhé:
See the Pen thay doi số trong the danh sách by haycuoilennao19 (@haycuoilennao19) on CodePen.
Thay đổi background và color trong thẻ ol
Trong phần này chúng ta sẽ đi vào thiết lập background cho các chữ số của phần tử trong danh sách thông qua đoạn mã dưới đây nhé:
HTML
<ol>
<li>Thành Phần 1</li>
<li>Thành Phần 2</li>
<li>Thành Phần 3</li>
<li>Thành Phần 4</li>
<li>Thành Phần 5</li>
</ol>
CSS
ol {
line-height: 2;
}
ol li {
list-style-type: none;
counter-increment: item;
}
ol li:before {
content: counter(item);
margin-right: 5px;
font-size: 1.5rem;
background-color: DodgerBlue;
color: #fff;
font-weight: bold;
padding: 3px 8px;
border-radius: 3px;
}
Và kết quả bạn xem Codepen bên dưới nhé:
See the Pen thay doi background cho phan tu trong danh sach HTML by haycuoilennao19 (@haycuoilennao19) on CodePen.
Bạn có thể tham khảo về cách sử dụng CSS ::marker ở đây nhé!
Trong phần này chúng ta sẽ đi vào tìm hiểu các ví dụ về các thiết kế đẹp mắt dành cho phần tử danh sách trong website nhé!
Gradient Ordered List
Kết quả bạn xem bên dưới nha.
See the Pen Gradient Ordered List by Erin E. Sullivan (@erinesullivan) on CodePen.
Beautiful Ordered List CSS
Kết quả bạn xem bên dưới nha.
See the Pen List UI by Collin Smith (@collinscode) on CodePen.
CSS List Style Example
Kết quả bạn xem bên dưới nha.
See the Pen File Tree CSS by Sazzad (@sazzad) on CodePen.
List-style Color
Kết quả bạn xem bên dưới nha.
See the Pen CSS Gradient Counter List by Mattia Astorino (@equinusocio) on CodePen.
Custom Bullet Points CSS
Kết quả bạn xem bên dưới nha.
See the Pen Styles For Ordered List Item Numbers by Paul Murphy (@88paulmurphy) on CodePen.
Custom List Number Styling
Kết quả bạn xem bên dưới nha.
See the Pen Ordered list numbering by Mark (@xmark) on CodePen.
Styling Number List HTML
Kết quả bạn xem bên dưới nha.
See the Pen Styling Ordered List Numbers by Ramón M. Cros (@ramonmcros) on CodePen.
Multi Column List CSS
Kết quả bạn xem bên dưới nha.
See the Pen Resetting list counters by Mark (@xmark) on CodePen.
CSS List-Style Examples
Kết quả bạn xem bên dưới nha.
See the Pen list style - Ol and ul style by WILDER TAYPE (@wilder_taype) on CodePen.
CSS-only Numbered Lists
Kết quả bạn xem bên dưới nha.
See the Pen CSS-only numbered lists with "drop" shapes by Ines Montani (@ines) on CodePen.
Tổng kết:
Qua đây mình mong bài viết sẽ cung cấp thêm cho bạn những cách thiết lập style cho thẻ danh sách hữu ích dành cho việc phát triển, thiết kế web và nếu có thắc mắc gì cứ gửi email mình sẽ phản hồi sớm nhất có thể. Rất mong bạn tiếp tục ủng hộ trang web để mình có thể viết nhiều bài hay hơn nữa nhé. Chúc bạn có một ngày vui vẻ!