Danh sách CSS

Danh sách không có dấu:

  • Cà phê
  • Trà
  • Coca Cola
  • Cà phê
  • Trà
  • Coca Cola

Danh sách có dấu:

  1. Cà phê
  2. Trà
  3. Coca Cola
  1. Cà phê
  2. Trà
  3. Coca Cola

Danh sách HTML và thuộc tính CSS danh sách

Trong HTML, danh sách主要有 hai loại:

  • Danh sách không có dấu (ul) - các mục liệt kê sử dụng dấu mũi tên làm dấu
  • Danh sách có dấu (ol) - các mục liệt kê sử dụng số hoặc chữ cái làm dấu

Thuộc tính danh sách CSS cho phép bạn:

  • Đặt dấu danh sách khác nhau cho danh sách có dấu
  • Đặt dấu danh sách khác nhau cho danh sách không có dấu
  • Đặt hình ảnh làm dấu danh sách
  • Thêm màu nền cho danh sách và mục liệt kê

Các dấu danh sách khác nhau

list-style-type Thuộc tính xác định loại dấu danh sách:

Dưới đây là một số dấu danh sách có thể sử dụng:

Ví dụ

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;
}

Thử ngay

Ghi chú:Một số giá trị được sử dụng cho danh sách không có dấu và một số giá trị được sử dụng cho danh sách có dấu.

Hình ảnh làm dấu danh sách

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

Ví dụ

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

Thử ngay

Định vị dấu danh sách

list-style-position Thuộc tính xác định vị trí của dấu danh sách (dấu mũi tên).

"list-style-position: outside;" có nghĩa là điểm dấu danh sách sẽ ở bên ngoài mục liệt kê. Mỗi dòng của mục liệt kê sẽ được canh dọc theo đầu dòng. Đây là mặc định:

  • Cà phê - Nước uống pha từ cà phê đã rang
  • Trà
  • Coca-cola

"list-style-position: inside;" Biểu thị rằng dấu hiệu điểm đánh dấu sẽ xuất hiện trong mục danh sách. Do nó là một phần của mục danh sách, vì vậy nó sẽ trở thành một phần của văn bản và mở rộng văn bản ở đầu:

  • Cà phê - Nước uống pha từ cà phê đã rang
  • Trà
  • Coca-cola

Ví dụ

ul.a {
  list-style-position: outside;
}
ul.b {
  list-style-position: inside;
}

Thử ngay

Xóa thiết lập mặc định

list-style-type:none Thuộc tính này cũng có thể được sử dụng để xóa dấu hiệu hoặc điểm đánh dấu. Lưu ý rằng danh sách cũng có các margin và padding mặc định. Để xóa nội dung này, hãy thêm margin:0 và padding:0 :

Ví dụ

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

Thử ngay

Danh sách - Thuộc tính viết tắt

list-style Thuộc tính là một thuộc tính viết tắt. Nó được sử dụng để thiết lập tất cả các thuộc tính danh sách trong một dòng:

Ví dụ

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

Thử ngay

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

  • list-style-type(Nếu đã chỉ định list-style-image, thì giá trị của thuộc tính này sẽ được hiển thị khi hình ảnh không thể hiển thị do một lý do nào đó)
  • list-style-position(Đặt dấu hiệu mục danh sách nên hiển thị trong nội bộ hay bên ngoài luồng nội dung)
  • list-style-image(Đặt hình ảnh làm dấu hiệu mục danh sách)

Nếu thiếu một trong các giá trị thuộc tính trên, thì sẽ chèn giá trị mặc định của thuộc tính đó (nếu có).

Thiết lập màu sắc樣式 danh sách

Chúng ta còn có thể sử dụng cài đặt màu sắc để thiết lập樣式 danh sách, làm cho chúng trông thú vị hơn.

Bất kỳ樣式 nào được thêm vào thẻ <ol> hoặc <ul> sẽ ảnh hưởng đến toàn bộ danh sách, trong khi các thuộc tính được thêm vào thẻ <li> sẽ ảnh hưởng đến từng mục danh sách:

Ví dụ

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ả:

  1. Cà phê
  2. Trà
  3. Coca Cola
  • Cà phê
  • Trà
  • Coca Cola

Thử ngay

Những ví dụ khác

Danh sách tùy chỉnh có viền trái đỏ
Ví dụ này minh họa cách tạo danh sách có viền trái đỏ.
Danh sách viền ngang toàn màn hình
Ví dụ này演示 cách tạo danh sách có viền nhưng không có dấu hiệu mục liệt kê.
Tất cả các loại dấu hiệu mục liệt kê khác nhau của danh sách
Ví dụ này演示 tất cả các loại dấu hiệu mục liệt kê khác nhau trong CSS.

Tất cả các thuộc tính danh sách CSS

Thuộc tính Mô tả
list-style Thuộc tính viết tắt. Đặt tất cả các thuộc tính của danh sách trong một dòng.
list-style-image Chỉ định hình ảnh làm dấu hiệu mục liệt kê.
list-style-position Định nghĩa vị trí của dấu hiệu mục liệt kê (dấu chấm).
list-style-type Định nghĩa loại dấu hiệu của mục liệt kê.