HTML & CSS Lập trình web

Định dạng CSS – Phần 6: List Group

This entry is part 11 of 24 in the series HTML & CSS cho người bắt đầu

List Group là 1 thành phần phổ biến trong CSS, List Group bao gồm một số thuộc tính như định dạng kiểu danh sách, hình dạng, màu sắc,… các nút của danh sách, thêm màu sắc cho list hoặc cho các mục trong list. Nếu đã từng học qua HTML cơ bản, các bạn cũng biết, List được chia làm 2 loại: danh sách có thứ tự (ol) và danh sách không thứ tự (ul)

Định dạng CSS   Phần 6: List Group

Code HTML cần chuẩn bị:

1/ List-style-type:

List-style-type cho phép chúng ta thay đổi kí hiệu đầu dòng của mỗi danh sách (kí tự số, chữ, la mã,… trong danh sách có thứ tự; hoặc dấu tròn, kí tự hình viên đạn, hình tròn,… trong danh sách không thứ tự).

Code mẫu: (phần CSS)

2/ List-style-position:

Thuộc tính position có tác dụng xác định các mục nằm bên trong nội dung, nó có 2 giá trị phổ biến: inside (bên trong nội dung) và outside (bên ngoài nội dung)

Code mẫu: (phần CSS)

3/ List-style-image:

Ngoài việc dùng các kí hiệu hình ô vuông, hình tròn hay hình tên lửa ở đầu mỗi danh sách, thì List-style-image cho phép ta có thể đem các loại kí hiệu từ nguồn bên ngoài vào.

Cú pháp của nó là:

list-style-image: url(AnhDong.gif);

Code mẫu: (phần CSS)

4/ List-style:

Thuộc tính list-style giúp chúng ta kết hợp giữa List-style-type, List-style-position, List-style-image lại thành 1 thuộc tính chung.

Qua bài viết này, các bạn cần nắm rõ một số thuộc tính cơ bản trong List Group, nó giúp rất nhiều cho các bạn trong thiết kế Website. Các bạn nên chạy lại code mẫu ở trên, thay đổi nhiều giá trị để hiểu rõ hơn bản chất của thuộc tính đó. Chúc các bạn học tốt, hẹn gặp lại ở bài sau.

Series Navigation<< Định dạng CSS – Phần 5: Box GroupĐịnh dạng CSS – Phần 7: Position Group >>