🎁 تخفیف استثنائی تمامی پکیج های آموزشی 🎁

آموزش طراحی سایت - لیست ها در CSS

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

آموزش طراحی سایت - لیست ها در CSS

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

مثال لیست های ترتیبی و  لیست های غیرترتیبی

آموزش طراحی سایت

مشخصه های لیست های HTML و لیست های CSS

در HTML دو نوع لیست وجود دارد:

  • لیست های غیرترتیبی - (<ul>) – یعنی عنوان هایی که با نشانه لیست شده اند.
  • لیست های ترتیبی - (<ol>) – یعنی عنوان هایی که اعداد و یا حروف لیست شده اند.

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

  • آیتم های مختلفی را برای لیست کردن ترتیبی انتخاب کنید.
  • آیتم های مختلفی را برای لیست کردن غیرترتیبی انتخاب کنید.
  • برای آیتم های لیست عکس انتخاب کنید.
  • به آیتم های لیست و یا خود لیست رنگ پس زمینه بدهید.

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

مشخصه list-style-type آیتم نشانه گذاری لیست را مشخص می کند. برای مثال برخی از نشانه های موجود در مثال زیر آمده است:

آموزش طراحی سایت

در این مثال، list-style-type های گوناگون معرفی شده است که هم برای لیست های ترتیبی (Ordered List) و هم برای لیست های غیر ترتیبی (Unordered List) پیاده سازی شده اند. نتیجه کد بالا را می توانید در زیر مشاهده کنید:

آموزش CSS

قراردادن تصویر برای نشانه آیتم ها در لیست

مشخصه list-style-image عکسی را به عنوان نشانه آیتم مشخص می کند:

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

با استفاده از این ویژگی شما می توانید نشانه آیتم را با عکس دلخواه جایگزین کنید. در این مثال مقدار list-style-image مساوی با یک url تنظیم شده است که مکان عکس مورد نظر را مشخص می کند. نتیجه کد بالا را می توانید در زیر مشاهده کنید:

آموزش CSS

تغییر دادن موقعیت نشانه آیتم ها

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

آموزش ایجاد لیست در css

مقدار "list-style-position: inside" یعنی نشانه آیتم در درون لیست آیتم ها قرار بگیرد. همانطور که در تصویر زیر مشاهده می کنید، نشانه آیتم ها (دایره سیاه رنگ) درون لیست قرار گرفته است:

آموزش CSS

حال یک مثال دیگر از نحوه عملکرد ویژگی list-style-position ببینیم. این مثال به درک هرچه بهتر عملکرد list-style-position در طراحی سایت کمک می کند.

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

در این مثال، مقدار اول outside و مقدار دوم inside تنظیم شده است. نتیجه کد بالا را می توانید در زیر مشاهده کنید:

آموزش طراحی سایت

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

مقدار list-style-type:none نشانه های پشت آیتم های لیست را حذف می کند. به خاطر داشته باشید که لیست ها بصورت پیش فرض ویژگی های margin و padding را دارند. برای حذف کردن این ویژگی ها به <ul> و یا <ol>، مقادیر padding:0 و margin:0 اضافه کنید:

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

در این مثلا ul با کلاس demo padding:0 و margin:0 و همچنین list-style-type=none گرفته است که همانطور که در نتیجه زیر مشاهده می کنید، باعث شده تا دایره های سیاه رنگ پشت هر آیتم ناپدید بشوند:

آموزش ایجاد لیست در css

کوتاه کردن لیست

list-style یک مشخصه برای کوتاه کردن لیست می باشد. با استفاده از آن می توان تمام مشخصه های لیست را در یک ردیف چید.

آموزش CSS

با استفاده از ویژگی کوتاه شده list-style می توانید همه ویژگی هایی را که تاکنون معرفی کرده ایم را در یک ویژگی قرار دهید. این کار در طول زمان باعث کاهش حجم فایل css و در نتیجه افزایش سرعت سایت می شود. نتیجه کد بالا به شکل زیر است:

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

وقتی از قابلیت کوتاه کردن لیست استفاده می شود، ترتیب مقادیر list-style به شکل زیر می باشد:

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

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

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

آموزش طراحی سایت

در مثال بالا برای کل ul و li استایل های اختصاصی نوشته شده است که روی تمام لیست تاثیر می گذارند. همچنین برای تک آیتم های li نیز استایل هایی نوشته شده است که تاثیر آنها فقط روی آیتم های لیست مشخص است.

آموزش طراحی سایت آموزش لیست در CSS آموزش CSS آموزش کار با لیست در CSS آموزش استایل دهی لیست

مقالات این دسته بندی