X
انجمن برنامه نویسی آموزش CSS

لیست‌ها در Css

لیست‌ها در Css

در این بخش از آموزش css، تنظیم لیست را توضیح می‌دهیم.

برای آموزش تنظیم لیست در سی اس اس بهتر است یادآوری‌ای از تنظیم لیست در Html را مرور کنیم. تنظیم لیست در html به دو صورت می‌باشد که اولی توسط اعداد یا حروف نشان داده می‌شود و دومی توسط نشانگر گرد توپر نشان داده می‌شود.

تنظیم لیست در Css در طراحی سایت به شما این امکان را می‌دهد که نشانگر آیتم لیست خود را به یک تصویر مدل دهید. با استفاده از خاصیت تنظیم لیست در Css لیست‌های مورد نظر خود را می‌توانید به صورت‌های مرتب، نامرتب و یا تنظیم تصویر برای نشانگر تنظیم می‌کنند.

در این ویژگی از سی اس اس می‌توان لیست‌هایی از قبیل موقعیت، شکل و یا نحوه‌ی نمایش اعداد و استفاده از تصاویر را در لیست‌ها تنظیم کرد. تنظیم لیست در سی اس اس شامل امکاناتی می‌باشد که آنها را توضیح می‌دهیم.

list-style-image: با استفاده از این ویژگی برای عکس نشانگر تعریف می‌کند و به صورت یک آیکون کوچک نمایش داده می‌شود و شامل دو حالت است که یکی none می‌باشد که در این حالت هیچ عکسی در لیست دیده نمی‌شود و حالت url که با استفاده از این حالت آدرس تصویر مورد نظر را وارد می‌کنند.

مثال زیر کاربرد list-style-image را در طراحی سایت نشان می دهد.

< ul style="list-style-image: url(../pic/mobsync.03.ico)" >
  < li > Item 1 < /li >
  < li > Item 2 < /li >
< /ul >

list-style-position: در این ویژگی موقعیت قرارگیری نشانه و متن آیتم‌های لیست را بر حسب یکی از حالت‌های زیرتعیین می‌کند که این ویژگی هم شامل دو حالت می‌باشد که یکی inside می‌باشد که در این حالت نشانه لیست و متن آیتم‌های آن کمی تو رفته تر نمایش داده می‌شوند و حالت outside نشانه لیست و متن آیتم‌های به صورت عادی نمایش داده می‌شوند.

line-style-type: با این ویژگی در طراحی سایت می‌توان marker لیست خود را به شکل دلخواه عوض کنید.

مثال زیر همه ی کاربردهای لیست را در سی اس اس نشان می دهد:

ul
{list-style: square url("sqpurple.gif");}

Print
نظرات بسته شده است.
دی ان ان