Tôi không có tài năng gì cả. Tôi chỉ đam mê hiểu biết
Thiết Lập Style Danh Sách Bằng CSS Cho Website

Thiết Lập Style Danh Sách Bằng CSS Cho Website


Ngày 15 Tháng 12 Năm 2020

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é!

Các Ví Dụ Về Danh Sách Trong Phát Triển Web

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

See the Pen Gradient Ordered List by Erin E. Sullivan (@erinesullivan) on CodePen.

Nguồn

List UI

See the Pen List UI by Collin Smith (@collinscode) on CodePen.

Nguồn

File Tree CSS

See the Pen File Tree CSS by Sazzad (@sazzad) on CodePen.

Nguồn

CSS Gradient Counter List

See the Pen CSS Gradient Counter List by Mattia Astorino (@equinusocio) on CodePen.

Nguồn

Styles For Ordered List Item Numbers

See the Pen Styles For Ordered List Item Numbers by Paul Murphy (@88paulmurphy) on CodePen.

Nguồn

Ordered list numbering

See the Pen Ordered list numbering by Mark (@xmark) on CodePen.

Nguồn

Styling Ordered List Numbers

See the Pen Styling Ordered List Numbers by Ramón M. Cros (@ramonmcros) on CodePen.

Nguồn

Resetting list counters

See the Pen Resetting list counters by Mark (@xmark) on CodePen.

Nguồn

list style - Ol and ul style

See the Pen list style - Ol and ul style by WILDER TAYPE (@wilder_taype) on CodePen.

Nguồn

CSS-only numbered lists

See the Pen CSS-only numbered lists with "drop" shapes by Ines Montani (@ines) on CodePen.

Nguồn

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ẻ!