NỘI DUNG BÀI VIẾT
Giới thiệu
Các thuộc tính về danh sách trong CSS cho phép bạn:
- Thiết lập các đánh dấu phần tử danh sách khác nhau cho các danh sách có thứ tự
- Thiết lập các đánh dấu phần tử danh sách khác nhau cho các danh sách không có thứ tự
- Thiết lập một hình ảnh đánh dấu phần tử danh sách
Các danh sách HTML
Trong HTML, có hai loại danh sách:
- Danh sách không có thứ tự (<ul>) – các phần tử trong danh sách được đánh dấu bằng các bullet
- Danh sách có thứ tự (<ol>) – các phần tử trong danh sách được đánh dấu bằng số hoặc chữ cái
Với CSS, danh sách có thể được định kiểu thêm, hình ảnh có thể được sử dụng để đánh dấu các mục trong danh sách.
Đánh dấu mục trong danh sách khác nhau
Thuộc tính list-style-type chỉ định các kiểu đánh dấu mục trong danh sách. Ví dụ sau cho thấy một số danh sách có sẵn các đánh dấu dành cho mục của nó:
Ví dụ
Một số các giá trị dành cho danh sách không có thứ tự, và một số dành cho danh sách có thứ tự.
Đánh dấu các mục của danh sách bằng hình ảnh
Thuộc tính list-style-image chỉ định một hình ảnh để đánh dấu các mục trong danh sách.
Ví dụ
Vị trí đánh dấu các mục trong danh sách
Thuộc tính list-style-position xác định nơi sẽ đánh dấu các mục của danh sách sẽ xuất hiện bên trong hoặc bên ngoài dòng nội dung.
Ví dụ
Danh sách – Thuộc tính rút gọn
Thuộc tính list-style là một thuộc tính rút gọn. Nó được sử dụng để đặt tất cả các thuộc tính của danh sách trong một mô tả (declaration).
Ví dụ
Khi sử dụng thuộc tính rút gọn, thứ tự của các giá trị trong thuộc tính là:
- list-style-type (nếu một danh sách đánh dâu bằng hình ảnh được chỉ định, giá trị của thuộc tính này sẽ được hiển thị nếu hình ảnh vì một số lý do nào đó không thể hiển thị)
- list-style-position (xác định cho vị trí đánh dấu mục danh sách xuất hiện bên trong hoặc bên ngoài dòng nội dung)
- list-style-image (chỉ định một hình ảnh như để đánh dấu các mục của danh sách)
Nếu một trong các giá trị thuộc tính ở trên bị thiếu, giá trị mặc định cho của các thuộc tính này sẽ được sử dụng, nếu có.
Kiểu của danh sách với màu sắc
Chúng ta cũng có thể định kiểu danh sách với màu sắc, để làm cho chúng nhìn thú vị hơn một chút. Bất cứ điều gì thêm vào thẻ <ol> hoặc <ul>, sẽ ảnh hưởng đến toàn bộ danh sách, trong khi thuộc tính được bổ sung vào các thẻ <li> sẽ ảnh hưởng đến các mục (phần tử) của danh sách.
Ví dụ
Kết luận
Qua đây là một số chia sẻ về CSS, mời bạn tiếp tục theo dõi các bài viết sau để hiểu rõ hơn về CSS.
Các bạn có thể tham khảo các bài viết hay về CSS tại đây.
Hãy tham gia nhóm Học lập trình để thảo luận thêm về các vấn đề cùng quan tâm.
