Xin chào mọi người, bài học hôm nay mình sẽ giới thiệu cho các bạn về một thuộc tính nữa của css là Css Lists. Nó tạo ra danh sách rất hữu ích dúp truyền đạt một tập hợp điểm đánh số hoặc hay dấu đầu dòng.
Các thuộc tính
CSS có những thuộc tính như là: list-style-type, list-style-image, list-style-position nó cho phép thay đổi biểu tượng đánh dấu danh mục của danh sách.
Bây giờ chúng ta hãy cùng nhau tìm hiểu sâu hơn về các thuộc tính của nó.
list-style-type
Nó là thuộc tính cho phép chỉ định loại đánh dấu mục của danh sách. Ví dụ như hình tròn, vuông, chữ la mã …
list-style-type có rất nhiều giá trị, dưới đây là các giá trị thông dụng nhất:
- circle: hiển thị ra dạng hình tròn
- square: hiển thị ra dạng hình vuông
- upper-roman: hiển thị ra dạng chữ la mã như là I, II, II, IV …
- lower-roman:hiển thị ra dạng chữ la mã thường như là i, ii, iii, iv …
- upper-latin: hiển thị ra dạng chữ cái latin hoa như A, B, C …
- lower-alpha: hiển thị ra dạng chữ cái alphabet như a, b, c …
- none: không hiển thị gì hêt
- decimal: hiển thị ra dạng số như 1, 2, 3 …
- decimal-leading-zero: hiển thị ra dạng số nhưng sẽ thêm số 0 phía trước số, nếu số đó < 10 như 01, 02, 03 …
Cú pháp:
Selector {
list-style-type: giá trị;
}
Ví dụ cụ thể:
.demo {
list-style-type: circle;
}
.demo {
list-style-type: square;
}
.demo {
list-style-type: upper-roman;
}
.demo {
list-style-type: lower-roman;
}
.demo {
list-style-type: upper-latin;
}
.demo {
list-style-type: lower-alpha ;
}
.demo {
list-style-type: none;
}
.demo{
list-style-type: decimal;
}list-style-image
list-style-image là thuộc tính sử dụng hình ảnh để đánh dấu mục của danh sách.
Cú pháp:
selector {
list-style-image: url của hình ảnh;
}
Ví dụ cụ thể:
<!DOCTYPE html>
<html>
<head>
<style>
li {
list-style-image: url('../img/1.1.jpg');
}
</style>
</head>
<body>
<ul>
<li>Giá trị 1</li>
<li>Giá trị 2</li>
<li>Giá trị 3</li>
</ul>
</body>
</html>Hiển thị:
ảnh hiển thị
list-style-position
list-style-position là thuộc tính thiết lập vị trí nhằm hiển thị của các đánh dấu mục của một danh sách.
list-style-position gồm 2 giá trị chính là:
- outside: đánh dấu mục của danh sách nằm bên ngoài của các phần tử của danh sách.
- inside: đánh dấu mục của danh sách nằm bên trong của các phần tử của danh sách.
Cú pháp:
selector {
list-style-position: giá trị;
}Ví dụ minh họa:
ul.a {list-style-position: inside;}
ul.a {list-style-position: outsite;}
p {color: blue;}Bạn có thể tham khảo:
Kết luận
Bài viết của mình giới thiệu về cách sử dụng của Css Lists đến đây hết rồi. Chúc các bạn một ngày học tập và rèn luyện hiệu quả hẹn gặp các bạn trong các seri tiếp.
Bạn cũng có thể tham khảo thêm nhiều điều bổ ích về lập trình tại đây.
