List-style-type trong css

Bài học CSS dưới đây Taimienphi. vn sẽ giới thiệu cho bạn các thuộc tính định dạng danh sách trong CSS. Ngoài ra, bạn đọc có thể tham khảo thêm một số bài học CSS khác trên Taimienphi. vn để tìm hiểu thuộc tính Margin trong CSS nhé

Các thuộc tính định dạng danh sách (list) trong CSS bao gồm

- Thuộc tính list-style-type cho phép kiểm tra hình thức kiểm soát của các biểu tượng giới thiệu các mục trong danh sách

- Thuộc tính list-style-location chỉ định vị trí của các biểu tượng xuất hiện ở đâu

- Thuộc tính list-style-image chỉ định hình ảnh để đánh dấu thay thế vì sử dụng số thứ tự hoặc biểu tượng dấu đầu dòng (•) để giới thiệu các mục trong danh sách

- Thuộc tính list-style được hiểu là thuộc tính rút gọn của các thuộc tính trên

- Marker-offset thuộc tính xác định khoảng cách giữa các biểu tượng đánh dấu và văn bản trong danh sách

Thuộc tính định dạng danh sách (list) trong CSS

Tham khảo tiếp bài học CSS dưới đây của Taimienphi. vn để tìm hiểu các thuộc tính định dạng danh sách (list) trong CSS

1. Thuộc tính định dạng danh sách trong HTML và CSS

Trong HTML có 2 loại danh sách chính là

- danh sách không có thứ tự (thẻ ul). danh sách các mục được đánh dấu bằng các dấu tròn biểu tượng

- danh sách có thứ tự (thẻ ol). các danh sách mục được đánh dấu bằng chữ số hoặc chữ cái

Các thuộc tính định dạng danh sách trong CSS cho phép

- Thiết lập đánh dấu các danh mục khác nhau cho các danh sách có thứ tự (danh sách theo thứ tự)

- Thiết lập đánh dấu các danh sách khác nhau cho các danh sách không theo thứ tự (danh sách không theo thứ tự)

- Thiết lập cấu hình ảnh bằng cách đánh dấu các mục danh sách

- Thêm màu nền cho danh sách và các mục danh sách

2. Thuộc tính định dạng danh sách (list) trong CSS

2. 1 Thuộc tính list-style-type

Thuộc tính list-style-type trong CSS chỉ định loại biểu tượng sử dụng để dán các mục trong danh sách, chẳng hạn như dấu chấm tròn, ô vuông, chữ số,.

Ví dụ

Kết quả đầu ra có dạng như dưới đây

2. 2 Thuộc tính list-style-image

Thuộc tính list-style-image chỉ định hình ảnh để đánh dấu thay thế vì sử dụng thứ tự số hoặc biểu tượng dấu chấm, chữ số,. to giới thiệu các mục trong danh sách

Ví dụ

Kết quả đầu ra có dạng như dưới đây

2. 3. Thuộc tính list-style-position

Thuộc tính danh sách-kiểu-vị trí xác định vị trí của các biểu tượng đánh dấu xuất hiện ở đâu

in which

- "danh sách-kiểu-vị trí. outside;" có nghĩa là các biểu tượng đánh dấu nằm ngoài luồng danh sách các mục

- "danh sách-kiểu-vị trí. bên trong;" nghĩa là các biểu tượng đánh dấu nằm bên trong danh sách các mục

Ví dụ

Kết quả đầu ra có dạng như dưới đây

2. 4. Thuộc tính list-style-type. không ai

Thuộc tính list-style-type. không được sử dụng để xóa các biểu tượng, đánh dấu các mục trong danh sách. Lưu ý danh sách phải được canh lề theo và đệm mặc định

Để xóa các biểu tượng, đánh dấu các mục trong danh sách, chúng ta thêm lề. 0 và đệm. 0 to ul or ol

Ví dụ

Kết quả đầu ra có dạng như dưới đây

2. 5. Thuộc tính list-style Rút gọn

Thuộc tính list-style Rút gọn được sử dụng để thiết lập tất cả các thuộc tính định dạng danh sách thuộc tính trong một tuyên bố

Ví dụ

Kết quả đầu ra có dạng như dưới đây

Khi sử dụng thuộc tính rút gọn, thứ tự các thuộc tính giá trị lần lượt là

- Thuộc tính list-style-type (nếu thuộc tính list-style-image được chỉ định, giá trị của thuộc tính này sẽ được hiển thị nếu hình ảnh bị lỗi, không thể hiển thị)

- Thuộc tính list-style-position (chỉ định vị trí của các biểu tượng, đánh dấu các mục danh sách xuất hiện bên trong hoặc bên ngoài luồng nội dung)

- Thuộc tính list-style-image (chỉ định hình ảnh làm nhãn đánh dấu các mục trong danh sách)

Nếu một trong các giá trị thuộc tính bị thiếu, giá trị mặc định cho thuộc tính bị thiếu sẽ được thêm vào (nếu có)

2. 6. Thêm màu nền cho danh mục trong danh sách CSS

Bằng cách thêm màu nền cho các danh mục trong danh sách để làm nổi bật danh sách đó hơn

Các thuộc tính bất kỳ được thêm vào thẻ ol hoặc ul đều ảnh hưởng đến toàn bộ danh sách. Các thuộc tính được thêm vào thẻ li ảnh chỉ ảnh hưởng đến các mục danh sách riêng lẻ