لیست ترفند های css

در HTML دیدیم که با ul و ol می توان لیست های ترتیبی و غیر ترتیبی را ساخت.اما چگونه با CSS می توانیم به این لیست ها استایل ظاهری بدهیم؟چگونه می توانی لیست هایی را به صورت شخصی بسازیم؟همه اینها با CSS امکان پذیر است.آموزش CSS برای این امر ضروریست.

کاربرد CSS در لیست های HTML

با استفاده از CSS می تون کارهای مختلفی بر روی لیست ها انجام داد،از جمله تغییر نشانه یا mark لیست،به عنوان مثال می توان به جای دایره های توپر کنار لیست ، با استفاده از CSS رنگ دایره ها را عوض کرد یا اینکه حتی می توان به جای دایره اشکال دیگری را با CSS قرار داد. علاوه بر این در CSS آنچه مهم است این است که سعی کنیم تنوع و خلاقیت به خرج دهیم.به عنوان مثال به جای علامت های پیش فرض لیست،می توانیم از یک تصویر بک گراند هم استفاده کنیم.

تعیین شکل mark لیست با CSS

دستوری تحت عنوان list-style-type  در CSS وجود دارد که با آن می توانیم شکل ظاهری لیست را عوض کنیم،به عنوان مثال دقت کنید:

ul.a {
    list-style-type: circle;
}

ul.b {
    list-style-type: square;
}

مثال فوق، علامت ظاهری یک لیست را می توانید از حالت دایره (circle) به حالت مربعی (square ) تبدیل کند.چگونه می توانیم به جای این اشکال پیش فرض،از تصویر استفاده کنیم؟برای اینکه بتوانیم با CSS ، به لیست های HTML ، شکل ظاهری خاصی بدهیم از دستور list-style-image  می توان استفاده کرد.این دستور در CSS وظیف این را دارد که به لیست ها ، شکل ظاهری خاصی را ببخشد.شکلی که در لیست خود CSS موجود نیست.سوال دیگر اینکه چگونه محل mark ها را در لیست جا به جا کنیم؟در CSS ّرای اینکار هم دستوری پیش بینی شده به نام list-style-position  که وظیفه آن دقیقا همین مطلب است.به عنوان مثال :

ul {
    list-style-position: inside;
}

دستور بالا،mark های لیست را به درون آیتم ها می آورد.در حالت پیش فرض،در CSS این مقدار برابر است با outside.اما می توان با دستور فوق محل یا position این mark ها یا نشانه های  لیست را عوض کرد.آموزش کامل CSS را ببینید.همچنین می توانید از آموزش جوملا نیز استفاده نمایید.

سایت بزرگ کلیک سایت،بهترین مرجع در ضمینه آموزش طراحی سایت و آموزش html و آموزش css میباشد.تمامی فیلم های آموزشی این سایت توسط استادان کاردان و بسیار با تجربه تهیه شده که تضمینی بر کیفیت بالای تمامی آن ها است.قیمت محصولات نیز کاملا رقابتی بوده و با مقایسه آن با سایر سایت ها میتوان به خوبی متوجه این موضوع شد.