Mẹo nhỏ: Để tìm kiếm chính xác các ấn phẩm của GiuseArt.com, hãy search trên Google với cú pháp: "Từ khóa" + "giuseart". (Ví dụ: thiệp tân linh mục giuseart). Tìm kiếm ngay
  • Trang chủ
  • Học CSS
  • [Tự học CSS] – Tìm hiểu các thuộc tính định dạng danh sách trong CSS
231 lượt xem

[Tự học CSS] – Tìm hiểu các thuộc tính định dạng danh sách trong CSS

Chào các bạn, mình rất vui khi hôm nay chúng ta lại gặp nhau trong một loạt bài hướng dẫn dùng CSS cơ bản của Giuseart.com. Ngày hôm nay mình viết bài này để hướng dẫn các bạn tìm hiểu về một thuộc tính mới. Đó là thuộc tính định dạng danh sách trong CSS. Chúng ta hãy cùng theo dõi bài viết để cùng nhau tìm hiểu về thuộc tính này nhé.

Cấu trúc của danh sách

Có hai kiểu danh sách là: danh sách có thứ tự (dùng thẻ <ol>) và danh sách không có thứ tự (dùng thẻ <ul>)

Các thẻ: <ol>, <ul>, <li> đều thuộc dạng phần tử khối.

Ví dụ :

 

Kết quả :

Chọn kiểu đánh dấu cho danh sách

Thuộc tính list-style-type dùng để chọn kiểu đánh dấu cho danh sách

Cú pháp :

Trong đó:

  • circle, disc, square: dùng cho danh sách không có thứ tự
  • decimal, decimal-leading-zero, lower-alpha, upper-alpha, lower-roman, upper-roman: dùng cho danh sách có thứ tự
  • none: không chọn kiểu đánh dấu cho danh sách

Ví dụ :

Kiểu đánh dấu danh sách bằng hình ảnh

Thuộc tính list-style-image dùng để thiết lập kiểu đánh dấu bằng hình ảnh cho danh sách.

Cú pháp:

Trong đó, “đường dẫn đến tập tin hình ảnh” có thể là đường dẫn tương đối hoặc tuyệt đối.

Ví dụ :

Và đây là kết quả :

Lưu ý: Nếu muốn thiết lập kiểu đánh dấu bằng hình ảnh cho danh sách thì trước hết ta phải thiết lập thuộc tính list-style-type với giá trị none để loại đó kiểu đánh dấu mặc định của danh sách.

Thiết lập vị trí đánh dấu danh sách

Thuộc tính list-style-position dùng để thiết lập vị trí đánh dấu danh sách. Cú pháp:

Trong đó

  • inside: đánh dấu nằm bên trong nội dung của phần tử <li>
  • outside: đánh dấu nằm bên ngoài nội dung của phần tử <li>
Kết quả :

Trạng thái before, thuộc tính content

Trạng thái before thường được dùng để tạo ra một phần tử nằm ở vị trí đầu tiên bên trong nội dung của phần tử <li>, và để tạo nội dung cho phần tử này thì ta sử dụng thuộc tính content

Ví dụ :

Kết quả :

Lời Kết

Qua bài viết này mình mong các bạn nắm chắc những kiến thức cần nhớ. Thuộc tính định dạng danh sách có ý nghĩa rất lớn trong việc tạo Menu cho Website của bạn hoặc cũng có thể áp dụng vào những trường hợp khác cần dùng đến một loạt các danh sách. Cảm ơn các bạn đã theo dõi bài viết , nếu có bất kỳ thắc mắc nào hãy comment vào phía dưới bài bài viết.

[Tự học CSS] – Tìm hiểu các thuộc tính định dạng danh sách trong CSS
5 (2) votes

Thông báo: GiuseArt đang xây dựng một website chia sẻ tài nguyên thiết kế đồ họa hoàn toàn miễn phí cho người Công Giáo, dự kiến ra mắt vào đầu năm 2019. Nếu bạn muốn, hãy tham gia cùng chúng tôi nhé! Tham gia ngay

Bài viết mới cập nhật:

Bình luận Facebook

1 bình luận trong “[Tự học CSS] – Tìm hiểu các thuộc tính định dạng danh sách trong CSS

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

Chat Facebook