خانه / آموزش CSS / بخش شانزدهم- آموزش ساخت لیست در CSS یا آموزش CSS Lists
پشتیبان وب سایت وردپرس
"

تاریخ بروزرسانی: ۲۵ بهمن ۱۳۹۷ تعداد بازدید : 11 بازدید بدون دیدگاه

بخش شانزدهم- آموزش ساخت لیست در CSS یا آموزش CSS Lists

قدم قبلی >< قدم بعدی

 

آموزش ساخت لیست در CSS
ساخت لیست در CSS

 

 

لیست در CSS

آموزش لیست در CSS

 

لیست های HTML و خواص لیست در CSS

در HTML، دو نوع اصلی از لیست ها وجود دارد:

لیست های مرتب نشده (<ul>) – آیتم های لیست با گلوله یا یک شکل دیگر مشخص می شوند.
لیست های مرتب شده (<ol>) – آیتم های لیست با عدد یا حروف مشخص می شوند.

خواص لیست در CSS به شما این امکان را می دهد:

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

نشانگرهای آیتم های مختلف برای ساخت لیست در CSS

ویژگی list-style-type (نوع سبک لیست)، نوع نشانگر آیتم های لیست را مشخص می کند.

مثال زیر برخی از نشانگرهای آیتم های لیست موجود را نشان می دهد:

مثال:

با اجرای کد بالا تصویر زیر را در خروجی خواهید دید:

نشانگر آیتم های لیست

 

توجه: بعضی از مقادیر برای لیست های نامرتب و برخی برای لیست های مرتب شده است.

یک تصویر به عنوان نشانگر آیتم برای ساخت لیست در CSS

ویژگی list-style-image (تصویر-سبک لیست)، یک تصویر را به عنوان نشانگر آیتم لیست در CSS مشخص می کند:

مثال:

با اجرای کد بالا تصویر زیر را در خروجی خواهید دید:

نشانگر آیتم لیست در CSS

 

موقعیت نشانگرهای آیتم لیست

خصیصه list-style-position (موقعیت سبک لیست) موقعیت نشانگرهای آیتم لیست را مشخص می کند(نقاط گلوله).

“list-style-position: outside;”کد نوشته

 بدین معنی است که هر نقطه گلوله ای خارج از آیتم لیست قرار داده شود. شروع هر خط یک آیتم لیست به صورت عمودی تنظیم می شود.

یعنی بصورت پیش فرض به این شکل است:

موقعیت نشانگرهای آیتم لیست

“list-style-position: inside;”کدنوشته

به این معنی است که نقاط گلوله ای در داخل آیتم لیست قرار می گیرند. همانطور که بخشی از آیتم لیست است، بخشی از متن خواهد بود و متن را به جلو هل می دهد:

موقعیت نشانگرهای آیتم لیست 2

 

تنظیمات پیش فرض را حذف کنید

خصوصیت list-style-type:none (نوع سبک لیست= هیچ): این صفت می تواند برای حذف نشانگر / گلوله مورد استفاده قرار گیرد. توجه داشته باشید که این لیست حاوی حاشیه و محدوده پیش فرض است. برای حذف این، حاشیه: ۰ و padding: 0 به <ul> یا <ol>:

بیشتر بدانید:  بخش ششم- آموزش حاشیه ها (Borders)در CSS

مثال:

با اجرای کد بالا تصویر زیر را در خروجی خواهید دید:

حذف نشانگر / گلوله

 

خصوصیت خلاصه نویسی لیست (List – Shorthand property

خصوصیت list-style (سبک لیست)، یک ویژگی قابل خلاصه نویسی است. این مورد برای تنظیم تمام خواص لیست در یک اعلان (کد معرفی لیست) استفاده می شود:

مثال:

با اجرای کد بالا تصویر زیر را در خروجی خواهید دید:

خصوصیت list-style

 

هنگام استفاده از خصوصیت مختصر نویسی، ترتیب خصوصیات لیست به این شکل هست:

  • list-style-type (اگر یک list-style-image مشخص شده باشد،و تصویری که برای آن تعیین شده به دلایلی نمایش داده نشود، مقدار این ویژگی نمایش داده خواهد شد)
  • list-style-position (مشخص می کند که آیا نشانگرهای لیست باید در داخل یا خارج از جریان محتوا نمایش داده شوند)
  • list-style-image (یک تصویر را به عنوان نشانگر آیتم لیست مشخص می کند)

اگر یکی از مقادیر خصوصیات بالا از دست رفته باشد، مقدار پیش فرض برای خصوصیات از دست رفته وارد می شود.

سبک سازی برای لیست با رنگ (Styling List With Colors )

ما همچنین می توانیم برای لیست ها با رنگ ها سبک سازی کنیم تا کمی جذاب تر شوند.

هر چیزی که به برچسب <ol> یا <ul> اضافه شده است، روی کل لیست تاثیر می گذارد، در حالی که خواص اضافه شده به برچسب <li> بر روی آیتم های لیست فرد تاثیر می گذارد، مثال زیر را اجرا کنید و به تفاوت ها دقت کنید:

مثال:

با اجرای کد بالا تصویر زیر را در خروجی خواهید دید:

سبک سازی با رنگ ها

 

 

 

گام قبلی >< گام بعدی

لینک کوتاه این مطلب: https://tiktheme.com/?p=15640


کانال تلگرام تیک تم

پاسخی بگذارید

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