فهرست ها در CSS (CSS Lists)
«فهرست ها در CSS» (CSS Lists) دو نوع اصلی دارند؛ بنابراین می توانید فهرست های نامرتب و مرتب را بسازید و سپس با ویژگی های اختصاصی، نشانه گذارها و چیدمان را کنترل کنید.
انواع فهرست و ویژگی های اصلی
در HTML دو نوع اصلی داریم: <ul> برای فهرست نامرتب و <ol> برای فهرست مرتب. همچنین CSS این ویژگی ها را فراهم می کند: list-style-type، list-style-image، list-style-position و کوتاه نویسی list-style.
تعیین نوع نشانه گذار با list-style-type
با این ویژگی، نوع نشانه گذار را مشخص می کنید؛ بنابراین می توانید برای <ul> و <ol> گزینه های متفاوتی انتخاب کنید.
ul.a{list-style-type:circle;} ul.b{list-style-type:disc;} ul.c{list-style-type:square;} ol.d{list-style-type:upper-roman;} ol.e{list-style-type:lower-roman;} ol.f{list-style-type:lower-alpha;} ol.g{list-style-type:decimal;}نکته: برخی مقادیر مخصوص فهرست نامرتب هستند و برخی مخصوص فهرست مرتب.
جایگزینی نشانه گذار با تصویر
با list-style-image می توانید نشانه گذار را با تصویر عوض کنید؛ اما بهتر است همیشه یک مقدار پشتیبان برای list-style-type تنظیم شود.
ul{ list-style-image:url('sqpurple.gif'); list-style-type:square; }نکته: اگر تصویر بارگذاری نشود، مرورگر از مقدار list-style-type استفاده می کند.
موقعیت نشانه گذارها: inside و outside
با list-style-position جای نشانه گذار را کنترل کنید. مقدار outside پیش فرض است؛ همچنین inside نشانه گذار را داخل جعبه آیتم قرار می دهد.
ul.a{ list-style-position:outside; } ul.b{ list-style-position:inside; }حذف نشانه گذار و بازنشانی فاصله ها
برای حذف نشانه گذار از list-style-type:none; استفاده کنید. سپس برای حذف فاصله پیش فرض فهرست، حتماً margin:0 و padding:0 را اضافه کنید.
ul{ list-style-type:none; margin:0; padding:0; }کوتاه نویسی list-style
با ویژگی کوتاه نویسی list-style می توانید نوع، موقعیت و تصویر را یکجا تعیین کنید. ترتیب مقادیر این گونه است: نوع، سپس موقعیت، و در پایان تصویر.
ul{ list-style:square inside url("sqpurple.gif"); }رنگ ها، فاصله ها و نمونه ترکیبی
می توانید با رنگ، حاشیه داخلی و بیرونی ظاهر فهرست ها را جذاب تر کنید. ویژگی های روی تگ <ul> یا <ol> کل فهرست را تحت تأثیر می گذارد؛ اما ویژگی های <li> تنها روی آیتم ها اثر دارد.
ol{ background:salmon; padding:20px; } ol li{ background:mistyrose; color:darkred; padding:10px; margin-left:20px; } ul{ background:powderblue; padding:20px; } ul li{ background:mistyrose; color:darkblue; margin:5px; }مسیر مطالعه بیشتر
برای موضوعات مرتبط، به لینک ها در CSS و جداول در CSS مراجعه کنید. همچنین راهنمای فهرست ها در CSS را بوکمارک کنید.