تنظیم لیست ها CSS Styling List

• تنظیم لیست یه صورت مرتب
• تنظیم لیست به صورت نامرتب
• تنظیم تصویر برای نشانگر لیست

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

• unordered lists     آیتم های لیست با یک نشانگرد گرد شکل مشکی ، نمایش داده میشوند
• ordered lists     آیتم های لیست با اعداد یا حروف ، نشانه گذاری میشوند.

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

با ویژگی list-style-type  شما می توانید marker  لیست خود را به شکل مورد نظر خود تغییر دهید، این ویژگی شامل مقادیر زیر میباشد.

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

ol.c {list-style-type: upper-roman;}
ol.d {list-style-type: lower-alpha;}

با ویژگی   list-style-image  شما می توانید تصویر مورد نظر خود را برای  نشانگر لیست تنظیم نمایید.

ul
{
list-style-image: url(‘sqpurple.gif’);
}

این ویژگی ممکن است در تمام مرورگرها پشتیبانی نشود. در مثال زیر راه حل قطعی برای پشتیبانی تمام مرورگرها را می بینید.

ul
{
list-style-type: none;
padding: 0px;
margin: 0px;
}
ul li
{
background-image: url(sqpurple.gif);
background-repeat: no-repeat;
background-position: 0px 5px;
padding-left: 14px;
}

برای اینکه تمام این ویژگی ها را در یک خط اعمال کنید از مثال زیر می توانید استفاده کنید، که به ترتیب 1 list-style-image -3   list-style-position -2 list-style-type  مقداردهی می شوند.

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

با دریافت « مشاوره برنامه‌نویسی، وب و سئو » از کارشناسان جوان حرفه‌ای و باتجربه ساکوراد؛ موفقیت کسب و کار، رونق فروش و افزایش درآمد خود را تضمین کنید!

 

و اما کلام آخر…