هنگامی که در حال طراحی صفحات وب سایت خود هستید ممکن است بخواهید تا یک سری از مطالب را بصورت لیست درآورده و پشت سر هم قرار دهید. با استفاده از CSS می توانید لیست های خود را به شکل های مختلفی درآورده و کاری کنید تا لیست های مورد نظرتان شکل جذاب تر و حتی پویا تری به خود بگیرند.
مثال لیست های ترتیبی و لیست های غیرترتیبی
مشخصه های لیست های HTML و لیست های CSS
در HTML دو نوع لیست وجود دارد:
- لیست های غیرترتیبی - (<ul>) – یعنی عنوان هایی که با نشانه لیست شده اند.
- لیست های ترتیبی - (<ol>) – یعنی عنوان هایی که اعداد و یا حروف لیست شده اند.
مشخصه های لیست در CSS به شما اجازه می دهند تا:
- آیتم های مختلفی را برای لیست کردن ترتیبی انتخاب کنید.
- آیتم های مختلفی را برای لیست کردن غیرترتیبی انتخاب کنید.
- برای آیتم های لیست عکس انتخاب کنید.
- به آیتم های لیست و یا خود لیست رنگ پس زمینه بدهید.
نشانه های مختلف برای آیتم های لیست
مشخصه list-style-type آیتم نشانه گذاری لیست را مشخص می کند. برای مثال برخی از نشانه های موجود در مثال زیر آمده است:
در این مثال، list-style-type های گوناگون معرفی شده است که هم برای لیست های ترتیبی (Ordered List) و هم برای لیست های غیر ترتیبی (Unordered List) پیاده سازی شده اند. نتیجه کد بالا را می توانید در زیر مشاهده کنید:
قراردادن تصویر برای نشانه آیتم ها در لیست
مشخصه list-style-image عکسی را به عنوان نشانه آیتم مشخص می کند:
با استفاده از این ویژگی شما می توانید نشانه آیتم را با عکس دلخواه جایگزین کنید. در این مثال مقدار list-style-image مساوی با یک url تنظیم شده است که مکان عکس مورد نظر را مشخص می کند. نتیجه کد بالا را می توانید در زیر مشاهده کنید:
تغییر دادن موقعیت نشانه آیتم ها
مشخصه list-style-position موقعیت نشانه آیتم ها را تعیین می کند. مقدار "list-style-position: outside" یعنی نشانه آیتم در بیرون لیست آیتم ها قرار بگیرد. همانطور که در تصویر زیر مشاهده می کنید، نشانه آیتم ها (دایره سیاه رنگ) در خارج از لیست قرار گرفته است:
مقدار "list-style-position: inside" یعنی نشانه آیتم در درون لیست آیتم ها قرار بگیرد. همانطور که در تصویر زیر مشاهده می کنید، نشانه آیتم ها (دایره سیاه رنگ) درون لیست قرار گرفته است:
حال یک مثال دیگر از نحوه عملکرد ویژگی list-style-position ببینیم. این مثال به درک هرچه بهتر عملکرد list-style-position در طراحی سایت کمک می کند.
در این مثال، مقدار اول outside و مقدار دوم inside تنظیم شده است. نتیجه کد بالا را می توانید در زیر مشاهده کنید:
حذف تنظیمات پیش فرض
مقدار list-style-type:none نشانه های پشت آیتم های لیست را حذف می کند. به خاطر داشته باشید که لیست ها بصورت پیش فرض ویژگی های margin و padding را دارند. برای حذف کردن این ویژگی ها به <ul> و یا <ol>، مقادیر padding:0 و margin:0 اضافه کنید:
در این مثلا ul با کلاس demo padding:0 و margin:0 و همچنین list-style-type=none گرفته است که همانطور که در نتیجه زیر مشاهده می کنید، باعث شده تا دایره های سیاه رنگ پشت هر آیتم ناپدید بشوند:
کوتاه کردن لیست
list-style یک مشخصه برای کوتاه کردن لیست می باشد. با استفاده از آن می توان تمام مشخصه های لیست را در یک ردیف چید.
با استفاده از ویژگی کوتاه شده list-style می توانید همه ویژگی هایی را که تاکنون معرفی کرده ایم را در یک ویژگی قرار دهید. این کار در طول زمان باعث کاهش حجم فایل css و در نتیجه افزایش سرعت سایت می شود. نتیجه کد بالا به شکل زیر است:
وقتی از قابلیت کوتاه کردن لیست استفاده می شود، ترتیب مقادیر list-style به شکل زیر می باشد:
- list-style-type – (اگر یک list-style-image تعیین شده است، مقدار این مشخصه در صورتی نمایش داده خواهد که به هر دلیلی تصویر قابل نمایش دادن نباشد)
- list-style-position – (مشخص کردن اینکه آیا نشانه های آیتم ها باید در درون لیست باشند یا بیرون لیست)
- list-style-image – (مشخص کردن یک تصویر به عنوان نشانه ی آیتم)
استایل دادن لیست ها با رنگ
در طراحی سایت و صفحات وب، می توانیم لیست ها را با رنگ ها استایل دهی کنیم تا کمی جذاب تر بنظر برسند. هر چیزی به که به تگ <ol> یا <ul> اضافه شود بر روی تمام لیست تاثیر می گذارد، وقتی مشخصه ها به تگ <li> اعمال شوند، فقط روی تک آیتم های لیست تاثیر می گذارند:
در مثال بالا برای کل ul و li استایل های اختصاصی نوشته شده است که روی تمام لیست تاثیر می گذارند. همچنین برای تک آیتم های li نیز استایل هایی نوشته شده است که تاثیر آنها فقط روی آیتم های لیست مشخص است.
