فهرست ها (Lists)
«فهرست ها (Lists)» یعنی مجموعه آیتم ها. دو نوع اصلی داریم: نامرتب و مرتب. با CSS ظاهر نشانه ها را تغییر می دهیم. مثل لیست کارهای مدرسه که گاهی شماره دار است و گاهی نقطه دار.
استایل دهی فهرست ها با CSS
برای فهرست ها ویژگی های «list-style» داریم. نوع نشانه، تصویر نشانه و موقعیت نشانه را کنترل می کنند.
نوع نشانه آیتم ها (list-style-type)
«list-style-type» نوع نشانه آیتم را مشخص می کند. مثل دایره، مربع یا اعداد رومی.
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-image» می توانی تصویر دلخواه را نشانه آیتم کنی. همچنین نوع پیش فرض را برای حالت نبود تصویر بده.
ul {
list-style-image: url('sqpurple.gif');
list-style-type: square;
}
موقعیت نشانه ها (list-style-position)
«outside» نشانه را بیرون متن می گذارد. «inside» نشانه را داخل متن می آورد.
ul.a {
list-style-position: outside;
}
ul.b {
list-style-position: inside;
}
حذف نشانه ها و ریست فاصله ها
برای لیست های منویی، نشانه ها را حذف کن و حاشیه ها را صفر کن.
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
کوتاه نویسی list-style
«list-style» کوتاه نویسی است. ترتیب: نوع، موقعیت، تصویر.
ul {
list-style: square inside url("sqpurple.gif");
}
رنگ ها، فاصله ها و پس زمینه ها
می توانی با رنگ، padding و margin ظاهر فهرست را زیباتر کنی.
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;
}
گام های عملی
- نوع لیست را انتخاب کن.
- نوع نشانه را تعیین کن.
- در صورت نیاز تصویر بده.
- موقعیت نشانه را تنظیم کن.
- فاصله ها و رنگ ها را نهایی کن.
نکته: اگر تصویر نشانه لود نشد، «list-style-type» جایگزین می شود. همیشه مقدار پیش فرض بگذار.
جمع بندی سریع
- ul نقطه دار است؛ ol شماره دار است.
- list-style-type نوع نشانه را می دهد.
- list-style-image تصویر نشانه می گذارد.
- inside و outside جای نشانه را عوض می کنند.
برای ادامه، صفحه لینک ها را ببین. همچنین جدول ها برای ساخت فهرست های شبیه منو مفید است. اگر راهنمای فهرست ها را می خواهی، این صفحه مرجع توست.