لیست در CSS تا حدود زیادی رفتاری شبیه به بقیه متن دارد به جز این که برخی مشخصه‌های خاص دارد که باید با آن‌ها آشنا باشید و برخی رویه‌ها نیز وجود دارند که باید رعایت کنید. در این مقاله به توضیح روش تعیین استایل لیست در CSS می‌پردازیم. برای مطالعه بخش قبلی این سری مقالات روی لینک زیر کلیک کنید:

مثال ساده لیست

در آغاز به بررسی یک مثال ساده لیست می‌پردازیم. در سراسر این مقاله به بررسی لیست‌های نامرتب، مرتب و توصیفی خواهیم پرداخت. همه این‌ها قابلیت‌های استایل‌بندی مشابهی دارند و برخی موارد نیز استایل‌های خاص خود را دارند. در این مقاله روی مثال زیر کار می‌کنیم:

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

کد بدون استایل آن به صورت زیر است:

این مثال هم اینک برخی استایل‌های پیش‌فرض به شرح زیر دارد:

  • عناصر <ul> و <ol> دارای margin بالا و پایین 16px یا 1em و padding-left به مقدار 40px یا 2.5em هستند.
  • آیتم‌های لیست هیچ Spacing پیش‌فرض ندارند.
  • عنصر <dl> دارای margin بالا و پایین برابر با 16px است اما padding تعیین نشده است.
  • عناصر <dd> دارای margin-left به میزان 40px هستند.
  • عناصر <p>که برای ارجاع در این جا قرار داده‌ایم، دارای margin به میزان 16px هستند که در انواع مختلف لیست یکسان است.

مدیریت فاصله‌بندی لیست

زمانی که لیست‌ها را استایل‌بندی می‌کنیم، باید استایل آن‌ها را طوری تنظیم کنیم که دارای فاصله‌بندی عمودی یکسانی را عناصر پیرامونی باشند. همچنین باید فاصله‌بندی آن‌ها با همدیگر متناسب باشد.

CSS مورد استفاده برای استایل‌بندی متن به صورت زیر است:

  • قاعده اول یک فونت سراسری تعیین می‌کند و اندازه پایه فونت را روی 10px تنظیم می‌کند. این موارد از سوی همه عناصر صفحه ارث‌بری می‌شوند.
  • قواعد 2 و 3 اندازه‌های فونت را برای عناوین، انواع مختلف لیست و پاراگراف‌ها بازیابی می‌کنند. این بدان معنی است که هر پاراگراف و لیست، اندازه فونت و فاصله‌بندی بالا و پایین یکسانی خواهد داشت که ریتم کلی صفحه حفظ شود.
  • قاعده 4 اقدام به تعیین line-height یکسانی روی پاراگراف و آیتم‌های لیست می‌کند بنابراین پاراگراف‌ها و همه آیتم‌های لیست فاصله‌بندی یکسانی بین خطوط خواهند داشت. این کار نیز موجب حفظ ریتم عمودی صفحه می‌شود.
  • قواعد 5 و 6 روی لیست توصیفی اعمال می‌شوند. مقدار line-height روی آیتم‌های لیست توصیفی اعمال می‌شود. این کار در مورد آیتم‌های لیست و پاراگراف‌ها نیز انجام یافت. در این مورد نیز حفظ انسجام کار مناسبی است. همچنین بندهای توصیف را با فونت درشت ارائه کردیم تا از نظر بصری برجستگی بیشتری پیدا کنند.

استایل‌های خاص لیست

در این بخش به بررسی تکنیک‌های خاص فاصله‌بندی در لیست می‌پردازیم و برخی مشخصه‌های خاص لیست را بررسی می‌کنیم. سه مشخصه وجود دارند که در آغاز باید حتماً آن‌ها را بشناسید و می‌توانند روی عناصر <ul> یا <ol> اعمال شوند:

  • list-style-type – نوع Bullet‌-هایی که باید روی لیست استفاده شود را تعیین می‌کند. مثلاً می‌توان از Bullet-های دایره‌ای یا مربعی روی یک لیست نامرتب، یا اعداد یا حرف یا اعداد رومی روی یک لیست مرتب استفاده کرد.
  • list-style-position – نمایش Bullet-ها درون آیتم‌های لیست یا خارج از آن و پیش از آغاز هر آیتم را تعیین می‌کند.
  • list-style-image – امکان استفاده از یک تصویر سفارشی برای Bullet را به جای یک مربع یا دایره ساده فراهم می‌سازد.

استایل‌های Bullet

همان طور که پیش‌تر اشاره کردیم، مشخصه list-style-type امکان تعیین نوع Bullet که روی نقاط Bullet استفاده می‌شود را فراهم ساخته است. در این مثال ما لیست مرتب را طوری تعیین می‌کنیم که از اعداد بزرگ رومی استفاده کند:

بدین ترتیب لیست زیر به دست می‌آید:

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

با مراجعه به صفحه مرجع list-style-type (+) می‌توانید گزینه‌های بیشتری در این خصوص مشاهده کنید.

گزینه‌های Bullet

مشخصه list-style-position تعیین می‌کند Bullet-ها درون آیتم‌ها ظاهر شوند یا خارج از آن‌ها و پیش از آغازشان نمایش یابند. مقدار پیش‌فرض outside است که موجب می‌شود Bullet پیش از آیتم‌های لیست قرار گیرد. اگر این مقدار را روی inside تنظیم کنیم، Bullet-ها درون خطوط قرار می‌گیرد:

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

