لیست‌ها (چه مرتب و چه نامرتب) یکی از ساختارهای رایج در HTML هستند که برای نمایش مجموعه‌ای از موارد به کار می‌روند. CSS ابزارهای قدرتمندی برای سفارشی‌سازی ظاهر این لیست‌ها و نشانه‌گرهای آن‌ها (مارکرها) فراهم می‌کند تا بتوانیم آن‌ها را با طراحی کلی وب‌سایت هماهنگ کنیم.

۱. تغییر نشانه‌گر لیست (List Item Marker)

به طور پیش‌فرض، لیست‌های نامرتب (<ul>) با دایره یا مربع و لیست‌های مرتب (<ol>) با اعداد یا حروف نمایش داده می‌شوند. CSS به ما امکان می‌دهد این نشانه‌گرهای پیش‌فرض را تغییر دهیم:

  • حذف نشانه‌گر پیش‌فرض: می‌توان نشانه‌گرهای پیش‌فرض را با تنظیم یک خصوصیت خاص، حذف کرد. این کار زمانی مفید است که بخواهیم از نشانه‌گرهای سفارشی خودمان استفاده کنیم یا اصلاً نیازی به نشانه‌گر نداشته باشیم (مثلاً در منوهای ناوبری).
  • استفاده از نشانه‌گرهای سفارشی (CSS Counters / ::marker Pseudo-element):
  • ::marker Pseudo-element: این شبه‌کلاس به طور خاص برای هدف قرار دادن نشانه‌گرهای لیست (مانند دایره‌ها، اعداد) طراحی شده است. با استفاده از این شبه‌کلاس، می‌توانیم خصوصیات ظاهری نشانه‌گرها را تغییر دهیم، مانند:
  • تغییر نماد: به جای دایره یا عدد، می‌توان از نمادهای دلخواه (مانند شکلک‌ها، کاراکترهای خاص) استفاده کرد.
  • تغییر رنگ: رنگ نشانه‌گرها را می‌توان مستقل از رنگ متن آیتم لیست، تغییر داد.
  • تغییر وزن و سبک: در برخی موارد، امکان تغییر وزن یا سبک نشانه‌گر نیز وجود دارد.
  • CSS Counters: این روش قدرتمندتر است و به ما امکان می‌دهد شمارنده‌های سفارشی ایجاد کنیم. این شمارنده‌ها می‌توانند نه تنها برای لیست‌های مرتب (اعداد، حروف) استفاده شوند، بلکه برای ایجاد شماره‌گذاری پیچیده‌تر در بخش‌های مختلف صفحه یا حتی برای استایل‌دهی به نشانه‌گرهای لیست نامرتب با الگوهای دلخواه نیز کاربرد دارند.

۲. تغییر موقعیت نشانه‌گر (List Style Position)

  • مفهوم: نشانه‌گرهای لیست می‌توانند در دو موقعیت قرار بگیرند:
  • inside (داخل): نشانه‌گر در داخل جعبه محتوای آیتم لیست قرار می‌گیرد و بخشی از آن محسوب می‌شود. این یعنی متن از کنار نشانه‌گر شروع می‌شود.
  • outside (خارج): نشانه‌گر در خارج از جعبه محتوای آیتم لیست قرار می‌گیرد و فضای خودش را اشغال می‌کند. متن از زیر نشانه‌گر شروع می‌شود. این حالت پیش‌فرض مرورگرهاست.
  • کاربرد: انتخاب موقعیت مناسب می‌تواند بر چیدمان کلی متن تأثیر بگذارد و خوانایی را بهبود بخشد.

۳. سفارشی‌سازی چیدمان لیست‌ها (List Layout)

علاوه بر تغییر نشانه‌گر، می‌توان چیدمان کلی آیتم‌های لیست را نیز با استفاده از تکنیک‌های پیشرفته‌تر CSS مانند Flexbox یا Grid تغییر داد. این به ما امکان می‌دهد:

  • تغییر جهت نمایش: آیتم‌های لیست را به جای نمایش عمودی، به صورت افقی در کنار هم قرار دهیم (مثلاً برای ساخت منوها).
  • کنترل فضا: فاصله بین آیتم‌های لیست را دقیق‌تر تنظیم کنیم.
  • تراز کردن: آیتم‌ها را در ستون‌های منظم یا با چیدمان‌های پیچیده‌تر تراز کنیم.

با استفاده از این ابزارها، لیست‌ها از یک ساختار نمایشی ساده فراتر رفته و به عناصری منعطف و قابل سفارشی‌سازی در طراحی وب تبدیل می‌شوند که می‌توانند به زیبایی و کارایی صفحه بیافزایند.

کلیدواژه ها : استایل لیست-نشانه‌گر لیست-شبه کلاس مارکر-شمارنده‌های CSS-موقعیت لیست-چیدمان لیست-لیست مرتب-لیست نامرتب-CSS Lists-List Markers-List Style Position-CSS Counters-Marker Pseudo-element-