Danh sách trong CSS - CSS Lists

  • Thanh Vo

    Tác giả

    Thanh Vo

  • Ngày đăng

    7 thg 11, 2022

  • Số lượt xem

    285 lượt xem


Trong HTML để thay đổi list mặc định CSS sẽ cung cấp cho chúng ta các thuộc tính để thay đổi các list theo giao diện từng website khác nhau.

Thuộc tính HTML Lists và CSS List

Trong HTML, có hai loại list chính:

  • danh sách không có thứ tự (<ul>) - các mục danh sách được đánh dấu bằng dấu đầu dòng
  • danh sách có thứ tự (<ol>) - các mục danh sách được đánh dấu bằng số hoặc chữ cái

Thuộc tính list CSS cho phép bạn:

  • Đặt các điểm đánh dấu mục danh sách khác nhau cho các danh sách đã sắp xếp
  • Đặt các điểm đánh dấu mục danh sách khác nhau cho các danh sách không có thứ tự
  • Đặt hình ảnh làm điểm đánh dấu mục danh sách
  • Thêm màu nền vào danh sách và liệt kê các mục

Các loại điểm đánh dấu mục list trong CSS

Thuộc tính list-style-type chỉ định loại điểm đánh dấu mục danh sách.

Ví dụ sau đây cho thấy một số điểm đánh dấu mục danh sách có sẵn:

ul.a {    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ấy hình ảnh làm điểm đánh dấu mục danh sách

Thuộc tính list-style-image chỉ định một hình ảnh làm điểm đánh dấu mục danh sách:

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

 

Vị trí các điểm đánh dấu mục trong danh sách

Thuộc tính list-style-position chỉ định vị trí của các điểm đánh dấu mục danh sách (dấu đầu dòng).

"list-style-position: outside;" nghĩa là các dấu đầu dòng sẽ nằm ngoài mục danh sách. Đầu mỗi dòng của một mục danh sách sẽ được căn chỉnh theo chiều dọc. Đây là mặc định:

  • Cà phê
  • Trà
  • Coca-cola

"list-style-position: inside;" nghĩa là các dấu đầu dòng sẽ nằm bên trong mục danh sách. Vì nó là một phần của mục danh sách, nó sẽ là một phần của văn bản và đẩy văn bản vào đầu:

  • Cà phê
  • Trà
  • Coca-cola
ul.a {    list-style-position: outside;  }    ul.b {    list-style-position: inside;  }

 

Xóa style mặc định

Thuộc tính list-style-type: none cũng có thể được sử dụng để xóa các điểm đánh dấu / dấu đầu dòng. Lưu ý rằng list cũng có marrgin và padding mặc định. Để loại bỏ điều này, hãy thêm margin: 0padding: 0 cho <ul> hoặc <ol>:

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

 

List - Shorthand property

Thuộc tính list-style là một thuộc tính shorthand. Nó được sử dụng để đặt tất cả các thuộc tính list trong một khai báo:

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

Khi sử dụng thuộc tính shorthand, thứ tự của các giá trị thuộc tính là:

  • list-style-type (nếu một hình ảnh kiểu danh sách đượ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 lý do nào đó không thể được hiển thị)
  • list-style-position (chỉ định xem các điểm đánh dấu mục danh sách sẽ xuất hiện bên trong hay bên ngoài luồng nội dung)
  • list-style-image (chỉ định một hình ảnh làm điểm đánh dấu mục danh sách)

Nếu thiếu một trong các giá trị thuộc tính ở trên, giá trị mặc định cho thuộc tính bị thiếu sẽ được chèn, nếu có.

ol {    background: #ff9999;    padding: 20px;  }    ul {    background: #3399ff;    padding: 20px;  }    ol li {    background: #ffe5e5;    color: darkred;    padding: 5px;    margin-left: 35px;  }    ul li {    background: #cce5ff;    color: darkblue;    margin: 5px;  }

Tổng số đánh giá: 0

Xếp hạng: 5 / 5 sao

Danh sách bài học về CSS

Liên Kết Chia Sẻ

Đây là liên kết chia sẻ bới cộng đồng người dùng, chúng tôi không chịu trách nhiệm gì về nội dung của các thông tin này. Nếu có liên kết nào không phù hợp xin hãy báo cho admin.