Thiết lập kiểu danh sách list-style-type
Các thuộc tính về danh sách cho phép bạn thiết lập các ký hiệu chỉ số trong danh sách. Như đã biết trong HTML có hai loại danh sách:
Danh sách có thứ tự
danh sách với ký hiệu thứ tự số hoặc chữ ở đầuDanh sách không thứ tự
danh với ký hiệu đánh dấu ở đầu mỗi mục
Với CSS các kiểu danh sách này có thể mở rộng hơn và các ảnh có thể được dùng làm đánh dấu chỉ số.
Cách đầu tiên là bạn sử dụng thuộc tính list-style-type
để thiết lập đánh dấu là hình tròn, hình vuông, ký tự chữ thường ...
Giá trị cho list-style-type
cho danh sách không thứ tự ul
disc
chỉ số là ●circle
chỉ số là ○square
chỉ số ■
Giá trị cho list-style-type
cho danh sách thứ tự ol
decimal
chỉ số 1, 2, 3 ...decimal-leading-zero
chỉ số 01, 02, 03 ...lower-roman
i, ii, iii, iv, v ...upper-roman
I, II, III, IV, V ...lower-greek
α, β, γ, ...lower-latin
a, b, c, ...upper-latin
A, B, C, ... Zlower-alpha
a, b, c, ... zupper-alpha
A, B, C, ... Z
<style> ol.lower-alpha { list-style-type: lower-alpha; } ul.circle { list-style-type: circle; } ul.square { list-style-type: square; } </style> <ol class="lower-alpha"> <li>Red</li> <li>Green</li> <li>Blue</li> </ol> <ul class="circle"> <li>Red</li> <li>Green</li> <li>Blue</li> </ul> <ul class="square"> <li>Red</li> <li>Green</li> <li>Blue</li> </ul>
- Red
- Green
- Blue
- Red
- Green
- Blue
- Red
- Green
- Blue
Dùng ảnh làm ký hiệu đầu mỗi phần tử danh sách
Lưu ý một số giá trị áp dụng cho danh sách có thứ tự, một số khác lại chỉ dành cho danh sách không thứ tự.
CÒn có các thuộc tính khác cho danh sách ví dụ như:
list-style-image
thiết lập ảnh làm ký hiệu đầu phần tử danh sáchlist-style-position
vị trí phần tử với các giá trị (inside
,outside
)
Ví dụ sử dụng ảnh có url là https://xuanthulab.net/photo/logosm.png là ký hiệu của đầu phần tử danh sách
<style> ul.imgmarker { list-style-image: url("https://xuanthulab.net/photo/logosm.png"); list-style-position: inside; } .imgmarker li {background: red} </style> <ul class="imgmarker"> <li>Red</li> <li>Green</li> <li>Blue</li> </ul>
- Red
- Green
- Blue
Thuộc tính list-style-position
mặc định là outside
, ở ví dự trên là inside
. Nếu là outside
thì kết quả là:
- Red
- Green
- Blue
Thuộc tính list-style
Thuộc tính list-style
là dạng kết hợp của cả ba thuộc tính list-style-type
list-style-image
list-style-position
. Ba đặc tính này khai báo trên 1 dòng.
list-style: list-style-type list-style-position list-style-image
Ví dụ:
ul { list-style: square outside none; }
Tương đương với:
ul { list-style-type: square; list-style-position: outside; list-style-image: none; }