استایل لیست‌ها

استایل‌دهی به لیست‌های نامرتب، مرتب و تعریفی در CSS: bullet، شماره‌گذاری، رنگ و چیدمان

استایل لیست در CSS

لیست‌ها (<ul>، <ol>، <dl>) از پایه‌های طراحی وب هستند. CSS کنترل کاملی روی ظاهر آن‌ها ارائه می‌دهد.

ویژگی‌های اصلی لیست

ویژگیتوضیحمثال
list-style-typeنوع نشانه (bullet)disc
list-style-positionموقعیت نشانهinside
list-style-imageتصویر سفارشیurl("star.png")
list-styleخلاصه همهsquare inside

۱. نوع نشانه (list-style-type)

مقدارتوضیح
discدایره توپر (پیش‌فرض ul)
circleدایره توخالی
square</td><td>مربع</td></tr> <tr><td><code>decimal۱، ۲، ۳... (پیش‌فرض ol)
decimal-leading-zero۰۱، ۰۲، ۰۳...
lower-alphaa، b، c...
upper-alphaA، B، C...
lower-romani، ii، iii...
upper-romanI، II، III...
noneبدون نشانه ⭐

۲. موقعیت نشانه (list-style-position)

مقدار عادیموقعیت عادیموقعیت داخلی
Positionoutside (پیش‌فرض)inside
توضیحنشانه بیرون از متننشانه داخل متن 
/* بیرون — نشانه بیرون محتوای li */
    ul { list-style-position: outside; }
    
    /* داخل — نشانه داخل li */
    ul { list-style-position: inside; }

۳. تصویر به‌عنوان نشانه

ul {
        list-style-image: url("checkmark.png");
    }
    
    /* یا با شبه‌عنصر — کنترل بیشتر */
    ul.custom {
        list-style: none;
    }
    ul.custom li::before {
        content: "✓";
        color: #2ecc71;
        margin-left: 10px;
        font-weight: bold;
    }

۴. شمارنده‌های سفارشی

ol {
        counter-reset: my-counter;
        list-style: none;
    }
    
    ol li::before {
        counter-increment: my-counter;
        content: counter(my-counter);
        background: #3498db;
        color: white;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin-left: 10px;
    }

۵. حذف استایل پیش‌فرض

/* حذف کامل استایل لیست */
    .reset-list {
        list-style: none;
        margin: 0;
        padding: 0;
    }

منوی افقی با لیست

ul.menu {
        list-style: none;
        display: flex;
        gap: 20px;
    }
    
    ul.menu li {
        padding: 10px;
        border-radius: 6px;
        transition: background 0.3s;
    }
    
    ul.menu li:hover {
        background: #3498db;
        color: white;
    }

بهترین شیوه‌ها

نکات مهم

این مبحث بخشی از دوره آموزش کامل CSS است.

ابزارهای مرتبط