تیک تم بازاریابی اینترنتی سئو و بهینه سازی وب سایت آموزش وردپرس 
"
بخش شانزدهم- آموزش ساخت لیست در CSS یا آموزش CSS Lists
| قدم قبلی > | < قدم بعدی |
لیست در CSS
لیست های HTML و خواص لیست در CSS
در HTML، دو نوع اصلی از لیست ها وجود دارد:
لیست های مرتب نشده (<ul>) – آیتم های لیست با گلوله یا یک شکل دیگر مشخص می شوند.
لیست های مرتب شده (<ol>) – آیتم های لیست با عدد یا حروف مشخص می شوند.
خواص لیست در CSS به شما این امکان را می دهد:
- نشانگرهای آیتم های مختلفی را برای لیست های مرتب، تنظیم کنید.
- نشانگرهای آیتم های مختلفی را برای لیست های نامرتب تنظیم کنید.
- یک تصویر را به عنوان نشانگر آیتم لیست تنظیم کنید.
- رنگ های پس زمینه را به لیست ها و آیتم های لیست ها اضافه کنید.
نشانگرهای آیتم های مختلف برای ساخت لیست در CSS
ویژگی list-style-type (نوع سبک لیست)، نوع نشانگر آیتم های لیست را مشخص می کند.
مثال زیر برخی از نشانگرهای آیتم های لیست موجود را نشان می دهد:
مثال:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | </head> <body> <p>نمونه ای از لیست نامنظم:</p> <ul class="a"> <li>Coffee</li> <li>Tea</li> <li>Coca Cola</li> </ul> <ul class="b"> <li>Coffee</li> <li>Tea</li> <li>Coca Cola</li> </ul> <p>نمونه ای از لیست منظم:</p> <ol class="c"> <li>Coffee</li> <li>Tea</li> <li>Coca Cola</li> </ol> <ol class="d"> <li>Coffee</li> <li>Tea</li> <li>Coca Cola</li> </ol> </body> </html> |
با اجرای کد بالا تصویر زیر را در خروجی خواهید دید:
توجه: بعضی از مقادیر برای لیست های نامرتب و برخی برای لیست های مرتب شده است.
یک تصویر به عنوان نشانگر آیتم برای ساخت لیست در CSS
ویژگی list-style-image (تصویر-سبک لیست)، یک تصویر را به عنوان نشانگر آیتم لیست در CSS مشخص می کند:
مثال:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <html> <head> <style> ul { list-style-image: url('sqpurple.gif'); } </style> </head> <body> <ul> <li>Coffee</li> <li>Tea</li> <li>Coca Cola</li> </ul> </body> </html> |
با اجرای کد بالا تصویر زیر را در خروجی خواهید دید:
موقعیت نشانگرهای آیتم لیست
خصیصه list-style-position (موقعیت سبک لیست) موقعیت نشانگرهای آیتم لیست را مشخص می کند(نقاط گلوله).
“list-style-position: outside;”کد نوشته
بدین معنی است که هر نقطه گلوله ای خارج از آیتم لیست قرار داده شود. شروع هر خط یک آیتم لیست به صورت عمودی تنظیم می شود.
یعنی بصورت پیش فرض به این شکل است:
“list-style-position: inside;”کدنوشته
به این معنی است که نقاط گلوله ای در داخل آیتم لیست قرار می گیرند. همانطور که بخشی از آیتم لیست است، بخشی از متن خواهد بود و متن را به جلو هل می دهد:
تنظیمات پیش فرض را حذف کنید
خصوصیت list-style-type:none (نوع سبک لیست= هیچ): این صفت می تواند برای حذف نشانگر / گلوله مورد استفاده قرار گیرد. توجه داشته باشید که این لیست حاوی حاشیه و محدوده پیش فرض است. برای حذف این، حاشیه: ۰ و padding: 0 به <ul> یا <ol>:
مثال:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | <html> <head> <style> ul.demo { list-style-type: none; margin: 0; padding: 0; } </style> </head> <body> <p>Default list:</p> <ul> <li>Coffee</li> <li>Tea</li> <li>Coca Cola</li> </ul> <p>Remove bullets, margin and padding:</p> <ul class="demo"> <li>Coffee</li> <li>Tea</li> <li>Coca Cola</li> </ul> </body> </html> |
با اجرای کد بالا تصویر زیر را در خروجی خواهید دید:
خصوصیت خلاصه نویسی لیست (List – Shorthand property)
خصوصیت list-style (سبک لیست)، یک ویژگی قابل خلاصه نویسی است. این مورد برای تنظیم تمام خواص لیست در یک اعلان (کد معرفی لیست) استفاده می شود:
مثال:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <html> <head> <style> ul { list-style: square inside url("sqpurple.gif"); } </style> </head> <body> <ul> <li>Coffee</li> <li>Tea</li> <li>Coca Cola</li> </ul> </body> </html> |
با اجرای کد بالا تصویر زیر را در خروجی خواهید دید:
هنگام استفاده از خصوصیت مختصر نویسی، ترتیب خصوصیات لیست به این شکل هست:
- list-style-type (اگر یک list-style-image مشخص شده باشد،و تصویری که برای آن تعیین شده به دلایلی نمایش داده نشود، مقدار این ویژگی نمایش داده خواهد شد)
- list-style-position (مشخص می کند که آیا نشانگرهای لیست باید در داخل یا خارج از جریان محتوا نمایش داده شوند)
- list-style-image (یک تصویر را به عنوان نشانگر آیتم لیست مشخص می کند)
اگر یکی از مقادیر خصوصیات بالا از دست رفته باشد، مقدار پیش فرض برای خصوصیات از دست رفته وارد می شود.
سبک سازی برای لیست با رنگ (Styling List With Colors )
ما همچنین می توانیم برای لیست ها با رنگ ها سبک سازی کنیم تا کمی جذاب تر شوند.
هر چیزی که به برچسب <ol> یا <ul> اضافه شده است، روی کل لیست تاثیر می گذارد، در حالی که خواص اضافه شده به برچسب <li> بر روی آیتم های لیست فرد تاثیر می گذارد، مثال زیر را اجرا کنید و به تفاوت ها دقت کنید:
مثال:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 | <html> <head> <style> ol { background: #ff9999; padding: 20px; } ul { background: #3399ff; padding: 20px; } ol li { background: #ffe5e5; padding: 5px; margin-left: 35px; } ul li { background: #cce5ff; margin: 5px; } </style> </head> <body> <h1>Styling Lists With Colors:</h1> <ol> <li>Coffee</li> <li>Tea</li> <li>Coca Cola</li> </ol> <ul> <li>Coffee</li> <li>Tea</li> <li>Coca Cola</li> </ul> </body> </html> |
با اجرای کد بالا تصویر زیر را در خروجی خواهید دید:
| گام قبلی > | < گام بعدی |
