Thuộc tính list-style-type thiết lập kiểu danh sách trong CSS

• Thuộc tính list-style-type
• Thuộc tính list-style-position
• Thuộc tính list-style-image
• Thuộc tính list-style

Trong HTML sử dụng các thẻ <ul> <ol><li> để tạo ra danh sách, khi sử dụng CSS sẽ thiết lập kiểu hiện thị các danh sách này linh hoạt hơn, đa dạng hơn là chỉ sử dụng các thuộc tính của phần tử ol, ul.

Thuộc tính css: 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ự : với ký hiệu thứ tự (số hoặc chữ) đầu phần tử
• Danh sách không thứ tự : với ký hiệu đánh dấu (tròn, vuông) ở đầu phần tử

Với CSS các danh sách này có thể mở rộng hơn, thậm chí các hình ảnh có thể được dùng làm ký hiệu đánh dấu chỉ số phần tử. Phần tử trong danh sách không giới hạn là <li> mà bất kỳ phần tử nào có thiết lập css display: list-item. Đầu tiên, hãy xem thuộc tính list-style-type có thể nhận các giá trị phổ biến sau (áp dụng cho cả <ul> và <ol>):

Những giá trị không thứ tự:

• none không có ký hiệu chỉ số cho phần tử
• disc chỉ số là ●
• circle chỉ số là ○
• square chỉ số ■

Những giá trị có thứ tự:

• 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

Ví dụ - list-style-type

<style>
    .lower-alpha { list-style-type: lower-alpha;  }
    .circle { list-style-type: circle; }
    .lower-greek { list-style-type: lower-greek; }
    .mylistitem {display: list-item; }
</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>
<ol class="lower-greek">
    <li>Red</li>
    <li>Green</li>
    <li>Blue</li>
</ol>
<div class="lower-greek">
    <div class="mylistitem">Đỏ</div>
    <div class="mylistitem">Xanh lá</div>
    <div class="mylistitem">Xanh dương</div>
</div>

Thuộc tính css list-style-position

Thuộc tính list-style-position để thiết lập vị trí của ký hiệu đánh dấu phần tử. Nó nhận giá trị inside thì ký hiệu đánh dấu nằm trong phần tử, outside thì nằm bên ngoài phần tử.

<style>
    .item_bordered {border: 1px red dashed;}
    .marker-inside  {list-style-position: inside;}
    .marker-outside {list-style-position: outside;}
</style>
<ul class="marker-inside">
    <li class="item_bordered">Test 1 (inside)</li>
    <li class="item_bordered">Test 2 (inside)</li>
</ul>

<ul class="marker-outside">
    <li class="item_bordered">Test 1 (outside)</li>
    <li class="item_bordered">Test 2 (outside)</li>
</ul>        

Thuộc tính css list-style-image

Thuộc tính list-style-image : thiết lập ảnh làm ký hiệu đầu phần tử danh sách, giá trị thiết lập dùng hàm url("url-ảnh");

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/html-4465.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

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;
}