لیست‌ها در HTML با <ul> (لیست نامرتب) و <ol> (لیست مرتب) ساخته می‌شن.
در CSS می‌تونیم استایل اون‌ها رو تغییر بدیم و شکل، فاصله و چینش آیتم‌ها رو کنترل کنیم.

1️⃣ ویژگی‌های پرکاربرد در CSS برای لیست‌ها

✅ list-style-type

نوع علامت (bullet یا شماره) رو مشخص می‌کنه.

ul {
  list-style-type: disc;   /* ● پیش‌فرض */
}
ol {
  list-style-type: decimal; /* 1, 2, 3 ... */
}

🔹 مقادیر پرکاربرد:

• disc → ● (پیش‌فرض برای ul)

• circle → ○

• square → ■

• decimal → 1, 2, 3 …

• lower-alpha → a, b, c …

• upper-alpha → A, B, C …

• none → حذف علامت

✅ list-style-image

به‌جای bullet یا شماره، یک تصویر رو نشون می‌ده.

ul {
  list-style-image: url("icon.png");
}

✅ list-style-position

محل قرارگیری علامت رو تعیین می‌کنه:

ul {
  list-style-position: inside;  /* داخل متن */
}
ul {
  list-style-position: outside; /* بیرون متن (پیش‌فرض) */
}

✅ list-style (short-hand)

مخفف سه ویژگی بالا در یک خط:

ul {
  list-style: square inside url("icon.png");
}

2️⃣ حذف استایل پیش‌فرض لیست‌ها

خیلی وقت‌ها توی طراحی، لیست‌ها رو بدون علامت نشون می‌دن:

ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

3️⃣ مثال استایل‌دهی لیست افقی (مثل منو)

ul {
  list-style: none;
  display: flex;
  gap: 20px;
}
ul li {
  background: coral;
  padding: 10px 15px;
  border-radius: 8px;
}

4️⃣ خلاصه

• list-style-type → نوع علامت یا شماره

• list-style-image → استفاده از عکس به جای علامت

• list-style-position → داخل یا خارج بودن علامت

• list-style → ترکیب همه در یک خط

• برای طراحی منوها → معمولا list-style: none می‌زنیم