ساخت لیست‌های استایل‌دار با CSS می‌تواند به طراحی وبسایت‌ها جذابیت بیشتری بدهد و آن‌ها را زیباتر و قابل فهم‌تر نمایش دهد. استایل‌دهی به لیست‌ها از طریق CSS امکانات زیادی را برای تغییرات ظاهری فراهم می‌کند.

۱. ایجاد یک لیست ساده:

HTML:

htmlCopy code

<ul class="styled-list"> <li>مورد اول</li> <li>مورد دوم</li> <li>مورد سوم</li> <li>مورد چهارم</li> </ul>

۲. استایل‌دهی به لیست با CSS:

CSS:

cssCopy code

/* از نقطه‌گذاری استاندارد لیست خودداری می‌کنیم */ .styled-list { list-style: none; padding: 0; } /* استایل دهی به آیتم‌های لیست */ .styled-list li { padding: 10px 0; border-bottom: 1px solid #eee; /* جداکننده بین آیتم‌های لیست */ } /* حذف خط جداکننده از آخرین آیتم */ .styled-list li:last-child { border-bottom: none; } /* تغییر دادن رنگ زمینه و حاشیه آیتم هنگام هاور (hover) */ .styled-list li:hover { background-color: #f5f5f5; margin-left: 5px; transition: margin-left 0.3s ease-in-out; /* اضافه کردن انیمیشن به تغییرات */ }

آموزش css

۳. توضیح استایل‌ها:

1. .styled-list: این کلاس برای اعمال استایل‌های خاص به لیست استفاده می‌شود.
2. list-style: none;: این ویژگی برای حذف نقطه‌گذاری استاندارد لیست استفاده می‌شود.
3. padding: 0;: این ویژگی برای حذف فضای پادینگ دور لیست استفاده می‌شود.
4. .styled-list li: این استایل‌ها بر روی هر آیتم لیست اعمال می‌شود و فاصله‌بندی و خط جداکننده بین آیتم‌ها را تعیین می‌کند.
5. .styled-list li:last-child: این استایل برای آیتم آخر لیست استفاده می‌شود تا خط جداکننده را حذف کند.
6. :hover: این ویژگی CSS بر روی آیتم‌ها اعمال می‌شود و زمانی که ماوس روی آن‌ها قرار می‌گیرد، استایل‌های مشخصی اعمال می‌شود.

استفاده از این استایل‌ها به شما اجازه می‌دهد تا لیست‌های وبسایت خود را با دقت و زیبایی بیشتری طراحی کنید. این تغییرات را می‌توانید بر اساس نیازها و سلیقه خود تغییر دهید و ظاهر لیست‌های خود را بهبود ببخشید.