Tidadigi Logo

CSS list-style Property

Thuộc tính list-style trong CSS dùng để thiết lập kiểu danh sách. Thuộc tính CSS list-style là viết tắt của các thuộc tính list-style-type, list-style-position và list-style-image. Nó định nghĩa hình thức của các dấu mục danh sách. Ví dụ như kiểu( disc, circle), vị trí và hình ảnh tùy chỉnh.

Syntax

list-style: list-style-type list-style-position list-style-image|initial|inherit;

Property Values

Name

Description

list-style-type:

Giá trị này đặt dấu mục cho phần tử danh sách (ví dụ: disc, ký tự). Hoặc kiểu bộ đếm tùy chỉnh, giá trị mặc định của nó là disc.

list-style-position

Giá trị này thiết lập vị trí của dấu so với một mục danh sách. Giá trị mặc định của nó là "outside".

list-style-image

Giá trị này đặt một hình ảnh để sử dụng làm dấu mục danh sách. Giá trị mặc định của nó là "none".

Chúng ta sẽ hiểu các khái niệm về thuộc tính list-style thông qua các ví dụ.

Các phương pháp sử dụng thuộc tính CSS List Style

. Using list-style property value as Square

Thuộc tính CSS list-style được đặt thành square hiển thị dấu vuông cho danh sách không có thứ tự (<ul>). Nó thay thế dấu mặc định bằng hình vuông được tô đầy. Điều này giúp tăng cường khả năng hiển thị trực quan, phân biệt các mục danh sách trên trang web.

Example 1: Ví dụ này minh họa việc sử dụng list-style property. Trong đó giá trị position được đặt thành inside.

HTML 
<!DOCTYPE html>
<html>

<head>
    <title> CSS list-style Property </title>
    <style>
        ul {
            list-style: square inside url(
"https://write.geeksforgeeks.org/wp-content/uploads/listitem-1.png");
        }
    </style>
</head>

<body>
    <h1 style="color:green;">
        GeeksforGeeks
    </h1>
    <h2>
        CSS list-style Property
    </h2>

    <p>Sorting Algorithms</p>

    <ul>
        <li>Bubble Sort</li>
        <li>Selection Sort</li>
        <li>Merge Sort</li>
    </ul>
</body>

</html>

Output:

css-list-style-property

. Using list-style property value as Square Outside

Thuộc tính CSS list-style được đặt thành square outside, đặt dấu vuông bên ngoài các mục danh sách. Điều này áp dụng cho danh sách không có thứ tự (`<ul>`). Nó tạo ra một giao diện rõ ràng, có cấu trúc. Các dấu được căn chỉnh gọn gàng bên ngoài nội dung danh sách.

Example 2: Ví dụ này minh họa việc sử dụng list-style property. Trong đó giá trị position được đặt thành outside.

HTML 
<!DOCTYPE html>
<html>

<head>
    <title> CSS list-style Property </title>
    <style>
        ul {
            list-style: square outside;
        }
    </style>
</head>

<body>
    <h1 style="color:green;">
        GeeksforGeeks
    </h1>
    <h2>
        CSS list-style Property
    </h2>

    <p>Sorting Algorithms</p>

    <ul>
        <li>Bubble Sort</li>
        <li>Selection Sort</li>
        <li>Merge Sort</li>
    </ul>
</body>

</html>

Output:

css-list-style-property

Note: Nếu không có list-style-image nào được chỉ định, nó sẽ được coi là none.

Supported Browsers

Các trình duyệt được hỗ trợ bởi list-style property được liệt kê dưới đây:


Last Updated : 21/07/2025