Việc sử dụng Li trong CSS là gì?

Thuộc tính list-style là thuộc tính tốc ký đặt giá trị cho ba thuộc tính liên quan đến danh sách khác nhau trong một khai báo

ul {
  list-style:  ||  || ;
}

Đây là một ví dụ về cú pháp

ul {
  list-style: square outside none;
}

Cái nào sẽ giống với phiên bản viết tay sau đây

ul {
  list-style-type: square;
  list-style-position: outside;
  list-style-image: none;
}

Nói tóm lại, nếu bất kỳ giá trị nào bị bỏ qua, chúng sẽ trở lại trạng thái ban đầu

Các giá trị cho list-style-type

Thuộc tính list-style-type xác định loại danh sách bằng cách đặt nội dung của từng điểm đánh dấu hoặc dấu đầu dòng trong danh sách. Các giá trị từ khóa được chấp nhận cho list-style-type bao gồm

• disc

• ul {
    list-style: square outside none;
  }

  0

• ul {
    list-style: square outside none;
  }

  1

• ul {
    list-style: square outside none;
  }

  2

• ul {
    list-style: square outside none;
  }

  3

• ul {
    list-style: square outside none;
  }

  4

• ul {
    list-style: square outside none;
  }

  5

• ul {
    list-style: square outside none;
  }

  6

• ul {
    list-style: square outside none;
  }

  7

• ul {
    list-style: square outside none;
  }

  8

• ul {
    list-style: square outside none;
  }

  9

• ul {
    list-style-type: square;
    list-style-position: outside;
    list-style-image: none;
  }

  0

• ul {
    list-style-type: square;
    list-style-position: outside;
    list-style-image: none;
  }

  1

• ul {
    list-style-type: square;
    list-style-position: outside;
    list-style-image: none;
  }

  2

• ul {
    list-style-type: square;
    list-style-position: outside;
    list-style-image: none;
  }

  3

MDN có một danh sách đầy đủ hơn. Giá trị không phải từ khóa và đang bắt đầu nhận được một số hỗ trợ, như

ul {
  list-style-type: "→";
}

Bản trình diễn sau đây bao gồm một nhóm các danh sách không có thứ tự để minh họa từng giá trị từ khóa

Dự phòng nhúng CodePen

Thuộc tính list-style-type áp dụng cho tất cả các danh sách và cho bất kỳ phần tử nào được đặt thành

ul {
  list-style-type: square;
  list-style-position: outside;
  list-style-image: none;
}

Màu của điểm đánh dấu danh sách sẽ là bất kỳ màu nào được tính toán của phần tử (được đặt thông qua thuộc tính

ul {
  list-style-type: square;
  list-style-position: outside;
  list-style-image: none;
}

Các giá trị cho ul { list-style-type: square; list-style-position: outside; list-style-image: none; }7

Thuộc tính

ul {
  list-style-type: square;
  list-style-position: outside;
  list-style-image: none;
}

ul {
  list-style-type: square;
  list-style-position: outside;
  list-style-image: none;
}

ul {
  list-style-type: "→";
}

Dự phòng nhúng CodePen

Các giá trị cho ul { list-style-type: "→"; }1

Thuộc tính

ul {
  list-style-type: "→";
}

ul {
  list-style-image: url(images/bullet.png);
}

Bản trình diễn khác

Dự phòng nhúng CodePen

hỗ trợ trình duyệt

Internet Explorer 6 và 7 không hỗ trợ tất cả các giá trị từ khóa cho list-style-type và cũng có lỗi trong đó các mục danh sách nổi không hiển thị điểm đánh dấu danh sách của chúng. Vấn đề này được giải quyết bằng cách sử dụng hình nền (thay vì

ul {
  list-style-type: "→";
}

 
First we do this,
 
and then we do this,
 
and then we do this.