Danh sách trong CSS - Fedu

CHÀO MỪNG BẠN ĐẾN VỚI THƯ VIỆN HỌC TẬP & ĐÀO TẠO CƠ BẢN

Danh sách trong CSS

HTML List và các thuộc tính List trong CSS

Trong HTML, có 2 kiểu danh sách (list) chính đó là:

  • unordered list (<ul>) – danh mục được liệt kê không theo thứ tự số
  • ordered lists (<ol>) – danh mục liệt kê theo thứ tự bằng số

Các thuộc tính list trong CSS cho phép bạn:

  • Thiết lập các danh mục khác nhau theo thứ tự
  • Thiết lập các danh mục khác nhau theo số thứ tự
  • Thiết lập ảnh như đầu mục danh sách
  • Thêm màu nền vào danh mục

Các dấu đầu mục khác nhau

Thuộc tính list-style-type xác định các kiểu dấu đầu mục. Ví dụ dưới đây hiển thị một số kiểu danh mục:

    list-style-type: circle;
}

ul.b {
    list-style-type: square;
}

ol.c {
    list-style-type: upper-roman;
}

ol.d {
    list-style-type: lower-alpha;
}

Lưu ý: có một số giá trị đầu mục không theo thứ tự và một số đầu mục theo thứ tự.

Ảnh cho đầu mục

Thuộc tính list-style-image xác định ảnh được dùng làm dấu đầu mục.

ul {
    list-style-image: url('sqpurple.gif');
}

Vị trí dấu đầu mục

Thuộc tính list-style-postion xác định xem dấu đầu mục được đặt bên trong hay bên ngoài nội dung.

ul {
    list-style-position: inside;
}

Bỏ thiết lập mặc định

Thuộc tính list-style-type:none được sử dụng để loại bỏ dấu đầu mục. Lưu ý danh sách hiển thị cũng có mặc định margin và padding. Để loại bỏ các thuộc tính đó, thêm margin:0 và  padding:0 vào thẻ <ul> hoặc <ol>:

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

Viết gọn thuộc tính list

Thuộc tính list-style có thể được viết gọn, dùng để gộp tất cả thuộc tính vào một dòng mã CSS duy nhất:

ul {
    list-style: square inside url("sqpurple.gif");
}

Khi viết gọn các thuôc tính list, thứ tự các giá trị thuộc tính được tuân thủ như sau:

  • list-style-type (nếu thuộc tính này được xác định, giá trị thuộc tính sẽ hiển thị nếu như vì lý do nào đó ảnh không hiển thị)
  • list-style-position (xác định dấu đầu mục xuất hiện ở trong hay ngoài nội dung)
  • list-style-image (xác định ảnh được dùng làm dấu đầu mục)

Nếu thiếu một trong các giá trị thuộc tính trên, giá trị mặc định của thuộc tính đó sẽ được thêm vào.

Định dạng list với màu sắc

Chúng ta có thể định dạng list bằng màu sắc, để trông cho bắt mắt người xem hơn. Mọi giá trị được thêm vào trong thẻ <ol>, <ul> thì hiệu ứng sẽ áp dụng cho toàn bộ list. Nếu chỉ thêm hiệu ứng vào thẻ <li> thì chỉ áp dụng cho danh sách riêng biệt.

ol {
    background: #ff9999;
    padding: 20px;
}

ul {
    background: #3399ff;
    padding: 20px;
}

ol li {
    background: #ffe5e5;
    padding: 5px;
    margin-left: 35px;
}

ul li {
    background: #cce5ff;
    margin: 5px;
}

Kết quả như sau:

Tất cả thuộc tính list

Thuộc tính Mô tả
list-style Thiết lập tất cả thuộc tinh list trong một dòng CSS
list-style-image xác định ảnh được sử dụng như dấu đầu mục
list-style-position xác định dấu đầu mục hiển thị ở trong hay ngoài nội dung
list-style-type xác định kiểu dấu đầu mục