Kiểu danh sách list trong CSS

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ữ ở đầu
• Danh 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, ... Z
• lower-alpha a, b, c, ... z
• upper-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> 

1. Red
2. Green
3. 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ách
• list-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;
}