CSS Format Unordered & Ordered Lists: Định dạng danh sách

Kiểu dáng và vị trí của danh sách không thứ tự (ul) và có thứ tự (ol) có thể được định dạng bằng các thuộc tính CSS: list-style-type, list-style-image và list-style-position.

Cú pháp

selector {
    list-style: /* type || position || image */;
}

Ví dụ 1: Style cho Ordered List

<!DOCTYPE html>
<html>
<head>
<style>
ol {
    list-style: upper-roman;
    line-height: 150%;
}
</style>
</head>
<body>
<h2>Latest C# Versions</h2>
<ol>
    <li>C# 8.0</li>
    <li>C# 7.3</li>
    <li>C# 7.2</li>
    <li>C# 7.1</li>
    <li>C# 7.0</li>
</ol>
</body>
</html>

Ví dụ 2: Style cho Unordered List lồng nhau

<!DOCTYPE html>
<html>
<head>
<style>
ul > ul {
    list-style: circle inside;
}
li:last-child {
    list-style-type: square;
}
</style>
</head>
<body>
<h2>Programming Languages</h2>
<ul>
    <li>C++ programming language created by Bjarne Stroustrup...</li>
    <li>Java programming language developed by James Gosling.</li>
    <ul>
        <li>Core Java</li>
        <li>Advanced Java</li>
    </ul>
    <li>Scala is a modern multi-paradigm programming language...</li>
</ul>
</body>
</html>

Các giá trị list-style-type phổ biến

list-style-position

• outside (mặc định): Marker nằm ngoài content box, không bị ảnh hưởng bởi padding
• inside: Marker nằm trong content box, flow cùng text, bị ảnh hưởng bởi padding

Custom Bullet với ::marker (CSS3)

li::marker {
    color: #0066cc;
    font-size: 1.2em;
    content: "▸ "; /* Custom marker */
}

/* Hoặc dùng counter */
ol { counter-reset: item; }
li::marker {
    content: counter(item) "› ";
    counter-increment: item;
}

Custom Bullet với ::before (Hỗ trợ rộng hơn)

ul.custom-bullets {
    list-style: none;
    padding-left: 1.5em;
}
ul.custom-bullets li::before {
    content: "✦";
    color: #e91e63;
    display: inline-block;
    width: 1.5em;
    margin-left: -1.5em;
}