تغییر ظاهر لیست‌ها با ویژگی‌های CSS

مقدمه: ۳ نوع لیست HTML

هدف CSS: کنترل بالت، تصویر، موقعیت، فاصله.

۱. list-style-type (نوع بالت/شماره)

تغییر شکل پیش‌فرض بالت/شماره.

لیست غیرترتیبی <ul>

لیست ترتیبی <ol>

مثال:

ul {
  list-style-type: square;     /* ■ */
}
ol {
  list-style-type: upper-roman; /* I II III */
}

۲. list-style-position (موقعیت بالت)

بالت داخل یا خارج کادر متن؟

مثال:

ul.inside li { list-style-position: inside; }
ul.outside li { list-style-position: outside; }

۳. list-style-image (تصویر بالت) ❌ مشکل‌دار

ul li {
  list-style-image: url('arrow.png');
}

مشکلات مرورگر:

• Chrome/Safari/Firefox: درست
• IE/Opera: بالاتر از متن
• اندازه: نامنظم

۴. راه‌حل کامل: background-image + none

بهترین روش - سازگار همه مرورگرها ✅

ul {
  list-style-type: none;  /* حذف بالت پیش‌فرض */
  padding-left: 0;        /* صفر کردن padding */
}

ul li {
  background-image: url('arrow.png');
  background-repeat: no-repeat;
  background-position: 0 0.4em;  /* X Y (از بالا-چپ) */
  padding-left: 25px;            /* فضای بالت + متن */
  line-height: 1.6;
}

مزایا:

• کنترل کامل اندازه/موقعیت
• سازگار IE6+
• قابل انیمیشن

۵. list-style (شورت‌کد - همه‌چیز یکجا)

ترتیب: type position image

ol {
  list-style: upper-latin inside;  /* حروف A B C داخل */
}

ul.custom {
  list-style: square outside url('star.png');
}

انعطاف: مقادیر هرترتیب OK اگر کامل نباشد.

برچسب‌ها: CSS, لیست, ul, ol, list-style, lists