CSS Lists
21/05/2019
HTML Lists and CSS List
Trong HTML có 2 cách chính để tạo list :
- Không có thứ tự (ul) - List được đánh dấu theo biểu tượng
- Có thứ tự (ol) - List được đánh dấu theo số thứ tự
Thuộc tính của CSS List cho phép bạn :
- Thiết lập đánh dấu khác cho list item có thứ tự.
- Thiết lập đánh dấu khác cho list item không có thứ tự.
- Thiết lập image cho list item.
- Thêm background color cho list và list item.
Thuộc tính List style type
Thuộc tính list-style-type cho phép bạn thay đổi đánh dấu của list . Xem ví dụ dưới đây:
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;
}
Kết quả hiển thị :
- Không có thứ tự :
- Coffee
- Tea
- Coca Cola
- Coffee
- Tea
- Coca Cola
- Có thứ tự:
- Coffee
- Tea
- Coca Cola
- Coffee
- Tea
- Coca Cola
Thuộc tính List style image
Thuộc tính list-style-image cho phép bạn dùng image để đánh dấu cho list . Xem ví dụ dưới đây:
ul {
list-style-image: url('sqpurple.gif');
}
Kết quả hiển thị:
- Coffee
- Tea
- Coca Cola
Position của đánh dấu trong list
Thuộc tính list-style-position chỉ định vị trí của đánh dấu của list.
list-style-position: outsite; có nghĩa là đánh dấu nằm bên ngoài list item. Đây là thuộc tính mặc định. Xem ví dụ bên dưới:
- Coffee
- Tea
- Coca Cola
list-style-position: inside; có nghĩa là đánh dấu nằm bên trong list item. Xem ví dụ bên dưới:
- Coffee
- Tea
- Coca Cola
Xóa thuộc tính mặc định
Thuộc tính list-style-type:none thường được dùng để xóa đánh dấu của list. Mặc định list có margin và padding. Vì vậy để xóa nó, ta dùng margin: 0 và padding: 0 cho ul hoặc ol.
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
Cú pháp ngắn gọn
Thuộc tính list-style là cú pháp viết ngắn gọn. Cú pháp viết như sau:
ul {
list-style: square inside url("sqpurple.gif");
}
Khi viết theo cú pháp ngắn gọn thì thứ tự viết là:
- list-style-type
- list-style-position
- list-style-image
Nếu một trong các giá trị trên bị thiếu, thì giá trị mặc định sẽ được lấy.
Bài học CSS Lists đến đây là hết. Chúc các bạn thành công!
