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

اموزش رایگان CSS

(CSS Lists Styling)

لیست‌ها (Ordered & Unordered Lists) بخشی مهم از صفحات وب هستند. با CSS می‌توان ظاهر آن‌ها را کاملاً سفارشی کرد و تجربه کاربری جذاب‌تری ساخت.

۱. لیست‌های مرتب و نامرتب

HTML دو نوع لیست اصلی دارد:

  • ‌<ul> (لیست نامرتب – نشانه گذاری با دایره، مربع و …)
  • ‌<ol> (لیست مرتب – نشانه گذاری عددی یا حروف)

مثال:

<ul>
  <li>CSS</li>
  <li>HTML</li>
  <li>JavaScript</li>
</ul>
<ol>
  <li>First step</li>
  <li>Second step</li>
</ol>

۲. تغییر ظاهر نماد لیست (list-style-type)

می‌توان نوع نشانه‌گذاری لیست را تغییر داد:

ul {
  list-style-type: square;   /* disc, circle, square, none */
}
ol {
  list-style-type: upper-roman; /* decimal, lower-alpha, upper-roman و ... */
}

۳. تصویر به جای نماد (list-style-image)

با این ویژگی به جای دایره یا عدد، یک تصویر نشان‌دار می‌شود:

ul {
  list-style-image: url('https://www.example.com/icon.png');
}

یادآوری: آدرس واقعی تصویر را جایگذاری کن!

۴. موقعیت قرارگیری نماد (list-style-position)

  • outside (پیش‌فرض): نماد بیرون از محتوای li قرار می‌گیرد.
  • inside: نماد و متن هم‌تراز می‌شوند.
li {
  list-style-position: inside;
}

۵. حذف نماد لیست

برای ساخت منوهای دلخواه یا استایل سفارشی:

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

بعد از حذف نماد، می‌توان به آیتم‌ها استایل دلخواه داد (مثلاً دکمه، کارت، آیکون و …).

۶. استایل‌دهی حرفه‌ای به آیتم‌های لیست

مثال:

.custom-list li {
  background: #e1bee7;
  margin-bottom: 8px;
  padding: 10px 16px;
  border-radius: 12px;
  color: #6a1b9a;
  font-weight: bold;
  box-shadow: 0 2px 8px -2px #baa4c2;
}

مثال کامل

<ul class="custom-list">
  <li>Simple & Beautiful</li>
  <li>Fully Customizable</li>
  <li>Easy to Use</li>
</ul>

تمرین

۱. نوع نماد لیست را تغییر بده (دایره، مربع، عدد رومی، الفبا و …).
۲. برای لیست خود یک آیکون یا تصویر سفارشی قرار بده.
۳. لیست را بدون نماد کن و با CSS استایل مخصوص به هر آیتم بده (مثلاً رنگ، سایه یا انیمیشن ساده).
۴. تفاوت inside و outside را روی list-style-position تست کن.

نکته سریع:

  • حذف نماد با list-style: none آغاز سفارشی‌سازی استایلی خلاقانه برای منوها و ناوبری‌هاست!

محمد وب‌سایت
مطالب مشابه

دیدگاهتان را بنویسید

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