فهرست ها در 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 را بوکمارک کنید.