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

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

 

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

 

 

لیست در CSS

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

 

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

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

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

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

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

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

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

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

مثال:

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

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

 

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

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

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

مثال:

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

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

 

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

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

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

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

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

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

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

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

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

 

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

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

خصوصیت لیست کوتاه

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

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

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

لیست سبک با رنگ

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

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

 

 

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

لطفا امتیاز بدهید



منبع مطلب

این مطالب را نیز ببینید!

بخش نوزدهم- آموزش عرض و حداکثر عرض در CSS یا آموزش CSS Layout

بخش نوزدهم- آموزش عرض و حداکثر عرض در CSS یا آموزش CSS Layout

CSS Layout – عرض و حداکثر عرض  استفاده از width, max-width and margin: auto همانطور …

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

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