در این بخش از آموزش 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");}