Danh sách CSS
Danh sách không có thứ tự:
- Cà phê
- Trà
- Cô-ca Cô-la
- Cà phê
- Trà
- Cô-ca Cô-la
Danh sách đặt hàng:
- Cà phê
- Trà
- Cô-ca Cô-la
- Cà phê
- Trà
- Cô-ca Cô-la
Danh sách HTML và Thuộc tính danh sách CSS
Trong HTML, có hai loại danh sách chính:
- danh sách không có thứ tự (<ul>) - các mục trong 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 trong danh sách được đánh dấu bằng số hoặc chữ cái
Thuộc tính danh sách CSS cho phép bạn:
- Đặt các điểm đánh dấu mục danh sách khác nhau cho danh sách được sắp xếp
- Đặt các điểm đánh dấu mục danh sách khác nhau cho 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à mục danh sách
Các điểm đánh dấu mục danh sách khác nhau
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 hiển thị một số dấu hiệu mục danh sách có sẵn:
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;
}
Hãy tự mình thử »Lưu ý: Một số giá trị dành cho danh sách không có thứ tự và một số giá trị dành cho danh sách có thứ tự.
Một 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:
Định vị các điểm đánh dấu mục 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).
"danh sách kiểu-vị trí: bên ngoài;" có nghĩa là các dấu đầu dòng sẽ nằm ngoài mục danh sách. Điểm bắt đầu của mỗi dòng trong danh sách sẽ được căn chỉnh theo chiều dọc. Đây là mặc định:
- Cà phê - Một thức uống được pha chế từ hạt cà phê rang...
- Trà
- Cô-ca Cô-la
"danh sách kiểu-vị trí: bên trong;" có nghĩa là các dấu đầu dòng sẽ nằm trong mục danh sách. Vì nó là một phần của mục danh sách nên nó sẽ là một phần của văn bản và đẩy văn bản vào đầu:
- Cà phê - Một thức uống được pha chế từ hạt cà phê rang...
- Trà
- Cô-ca Cô-la
Xóa cài đặt mặc định
Thuộc tính list-style-type:none
cũng có thể được sử dụng để xóa điểm đánh dấu/dấu đầu dòng. Lưu ý rằng danh sách cũng có lề và phần đệm mặc định. Để loại bỏ điều này, hãy thêm margin:0
và padding:0
vào <ul> hoặc <ol>:
Danh sách - Thuộc tính viết tắt
Thuộc tính list-style
là thuộc tính viết tắt. Nó được sử dụng để đặt tất cả các thuộc tính danh sách trong một khai báo:
Khi sử dụng thuộc tính tốc ký, thứ tự của các giá trị thuộc tính là:
-
list-style-type
(nếu chỉ định list-style-image, giá trị của thuộc tính này sẽ được hiển thị nếu hình ảnh vì lý do nào đó không thể hiển thị) -
list-style-position
(xác đị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 thì giá trị mặc định cho thuộc tính bị thiếu sẽ được chèn vào, nếu có.
Danh sách kiểu dáng với màu sắc
Chúng ta cũng có thể tạo kiểu cho danh sách bằng màu sắc để làm cho chúng trông thú vị hơn một chút.
Bất cứ điều gì đượ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 trong danh sách:
Ví dụ
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;
}
Kết quả:
- Coffee
- Tea
- Coca Cola
- Coffee
- Tea
- Coca Cola
Thêm ví dụ
Danh sách tùy chỉnh có viền trái màu đỏ
Ví dụ này minh họa cách tạo danh sách có viền trái màu đỏ.
Danh sách có viền có chiều rộng đầy đủ
Ví dụ này minh họa cách tạo danh sách có viền không có dấu đầu dòng.
Tất cả các điểm đánh dấu mục danh sách khác nhau cho danh sách
Ví dụ này minh họa tất cả các điểm đánh dấu mục danh sách khác nhau trong CSS.
Tất cả thuộc tính danh sách CSS
Property | Description |
---|---|
list-style | Sets all the properties for a list in one declaration |
list-style-image | Specifies an image as the list-item marker |
list-style-position | Specifies the position of the list-item markers (bullet points) |
list-style-type | Specifies the type of list-item marker |