Danh sách CSS

Thuộc tính danh sách CSS cho phép bạn đặt, thay đổi dấu hiệu của phần tử danh sách hoặc sử dụng hình ảnh làm dấu hiệu của phần tử danh sách.

Danh sách CSS

Trong một số nghĩa, bất kỳ nội dung nào không phải là văn bản mô tả đều có thể được coi là danh sách. Censo, hệ mặt trời, gia phả, menu tham quan, thậm chí tất cả bạn bè của bạn đều có thể được biểu diễn dưới dạng danh sách hoặc danh sách của danh sách.

Do danh sách rất đa dạng, điều này làm cho danh sách rất quan trọng, vì vậy, việc CSS không có nhiều kiểu danh sách thực sự là một điều đáng tiếc.

Kiểu danh sách

Để ảnh hưởng đến kiểu danh sách, cách đơn giản nhất (và hỗ trợ đầy đủ nhất) là thay đổi loại dấu hiệu.

Ví dụ, trong danh sách không có thứ tự, dấu hiệu của phần tử danh sách (marker) là điểm tròn xuất hiện bên cạnh mỗi phần tử danh sách. Trong danh sách có thứ tự, dấu hiệu có thể là chữ cái, số hoặc một ký hiệu trong hệ thống đếm nào đó.

Để thay đổi loại dấu hiệu của phần tử danh sách, bạn có thể sử dụng thuộc tính list-style-type:

ul {list-style-type : square}

Câu khai báo trên đặt dấu hiệu danh sách của danh sách không có thứ tự thành hình vuông.

Hình ảnh phần tử danh sách

Đôi khi, các dấu hiệu thông thường không đủ. Bạn có thể muốn sử dụng một hình ảnh cho các dấu hiệu, điều này có thể được thực hiện bằng cách sử dụng list-style-image thuộc tính này làm:

ul li {list-style-image : url(xxx.gif)}

Chỉ cần sử dụng một giá trị url() đơn giản, bạn có thể sử dụng hình ảnh làm dấu hiệu.

Vị trí dấu hiệu danh sách

CSS2.1 có thể xác định dấu hiệu xuất hiện bên ngoài hay bên trong nội dung của phần tử danh sách. Điều này được thực hiện bằng cách sử dụng list-style-position Hoàn thành.

Kiểu danh sách viết tắt

Để đơn giản hóa, có thể hợp nhất 3 thuộc tính kiểu danh sách trên thành một thuộc tính tiện lợi:list-stylenhư vậy:

li {list-style : url(example.gif) square inside}

Giá trị của list-style có thể được liệt kê theo bất kỳ thứ tự nào và tất cả các giá trị này đều có thể bị bỏ qua. Chỉ cần cung cấp một giá trị, các giá trị khác sẽ được điền vào giá trị mặc định.

Mẫu ví dụ về danh sách CSS:

Định danh các phần tử danh sách khác nhau trong danh sách không có thứ tự
Ví dụ minh họa tất cả các loại dấu hiệu danh sách khác nhau trong CSS.
Định danh các phần tử danh sách khác nhau trong danh sách có thứ tự
Ví dụ minh họa tất cả các loại dấu hiệu danh sách khác nhau trong CSS.
Tất cả các loại dấu hiệu danh sách
Ví dụ minh họa tất cả các loại dấu hiệu danh sách khác nhau trong CSS.
Đặt hình ảnh làm dấu hiệu danh sách
Ví dụ minh họa cách đặt hình ảnh làm dấu hiệu danh sách.
Đặt dấu hiệu danh sách
Đặt dấu hiệu danh sách
Định nghĩa tất cả các thuộc tính danh sách trong một câu tuyên bố
Ví dụ minh họa đặt tất cả các thuộc tính của danh sách vào một thuộc tính viết tắt.

Thuộc tính danh sách CSS (list)

Thuộc tính Mô tả
list-style Thuộc tính viết tắt. Sử dụng để đặt tất cả các thuộc tính của danh sách vào một câu tuyên bố.
list-style-image Đặt hình ảnh làm dấu hiệu danh sách.
list-style-position Đặt vị trí dấu hiệu danh sách trong danh sách.
list-style-type Đặt loại dấu hiệu danh sách.
marker-offset