Bài 22: Cách sử dụng Lists trong css

Cách sử dụng Lists trong css

Trong CSS, danh sách (Lists) được sử dụng để định dạng và trình bày các danh sách điểm, danh sách đánh số, danh sách định nghĩa và danh sách liên kết.

Để sử dụng Lists trong CSS, chúng ta có thể sử dụng các thuộc tính sau:

1. list-style-type: định dạng kiểu đánh dấu cho mục danh sách.

Ví dụ:

ul {
  list-style-type: disc; /* Đây là kiểu đánh dấu dạng hình tròn đầu dòng */
}
ol {
  list-style-type: decimal; /* Đây là kiểu đánh dấu dạng số */
}

2. list-style-image: định dạng hình ảnh đánh dấu cho mục danh sách.

Ví dụ:

ul {
  list-style-image: url('bullet.png'); /* Sử dụng hình ảnh 'bullet.png' làm đánh dấu */
}

3. list-style-position: định vị vị trí đánh dấu trong mục danh sách.

Ví dụ:

ul {
  list-style-position: inside; /* Đánh dấu sẽ được đặt bên trong phần tử cha của nó */
}

4. list-style: kết hợp và định dạng cùng lúc cho các thuộc tính trên.

Ví dụ:

ul {
  list-style: square inside url('bullet.png'); /* Sử dụng hình vuông làm đánh dấu, đặt bên trong phần tử cha của nó và sử dụng hình ảnh 'bullet.png' */
}

Với các thuộc tính này, chúng ta có thể tùy chỉnh và trình bày danh sách theo ý muốn của mình.