استفاده از تصویر سفارشی برای Bullet

مشخصه list-style-image امکان استفاده از یک تصویر سفارشی را برای Bullet فراهم می‌سازد. ساختار آن کاملاً ساده است:

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

در کد فوق کارهای زیر انجام یافته است:

  • padding-left مربوط به <ul> از مقدار پیش‌فرض 40px به 20px کاهش یافته است و سپس همین مقدار روی آیتم‌های لیست تنظیم شده است. بدین ترتیب آیتم‌های لیست همچنان با آیتم‌های لیست دیگر و توضیحات لیست توصیفی همخوان می‌مانند، اما آیتم‌های لیست دارای مقداری padding برای تصاویر پس‌زمینه هستند. اگر این کار را انجام ندهیم، تصاویر پس‌زمینه روی متن آیتم لیست می‌روند که ظاهر لیست را خراب می‌کند.
  • مقدار list-style-type را روی none تنظیم می‌کنیم، به طوری که به صورت پیش‌فرض هیچ bullet نمایش نیابد. ما می‌خواهیم از مشخصه‌های background برای مدیریت این Bullet-ها استفاده کنیم.
  • یک Bullet درون هر آیتم لیست نامرتب درج می‌شود. مشخصه‌های مرتبط به شرح زیر هستند:
    • background-image – به مسیری که به فایل تصویر مورد استفاده به جای Bullet مربوط است اشاره می‌کند.
    • background-position – محل نمایش در پس‌زمینه عنصر انتخابی را تعیین می‌کند. در این مورد از مقدار 0 0 استفاده شده است که یعنی Bullet در گوشه چپ-بالای هر آیتم لیست نمایش یابد.
    • background-size – اندازه تصویر پس‌زمینه را تعیین می‌کند. به طور معمول بهتر است از همان اندازه آیتم لیست استفاده کنیم. ما از اندازه 1.6rem یا 16px استفاده کرده‌ایم که ترکیب خوبی با padding به میزان 20px ایجاد می‌کند. فاصله 16 به علاوه 4 پیکسل بین Bullet و متن آیتم لیست نیز ظاهر خوبی دارد.
    • background-repeat – به صورت پیش‌فرض تصاویر پس‌زمینه تا زمانی که کل فضای پس‌زمینه را پر کنند تکرار می‌شوند. ما می‌خواهیم یک تصویر در این مورد درج شود. از این رو باید این مشخصه را روی مقدار no-repeat تنظیم کنیم.

بدین ترتیب نتیجه زیر حاصل می‌شود:

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

مشخصه‌ اختصاری list-style

سه مشخصه‌ای که در بخش قبل اشاره کردیم را می‌توان با استفاده از یک مشخصه اختصاری منفرد به صورت list-style تنظیم کرد. به مثال زیر توجه کنید:

این کد را می‌توان به صورت زیر نیز نوشت:

این مقادیر می‌توانند به هر ترتیبی استایل‌بندی شوند و می‌توان از یک، دو یا هر سه مشخصه استفاده کرد. اگر از هر دو مشخصه type و image استفاده شده باشد نوع به عنوان fallback در موارد عدم بارگذاری تصویر به هر دلیلی مورد استفاده قرار می‌گیرد.

کنترل کردن شمارش لیست

گاهی اوقات لازم است که شمارش یک لیست نامرتب به روش متفاوتی انجام شود، مثلاً شماره‌ها از عددی به جز 1 آغاز شود یا شماره‌ها معکوس باشد و یا گام‌های شمارش بیش از 1 باشند. در HTML و CSS ابزارهایی به این منظور داریم.

Start

خصوصیت start امکان آغاز شمارش یک لیست از عددی به جز 1 را فراهم می‌سازد. به مثال زیر توجه کنید:

کد فوق خروجی زیر را تولید می‌کند:

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

Reversed

خصوصیت reversed شمارش لیست را از به صورت معکوس انجام می‌دهد. در مثال زیر:

خروجی زیر تولید می‌شود:

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

نکته: اگر آیتم‌های لیست در یک لیست معکوس بیش از مقدار خصوصیت start باشد، شمارش تا صفر و سپس مقادیر منفی ادامه می‌یابد.

Value

خصوصیت value امکان تعیین آیتم‌های لیست را برای گام‌های خاص اعداد فراهم می‌سازد. در مثال زیر:

خروجی زیر تولید می‌شود:

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

نکته: اگر از یک مشخصه list-style-type غیر عددی استفاده کنید همچنان باید از مقادیر عددی معادل در خصوصیت value استفاده کنید.

سخن پایانی

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

اگر این مطلب برای شما مفید بوده است، آموزش‌های زیر نیز به شما پیشنهاد می‌شوند:

==

«میثم لطفی» دانش‌آموخته ریاضیات و شیفته فناوری به خصوص در حوزه رایانه است. وی در حال حاضر علاوه بر پیگیری علاقه‌مندی‌هایش در رشته‌های برنامه‌نویسی، کپی‌رایتینگ و محتوای چندرسانه‌ای، در زمینه نگارش مقالاتی با محوریت نرم‌افزار نیز با مجله فرادرس همکاری دارد.

آیا این مطلب برای شما مفید بود؟

نظر شما چیست؟

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *