کار با لیست ها در HTML | معرفی عناصر lists
در این جلسه از آموزش گام به گام HTML و CSS می‌خواهیم به کار با عناصر list در HTML بپردازیم. با استفاده از لیست ها در HTML می‌توان گروهی از گزینه‌های مرتبط به‌هم را بصورت یک فهرست ایجاد کرد.
دو نوع لیست در HTML وجود دارد:
- لیست نامرتب (unordered list)
- لیست مرتب (ordered list)
نکته: البته لیست‌های دیگری نیز وجود دارند اما به دلیل کاربرد نداشتن آنها اصلا معرفی نمی‌شوند.
لیست نامرتب در HTML
لیست نامرتب یا همان Unordered List با استفاده از تگ <ul> ساخته می‌شود. همچنین گزینه‌های لیست یا همان List Item با استفاده از تگ <li> نوشته می‌شوند. به مثال زیر دقت کنید:
1 2 3 4 5 | <ul> <li>قهوه</li> <li>چای</li> <li>شیر</li> </ul> |
خروجی کد بالا:
- قهوه
- چای
- شیر
چرا به لیست بالا می‌گوییم لیست نامرتب؟ چون ترتیب در گزینه‌های این لیست مهم نیست. یعنی اینکه قهوه را اول بنویسیم یا آخر اهمیتی ندارد.
ویژگی list-style-type در لیست نامرتب
در کنار گزینه‌های لیست نامرتب یک دایره سیاه (disc) نمایش داده می‌شود که به آن نشانگر گزینه‌ها می‌گویند. می‌توان با استفاده از ویژگی list-style-type در CSS نشانگر گزینه‌ها را به اشکال دیگر تغییر داد. در جدول زیر مقادیری که می‌توانید برای این ویژگی استفاده کنید را آورده‌ایم:
| مقدار | توضیح |
|---|---|
| disc | نشانگر گزینه‌ها: دایره سیاه (حالت پیشفرض) |
| circle | نشانگر گزینه‌ها: دایره توخالی |
| square | نشانگر گزینه‌ها: مربع سیاه |
| none | بدون هیچ نشانگری |
در مثال زیر از نشانگر square استفاده کرده‌ایم:
1 2 3 4 5 | <ul style="list-style-type:square;"> <li>قهوه</li> <li>چای</li> <li>شیر</li> </ul> |
خروجی کد بالا:
- قهوه
- چای
- شیر
لیست مرتب در HTML
لیست مرتب یا Ordered List در HTML با استفاده از تگ <ol> ساخته می‌شود. گزینه‌های این لیست هم دقیقا مانند لیست نامرتب، با استفاده از تگ <li> ایجاد می‌شود.
1 2 3 4 5 | <ol> <li>قهوه</li> <li>چای</li> <li>شیر</li> </ol> |
خروجی کد بالا:
- قهوه
- چای
- شیر
خب همانطور که می‌بینید گزینه‌های درون لیست‌های مرتب بصورت شماره‌گذاری شده نمایش داده می‌شوند. این بیانگر اهمیت ترتیب در گزینه‌های لیست است.
صفت type در لیست مرتب
صفت type در لیست‌های مرتب، نوع شماره‌گذاری گزینه‌های لیست را تعیین می‌کند. در جدول زیر کل مقادیری که می‌توان برای صفت type درنظر گرفت را آورده‌ایم:
| مقدار | توضیح |
|---|---|
| 1 | شماره گذاری با استفاده از اعداد لاتین |
| A | شماره گذاری با استفاده از حروف بزرگ لاتین |
| a | شماره گذاری با استفاده از حروف کوچک لاتین |
| I | شماره گذاری با استفاده از حروف بزرگ رومانی |
| i | شماره گذاری با استفاده از حروف کوچک رومانی |
در مثال زیر از حروف بزرگ رومانی استفاده شده:
1 2 3 4 5 | <ol type="I"> <li>قهوه</li> <li>چای</li> <li>شیر</li> </ol> |
خروجی کد بالا:
- قهوه
- چای
- شیر
صفت start در لیست مرتب
بصورت پیشفرض شمارش از عدد 1 شروع می‌شود. اما می‌توان عدد شروع شمارش را با استفاده از صفت start تنظیم کرد. در مثال زیر عدد 5 را برای شروع تنظیم کرده‌ایم:
1 2 3 4 5 | <ol start="5"> <li>قهوه</li> <li>چای</li> <li>شیر</li> </ol> |
خروجی کد بالا:
- قهوه
- چای
- شیر
به همین سادگی ساخت انواع لیست ها در HTML را یادگرفتید. در جلسات بعدی همراه ما باشید.
سلام خسته نباشید.می تونیم در تگ به جای استفاده از style=”list-style-type:square از type استفاده کنیم؟
سلام. ممنونم
خیر صفت type کاربرد دیگهای داره و قابل استفاده در این تگ نیست.