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

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

Mẹo nhỏ: Để tìm kiếm chính xác các mẫu web đẹp của Ninh Bình Web, hãy search trên Google với cú pháp: "Từ khóa" + "ninhbinhweb". (Ví dụ: mẫu web bất động sản ninhbinhweb). Tìm kiếm ngay

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 Ninh Bình Web. 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.

Rate this post

Thông báo chính thức: Ninh Bình Web (thuộc GiuseArt) không hợp tác với bất kỳ ai để bán giao diện Wordpress và cũng không bán ở bất kỳ kênh nào ngoại trừ Facebookzalo chính thức.

Chúng tôi chỉ support cho những khách hàng mua source code chính chủ. Tiền nào của nấy, khách hàng cân nhắc không nên ham rẻ để mua phải source code không rõ nguồn gốc và không có support về sau! Xin cám ơn!