Tìm hiểu thuộc tính danh sách (list) trong CSS

[PVS]

Tìm hiểu thuộc tính danh sách (list) trong CSS

Chắc hẳn các bạn cũng biết sơ qua về danh sách (list) trong CSS, gồm có các loại như: ul, ol. Bài viết này sẽ làm rõ hơn về các thuộc tính list-style-type, list-style, list-style-image.

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ự với ký hiệu số thứ tự hoặc chữ ở đầu
• Danh sách không thứ tự 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>

​

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à http://vnxf.vn/favicon.ico là ký hiệu của đầu phần tử danh sách

<style>
    ul.imgmarker {
        list-style-image: url("http://vnxf.vn/favicon.ico");
        list-style-position: inside;
    }
    .imgmarker li {background: red}
</style>
<ul class="imgmarker">
    <li>Red</li>
    <li>Green</li>
    <li>Blue</li>
</ul>

​

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à:

​

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

Chúc các bạn thành công.

Nguồn: Internet​